Angular lets you build "MVW" webapps, so you can seperate view logic, data model and controller actions.
http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/
Tooling
These are things you'll probably want by default:
Yeoman - scaffolding. Like Maven archetypes.
Grunt - build automation. Includes a Jetty-style webserver.
Bower - dependency management.
Grunt plays dumb for me - this seems to be to do with wanting Node modules installed locally rather than globally. Don't just use sudo to make NPM work. I used this:
https://github.com/glenpike/npm-g_nosudo
This is cleaner if you're starting fresh:
https://docs.npmjs.com/getting-started/fixing-npm-permissions
To build the Angular scaffold,
npm install -g generator-angular
yo angular
To view the website,
grunt serve
The opens a webserver on port 9000.
This will hot-deploy changes to the code as you change them.
Bower
To add a Bower dependency,
bower install angular-bootstrap --save
This finds, downloads and adds to the the project's bower.json. It won't include it into in the HTML, you need to do that manually.
Karma tests
Unit tests for JS! These are possible because Angular has separated the model and controller from the browser. To run them,
grunt test
Angular structure
In app/scripts/app.js is the module file - this is the Angular concept of a site. It defines servlet mappings.
In app/scripts/controllers are the controllers. Each controller consists of an anonymous function which acts on a $scope object. The scope is the dependency-injected execution context.
Your data model should be stored in the $scope object, and the controller logic attached as functions to it.
Model data can be bound to the view using double braces, {{data}}. More complex interactions use angular directives (attributes generally beginning "ng-").
That seems to be enough to get an Angular app up and running!
No comments:
Post a Comment