Angular Gotchas

Angular is full of gotchas. Here are some of my 'favourites'

Transcript

1. Gotcha! Rick Giner @EncomiumEgo linkedin.com/rickginer h8p://beresponsive.io
2. Why is mastering AngularJS so difficult? •  RelaEvely young framework •  Quickly evolving •  Frequently changing •  Library “fixes” someEmes break exisEng expectaEons •  Old documentaEon is everywhere •  It’s conceptually different •  Google are bastards prepared by Rick Giner for #AngularMelb
3. A few gotchas from my Angular journey … prepared by Rick Giner for #AngularMelb
4. $scope •  $scope is magic. Isn’t it? •  How to use it outside AngularJS •  Parent $scope •  Implicit $scope creaEon prepared by Rick Giner for #AngularMelb
5. $scope – How to use it outside AngularJS funcEon SomeCtrl($scope) { setTimeout(funcEon() { $scope.message = “Why won’t this work?”; }, 1000); } prepared by Rick Giner for #AngularMelb Wrap the funcEon in $scope.apply()
6. $scope – parent $scope app.controller('ctrlParent', funcEon($scope){ $scope.parentprimiEve = "someprimiEve" $scope.parentobj = {}; $scope.parentobj.parentproperty = "somevalue"; }); prepared by Rick Giner for #AngularMelb app.controller('ctrlChild', funcEon($scope){ $scope.parentprimiEve = "this will NOT modify the parent" $scope.parentobj.parentproperty = "this WILL modify the parent"; });
7. $scope – Implicit creaEon •  ng-controller •  ng-form •  ng-repeat •  ng-switch •  ng-view prepared by Rick Giner for #AngularMelb
8. Study $scope •  Why it exists •  What it does •  How it works h8p://theni8ygri8y.co/angularjs-pikalls-using-scopes prepared by Rick Giner for #AngularMelb
9. minificaEon •  Angular uses funcEon parameter names to perform dependency injecEon •  JavaScript minifiers change these parameters to the shorter idenEfiers •  Angular has a minificaEon-friendly version of method injecEon prepared by Rick Giner for #AngularMelb
10. minificaEon module.service('myservice', funcEon($h8p, $q) { // This breaks when minified }); prepared by Rick Giner for #AngularMelb module.service('myservice', [ '$h8p', '$q', funcEon($h8p, $q) { // Using the array syntax to declare dependencies works with minificaEon! }]);
11. Object sorEng •  ngRepeat iterates over object in alphabeEcal order #6210 Which means obj[11] is next to obj[1] and before obj[2] •  Cannot use orderBy •  Have to use toArray() L •  … for now … prepared by Rick Giner for #AngularMelb
12. What can we do? prepared by Rick Giner for #AngularMelb
13. You’re not alone! •  Community Angular Melb Melb JS •  Mailing lists and newsle8ers Stay up-to-date •  Forums Ask quesEons Check dates of answers! •  Source code Learn prepared by Rick Giner for #AngularMelb
14. Thanks! Rick Giner @EncomiumEgo linkedin.com/rickginer h8p://beresponsive.io prepared by Rick Giner for #AngularMelb