Use http://yeoman.io/ for app scaffolding (yo), build/preview/test (grunt) and manage dependencies (bower)
sudo npm install -g yo # grunt / bower are dependencies of yo
npm install -g generator-angular # install generator
yo angular # scaffold out a AngularJS project
bower install angular-ui # install a dependency for your project from Bower
grunt test # test your app
grunt serve # preview your app
grunt # build the application for deployment
For testing, karma is recommended: https://github.com/vojtajina/karma/sudo npm install -g karma
Adding items to your project
yo angular:controller myController
yo angular:directive myDirective
yo angular:filter myFilter
yo angular:service myService
NOTE: The controller will be named whatever you specify + 'Ctrl', so running 'yo angular:controller About' will create the AboutCtrl controller.
A quick overview of yo/grunt/bower and usage: https://github.com/yeoman/yeoman/wiki/Getting-Started
Main things to edit are:
- app/scripts/
- app/scripts/controllers/
- app/scripts/directives/
- app/scripts/filters/
- app/scripts/services/
- app/styles
- app/views
Routing
One gotcha is defining routes using $routeProvider. Url's in the document are defined as
<a href='#/path/to/route'>Clicky</a>
Where as the url is defined in the $routeProvider config as
function routeConfig($routeProvider) { $routeProvider.
when('/path/to/route', {
controller: MyController,
templateUrl: 'template.html'
})
...
notice this mismatch between the link (pre-ceeding '#') and the url (no '#')
https://github.com/angular-ui/ui-router Provides a way to nest views which seems a lot more powerful then the native routing.
