From the original angular-seed:
This project is an application skeleton for a typical AngularJS web app. You can use it to quickly bootstrap your angular webapp projects and dev environment for these projects.
The seed contains a sample AngularJS application and is preconfigured to install the Angular framework and a bunch of development and testing tools for instant web development gratification.
The seed app doesn't do much, just shows how to wire two controllers and views together.
This project skeleton was generated with generator-angular and got protractor, grunt-interfake and scss-lint added. It also implements some best practices like the modular organization and SMACSS+BEM.
Stuff to install:
- Node.js
- Python 2.7.x
- Ruby
- rubygems
- compass
- scss-lint
- On Windows 7: Microsoft Visual Studio C++ 2012 for Windows Desktop Express
With Node and npm ready you can install the following:
$ npm install yo -g # for scaffolding
$ npm install protractor -g # for e2e tests based on Selenium WebDriverJS
$ webdriver-manager update --standalone # downloads the selenium server and chromedriver
Now clone this repository or download the zip and install it:
$ cd angular-seed/
$ npm install # installs frontend and backend dependencies
The frontend can be served by a local webserver that supports livereload. This also includes a fake backend server. There also is a unit test and e2e test config set up so you can run tests from the beginning.
$ grunt serve starts a connect server at localhost:8088 that serves the frontend with livereload capability. To start this server along with the fake backend execute $ grunt serve:withFakeBackend. A proxy will forward all requests going to localhost:8088 that start with /rest/ to the fake backend server running at localhost:9000. You can change this url pattern in Gruntfile.js. Note that the fake backend will not be started with livereload capability.
$ grunt test executes unit tests with autowatch (re-executes the tests whenever a unit or unit test changes).
$ grunt test:singleRun runs the unit tests just once.
Unit tests are executed with karma which is configured to run the tests in PhantomJS. See karma.conf.js to change this. Karma will launch a server at localhost:7070.
Run webdriver-manager start in a separate terminal and then $ protractor test/e2e/local.js.
E2E tests are based on protractor which is based on WebDriverJs. With that you can start writing E2E tests for Selenium from the beginning.
The webdriver-manager will setup a local Selenium server at localhost:4444.
$ grunt build builds the project. Take a look at Gruntfile.js to see what is included in the build.
The built frontend will be written to dist/ and this folder will be zipped to dist.zip.
$ grunt serve:dist builds the project and then serves the built frontend at localhost:8088 (without the fake backend).
Here you can find some conventions I chose for my AngularJS projects. It's all about modularization. If you want to learn AngularJS, take look at this collection of tutorials (by thinkster.io).
See 13 Steps to AngularJS Modularization (by Christopher Hiller)
A modular file structure:
app
|--scripts
| |--homepage
| | |--homepage.config.js
| | |--homepage.ctrl.js
| | |--homepage.directive.js
| | |--homepage.module.js
| | |--...
| |--common
| | |--directives
| | |--services
| | |--filters
| | |--...
| |--myapp.module.js
| |--myapp.config.js
|--index.html
For a modular CSS/SASS file structure see cheat sheet for smacss with sass and bem (by me).
The protractor doc recommends that you should make use of the Page Object pattern in your E2E tests to make them more readable. Take a loook at the sample e2e test provided with this project. It uses an environment specific Page Object.
These are the naming conventions for E2E test files:
- for protractor config files:
test/e2e/local.js - for environment specific page objects:
test/e2e/homepage/homepage.page.local.js - for test files:
test/e2e/homepage/homepage.js