Advanced Tips and Tricks using AngularJSSimon Guest, Distinguished Engineer. Neudesic, LLC

The last decade of server-side HTML...

What's wrong with this model?

What's wrong with this model?» Most UI actions require round trip

» Poor mobile experience

» Devices are getting more powerful

» Servers need to scale

» Any offline scenario is near impossible

The next decade of client-side JavaScript

How does this help?» UI actions handled locally

» Vasly improved mobile experience

» Taking advantage of the power of the device

» Server can handle more clients

» Offline becomes more manageable

Too many choices...

Audience Poll

Who knows what AngularJS is?

Who has built AngularJS sample apps?

Who is using AngularJS for an ongoing project?

Angular's ups and downs...

Goal of this sessionShare 10 tips and tricks that we've learned from real world AngularJS projects

Goal of this sessionCompile different tips and tricks from around the Web

Goal of this sessionShare as much code as possible

10. StructureHow should I structure my AngularJS project?

10. Structure» Roll your own

» Angular Seed (https://github.com/angular/angular-seed)

» Yeoman Angular Generator (http://yeoman.io)

10. Structure» Roll your own

» Angular Seed (https://github.com/angular/angular-seed)

» Yeoman Angular Generator (http://yeoman.io)

10. Structure» Come back to pivoting on functionality when the

project gets large

10. Structure> app-> controllers--> todoController.js-> services--> todoService.js-> directives--> todoItemDirective.js

10. Structure> app-> todo--> controller.js--> service.js--> itemDirective.js

9. MinificationShould I minify my AngularJS project?

9. Minification» Due to the "DI" way that Angular works,

minification is hard

9. Minification» Due to the "DI" way that Angular works,

minification is hard

» Do you really need to minify?

9. Minification» Due to the "DI" way that Angular works,

minification is hard

» Do you really need to minify?-- AngularJS includes are already compiled JS-- Yeoman template includes as much minification as you need-- Disable property renaming, and manually change constructors

8. DirectivesWhat are they?

8. Directives» They make AngularJS unique

» They make your markup more declarative

» They support templates nicely

» They promote re-use

» They prevent lots of JavaScript!

7. Page LoadingHow do I create a good user experience?

7. Page Loading» Flash of {{your.stuff}} when you load the page

7. Page Loading» Flash of {{your.stuff}} when you load the page

» Use ng-cloak directive in order to hide declarations until they are initialized

» Use ng-bind instead of {{}} in your index.html

6. Internet ExplorerDoes AngularJS work with IE?

6. Internet Explorer» Support for IE8 is being removed from Angular 1.3

onwards

» If you are going to keep supporting IE8 with Angular 1.2...-- Never use <custom-directive>-- Use <div custom-directive> instead

» Ensure that IE is part of test plan (if you are using Selenium)

5. Development EnvironmentWhat tools should I be using?

5. Development Environment» Angular Support in IDEs

-- WebStorm 8-- Sublime-- Use data-ng-* in non-supported environments

» Install Angular via Bower

5. Development Environment» Logging

-- Avoid using console.log in your controllers

» Use $log instead-- $log can be extended to provide additional logging capabilities

5. Development Environment» Batarang

-- Chrome extension of AngularJS debugging

5. Development Environment» Batarang

-- Chrome extension to enable AngularJS debugging

» AngularJS tab in Chrome dev tools-- Enables scope inspection-- Performance to identify trouble spots-- Service dependency graph

5. Development Environment» Javascript Debugging

-- Use 'debugger' in any controller to add breakpoint-- Very useful combined with Batarang

4. Angular-Supported FrameworksHow do I deal with non-AngularJS stuff?

4. Non-Angular Stuff» Bootstrap

-- UI Bootstrap-- Components written by the AngularJS team

» Examples-- AngularJS version of Alert-- $modal for invoking modals-- Date/time pickers

» http://angular-ui.github.io/bootstrap/

4. Non-Angular Stuff» jQuery

-- Use angular.element instead of $() selector-- Search for a jQuery-equivalent instead

» Examples-- html(), text(), val()

» Ask whether you can use directives instead

4. Non-Angular Stuff» Other JavaScript methods

-- angular.fromJson, angular.toJson, angular.copy, angular.extend-- $timeout, $log, $window, $q, $document-- Third party libraries for date formatting

» Why?-- Angular methods better observe the scope lifecycle-- More predictable results

3. Separation of ConcernsHow do I make the right choices?

3. Separation of Concerns» Three golden rules

-- Controllers should never refer to any DOM elements-- Controllers should call services vs. holding too much business logic-- "How do I pass things between controllers?"--- ...probably means that you are doing things wrong

3. Separation of Concerns» Controller inheritence

-- Is possible to use angular.extend to provide some kind of inheritence on controllers

2. ScopeWhat do I need to know about $scope?

2. Scope» Scope is not your model

-- Even though many of the samples show it this way-- Scope should be the glue between your controller and your model (accessed through services)-- Remember, services are singletons

2. Scope» Scope inheritence

-- Avoid $rootScope, try to use services instead-- Create subscopes when invoking subcontroller from controller--- Can be a little confusing, especially with frameworks (e.g. Bootstrap modal)-- Batarang can be your friend

1. PerformanceHow do I prevent performance bottlenecks?

1. Performance» You are not in control of when Angular invokes

functions based on changes to $scope

» A single change in scope (e.g keypress) can call multiple functions

1. Performance» Most changes to $scope are processed in fractions

of a second-- Faster than the human eye can detect on a page-- However, once you start reaching 1500+ function calls on a scope change, thing's deteriorate-- Deteriorate really quickly

1. Performance» Using ng-repeat or ng-switch can compound this

1. Performance<tr ng-repeat="item in items"> <td>{{item.name}}</td> <td>{{item.description}}</td> <td>{{getPrice(item.id)}}</td></tr>

» How many times will getPrice function be called?

1. Performance» Overcoming this bottleneck

-- Never call $scope functions from within ng-repeat or ng-switch statements-- Use watch collection to calculate everyting when the controller is first invoked

1. Performance$scope.$watchCollection('items', function (newItems) { for (var i = 0; i < newItems.length; i++) { newItems[i].price = getPrice(newItems.id); } $scope.items = newItems;});

1. Performance<tr ng-repeat="item in items"> <td>{{item.name}}</td> <td>{{item.description}}</td> <td>{{item.price}}</td></tr>

The Ten Again

The Ten Again-- 10. Structure-- 9. Minification-- 8. Directives-- 7. Page Loading-- 6. Internet Explorer-- 5. Development Environment-- 4. Non-Angular Stuff-- 3. Separation of Concerns-- 2. Scope-- 1. Performance

Thank you!

Q&A» Simon Guest, Distinguished Engineer, Neudesic LLC

» simonguest.com (@simonguest)

» http://github.com/simonguest/gids

» http://slideshare.net/simonguest

-- http://www.amazon.com/File-New-Presentation-Developers-Professionals/dp/0615910459