8th Jan 2014, Dublin
Hit 'M' for overview of slides. Press 'M' again to exit.
ng-app bootstraps your Angular app
- ng-app defines the part of the page Angular controls.
- Without ng-app, you don't have an Angular app.
Origins of AngularJS
- Created by Miško Hevery and Adam Abrons.
- Initial release in 2009.
- Abrons left the project.
- Core developers in Google:
Miško Hevery, Igor Minár and Vojta Jína.
High-Level Overview of AngularJS
- A framework not unlike Django, but in the browser.
- A level of abstraction above jQuery
- ...and other DOM-manipulation and events libraries.
Angular is an MVC Framework
- MVC, all in the browser.
- View: a section of a web-page.
- Input from the user may change the model.
- Data-binding means: as the model changes, the view changes automatically.
A Potted History of Native Web Development
Brief (and woefully incomplete).
Web Development approach 1
HTML templates with tags.
Server inserts data (often from a database).
Example: Django templates.
Document Object Model ("DOM")
- The DOM is a data structure representing the web-page.
- An abstract view of the web-page as a tree of objects.
Web Development approach 2
- DOM tree events and Manipulation.
Web Development approach 3
Rich client in the browser
...built with Ember or Angular
...consuming a REST API on the server.
Scope is crucial to Angular
- Scope is structured like the roots of a tree.
- ng-app defines RootScope.
- Your view defines a new scope on the page.
- Even ng-repeat creates its own nested scope.
Angular loves JSON
- Angular consumes JSON most easily as an array of objects.
- Handy, declarative feature.
- Several filters built-in.
- You can also write your own filters.
What you need to know about CoffeeScript
- Like Python, whitespace is significant.
- Whitespace defines blocks (for functions and objects).
- The arrow -> is used to define a function.
Node is needed for its toolchain
- Goal: install npm, the package manager for Node.
- npm installs Coffee and Karma, plus other tools.
- Start by installing nvm (Node Version Manager):
curl https://raw.github.com/creationix/nvm/master/install.sh | sh
- Then install Node and npm:
nvm install 0.10.24
- More detailed instructions.
- Install CoffeeScript:
npm install -g coffee-script
- Install js2coffee:
npm install -g js2coffee
js2coffee input.js > output.coffee
Let's talk about DI
- DI: Dependency Injection.
- Familiar to the Java world: e.g. Spring, Guice.
- DI is also used in .NET.
- DI is essential in Angular apps.
- e.g. DI provides the modules needed by each controller.
- The name of the app ('app').
- And the modules it depends on:
Configuring the routes
m = angular.module('app', mods)
m.config ['$routeProvider', routesConfigFn]
How Angular works
- When Angular bootstraps (after
...Angular 'compiles' the directives on the page
- Angular responds to routes (URLs in the browser)
...by loading the appropriate view (HTML file)
...and passing control to its controller.
The run method
- The run method is like the main() in C or Python.
- Executed first, once the Angular app has bootstrapped.
- Good place to make an initial request to the server, say;
or detect the user's login status (wth ngCookies).
The Power of Directives
- Key selling-point of AngularJS.
- Angular comes with a great host of directives built-in.
- See: http://docs.angularjs.org/api.
- Using a directive is declarative programming.
- And you can build your own directives (advanced topic).
Services for Code Organisation
- AngularJS services are local (in the browser).
- Modules for your code.
- Reduce code duplication.
- Without services, you'll repeat code in your controllers!
- DRY: Don't Repeat Yourself.
- Lo-Dash for map, filter, reduce etc.
(powerful functions to process data structures).
- Restangular for server comms.
(instead of ngResource or $http).
- Angular ui-router for multi-view pages.
- Angular UI Bootstrap to build a user-interface.
- Build system - Grunt.
- Package management - Bower (usually).
- Small/unit tests - Jasmine.
- System/integration/large tests - Karma.
"God is in the structure"
- Use a starter project:
- ...angular-grunt-coffeescript if you're using Coffee.
- Subdirectory per feature.
- Use services for code modules (intermediate).
- Write directives (advanced).
Learn about Chrome Developer Tools