Tips for Angular Applications
Download as PPTX, PDF1 like484 views
This document provides tips and best practices for building Angular applications. It recommends structuring projects by components with suffix file names, separating code into modules, and following patterns like dependency injection. It also offers advice on minimizing Angular files, using one-time binding, avoiding watchers, handling inheritance, optimizing ng-repeat, and debugging with tools like Batarang. The document emphasizes writing clean, performant code through practices such as limiting DOM access from controllers and preferring services over $rootScope.
![Separate to Modules
var corelist = app.module("app.core.list", []);
corelist.controller("app.core.list.listCtrl", ...)
angular.module(โapp.common.services")
.service("myApp.common.services.product"](https://image.slidesharecdn.com/tipsforangularapplications-150601174326-lva1-app6892/85/Tips-for-Angular-Applications-6-320.jpg)
![Minimizing Angular Files
Minimizing process will replace variable names
compromising the dependency injection
someModule.controller('MyController', ['$scope', function($scope) {
$scope.name = "Sebastian";
}]);
someModule.controller('MyController', function ($scope) {
$scope.name = "Sebastian";
});
someModule.controller('MyController', function (a) {
a.name = "Sebastian";
});](https://image.slidesharecdn.com/tipsforangularapplications-150601174326-lva1-app6892/85/Tips-for-Angular-Applications-8-320.jpg)
![Controller Inheritance
app.controller("ChildCtrl", ["$scope", function ($scope) {
$scope.childText = "childText"
$scope.text = "childTextโ
}]);
app.controller("ParentCtrl", ["$scope", function ($scope) {
$scope.parentText = "parentText"
$scope.text = "parentTextโ
}]);
<div ng-controller="ParentCtrlโ>
<div ng-controller="ChildCtrlโ>
{{parentText}}
<br/>
{{childText}}
<br/>
{{text}}
</div>
</div>](https://image.slidesharecdn.com/tipsforangularapplications-150601174326-lva1-app6892/85/Tips-for-Angular-Applications-10-320.jpg)
![Controller Inheritance
app.controller("ChildCtrl", function ($scope, $controller) {
$controller("ParentCtrl", {$scope: $scope});
$scope.childText = "childText";
$scope.text = "childText";
});
app.controller("ParentCtrl", ["$scope", function ($scope) {
$scope.parentText = "parentText"
$scope.text = "parentTextโ
}]);
<div ng-controller="ChildCtrlโ>
{{parentText}}
<br/>
{{childText}}
<br/>
{{text}}
</div>](https://image.slidesharecdn.com/tipsforangularapplications-150601174326-lva1-app6892/85/Tips-for-Angular-Applications-11-320.jpg)
![ng-repeat cont
<tr ng-repeat="item in items">
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{item.price}}</td>
</tr>
$scope.$watchCollection('items', function (newItems) {
for (var i = 0; i < newItems.length; i++) {
newItems[i].price = getPrice(newItems.id);
}
$scope.items = newItems;
});](https://image.slidesharecdn.com/tipsforangularapplications-150601174326-lva1-app6892/85/Tips-for-Angular-Applications-16-320.jpg)
Tips for Angular Applications
- 1. ยฉ Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com SELA DEVELOPER PRACTICE MAY 31, 2015 โ JUNE 4, 2015 Sebastian Pederiva Tips for Angular Applications Senior Consultant sebastianp@sela.co.il @spederiva tiny.cc/SebastianBlog
- 2. Starting
- 3. Project Structure Roll your own Angular Seed https://github.com/angular/angular- seed
- 5. Add Suffix to the file names Easy to read and understand Essential for โcomponent typeโ structure Help make better automation and testing product-list.ctrl.js product-list.tpl.html product-list.fltr.js product-list.fctry.js product-list.srv.js product-list.const.js product-list.val.js
- 6. Separate to Modules var corelist = app.module("app.core.list", []); corelist.controller("app.core.list.listCtrl", ...) angular.module(โapp.common.services") .service("myApp.common.services.product"
- 7. Golden Rules Controllers should never refer to any DOM elements Controllers should call services vs. holding too much business logic Avoid $rootScope, try to use services instead Expression {{}} vs ng-cloak
- 8. Minimizing Angular Files Minimizing process will replace variable names compromising the dependency injection someModule.controller('MyController', ['$scope', function($scope) { $scope.name = "Sebastian"; }]); someModule.controller('MyController', function ($scope) { $scope.name = "Sebastian"; }); someModule.controller('MyController', function (a) { a.name = "Sebastian"; });
- 9. One Time Binding Use double colon :: https://code.angularjs.org/1.3.15/docs/guide/e xpression#one-time-binding For previous versions: https://github.com/Pasvaz/bindonce <p id="one-time-binding-example"> One time binding: {{::name}} </p>
- 10. Controller Inheritance app.controller("ChildCtrl", ["$scope", function ($scope) { $scope.childText = "childText" $scope.text = "childTextโ }]); app.controller("ParentCtrl", ["$scope", function ($scope) { $scope.parentText = "parentText" $scope.text = "parentTextโ }]); <div ng-controller="ParentCtrlโ> <div ng-controller="ChildCtrlโ> {{parentText}} <br/> {{childText}} <br/> {{text}} </div> </div>
- 11. Controller Inheritance app.controller("ChildCtrl", function ($scope, $controller) { $controller("ParentCtrl", {$scope: $scope}); $scope.childText = "childText"; $scope.text = "childText"; }); app.controller("ParentCtrl", ["$scope", function ($scope) { $scope.parentText = "parentText" $scope.text = "parentTextโ }]); <div ng-controller="ChildCtrlโ> {{parentText}} <br/> {{childText}} <br/> {{text}} </div>
- 12. Avoid Watchers $watch occurs when the users clicks on an item, not when the model changes Consider using events instead Minimize use watchers Angular uses dirty checking to keep track of all the changes in app
- 13. $watch() vs. $watchCollection() $watch has 3 parameters Use $watchCollection, it only checks the first layer of objectโs properties http://www.bennadel.com/blog/2566-scope- watch-vs-watchcollection-in-angularjs.htm http://plnkr.co/edit/Pbvo6AqME081rZ2RVKDU? p=preview
- 14. ng-repeat, track when possible ngRepeat does not allow duplicate items in arrays Track by to increase performance Default tracking <div ng-repeat=โitem in collection track by $id(obj)โ> Own tracking <div ng-repeat=โitem in collection track by item.idโ> https://docs.angularjs.org/api/ng/directive/ngR epeat#tracking-and-duplicates
- 15. ng-repeat How many times will getPrice function be called? Use watch collection to calculate everything when the controller is first invoked <tr ng-repeat="item in items"> <td>{{item.name}}</td> <td>{{item.description}}</td> <td>{{getPrice(item.id)}}</td> </tr>
- 16. ng-repeat cont <tr ng-repeat="item in items"> <td>{{item.name}}</td> <td>{{item.description}}</td> <td>{{item.price}}</td> </tr> $scope.$watchCollection('items', function (newItems) { for (var i = 0; i < newItems.length; i++) { newItems[i].price = getPrice(newItems.id); } $scope.items = newItems; });
- 17. Avoid ng-repeat for infinite scroll Memory Leaks Performance problem Possible solution: http://www.williambrownstreet.net/blog/2013/0 7/angularjs-my-solution-to-the-ng-repeat- performance-problem
- 18. Debounce ng-model Lot of updates? https://docs.angularjs.org/api/ng/directive/ng ModelOptions <input ng-model="nameโ ng-model-options="{ debounce: 500 }โ />
- 19. Use ng-if instead of ng-show ng-show will render an element, and use display:none to hide it ng-if will actually removes the element from DOM, and will re-create it, if itโs needed.
- 20. Promise you use Promises Prefer Promises Over Callbacks Follow The โ...ingโ Convention Clear Indication Youโre getting a Promise function gettingUsers(){ return $http()... } gettingUsers() .success() .error()
- 21. Destroying Memory Leaks Use $scope.$on('$destroy', โฆ) Remove handlers Clean up resources which wonโt be garbage collected automatically module.controller("TestController", function ($scope, $timeout) { var onTimeout = function () { $scope.value += 1; timer = $timeout(onTimeout, 1000); }; var timer = $timeout(onTimeout, 1000); $scope.value = 0; $scope.$on("$destroy", function () { if (timer) { $timeout.cancel(timer); } }); });
- 22. Managing the Timeโฆuse moment.js https://github.com/urish/angular-moment <span am-time-ago="message.time"> </span>
- 23. Use Batarang
- 24. Debugging Pause On Caught Exceptions
- 26. Logging Avoid using console.log in your controllers Use $log instead $log can be extended to provide additional logging capabilities
- 27. Forget jQuery Exists jQuery -- Use angular.element instead of $() selector -- Search for a jQuery-equivalent instead ยป Examples -- html(), text(), val() ยป Ask whether you can use directives instead Take a look at ui-bootstrapโs directives at https://github.com/angular- ui/bootstrap/tree/master/src
- 28. Testing Faster Bug Tracking Jasmine Given http://www.airpair.com/angularjs/workshops/u nit-testing-angularjs describe("assigning stuff to this", function() { Given(function() { this.number = 24; }); Given(function() { this.number++; }); When(function() { this.number *= 2; }); Then(function() { expect(this.number).toBe(50) }); });
- 30. Questions
Editor's Notes
- #7: Faster Unit Testing Gives Context Easier To Remove Parts Of The App
- #8: "How do I pass things between controllers?" --- ...probably means that you are doing things wrong Theย ngCloakย directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading
- #10: Angular 1.3 addedย :: Angular will wait for a value to stabilize after itโs first series of digest cycles, and will use that value to render the DOM element. After that, Angular will remove the watcher forgetting about that binding
- #13: Minimize use watchers Angular uses dirty checking to keep track of all the changes in app through every watcher to check if they need to be updated If one of the watcher is relied upon by another watcher, Angular would have to re-run the digest cycle again
- #14: Third parameters is deep eval $watchCollection acts almost like $watch with a 3rd parameter except it only checks the first layer of objectโs properties
- #15: ngRepeatย does not allow duplicate items in arrays. This is because when there are duplicates, it is not possible to maintain a one-to-one mapping between collection items and DOM elements. ngRepeatย will not have to rebuild the DOM elements for items it has already rendered
- #18: Because ng-repeat uses watchers ng-repeat creates bad performance and AngularJS is getting slower with more than 2000-2500 two-way bindings to watch
- #28: DOM traversal is also problematic Separation of Concerns Overkiller
- #29: Using TDD for Better Engineering