5. What's wrongwiththis 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
8. How doesthis 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
30. 9. Minification
» Due to the "DI" way that Angular works,
minification is hard
» Do you really need to minify?
31. 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
33. 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!
36. 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
39. 6. InternetExplorer
» 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)
41. 5. DevelopmentEnvironment
» Angular Support in IDEs
-- WebStorm 8
-- Sublime
-- Use data-ng-* in non-supported environments
» Install Angular via Bower
42. 5. DevelopmentEnvironment
» Logging
-- Avoid using console.log in your controllers
» Use $log instead
-- $log can be extended to provide additional
logging capabilities
48. 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/
49.
50. 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
51. 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
53. 3. Separation ofConcerns
» 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
54. 3. Separation ofConcerns
» Controller inheritence
-- Is possible to use angular.extend to provide
some kind of inheritence on controllers
56. 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
57. 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
59. 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
60. 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
62. 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?
63. 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