Top 10 Mistakes AngularJS Developers Make
Download as PPTX, PDF8 likes3,445 views
This document outlines 10 common mistakes that AngularJS developers make, including: not using dependency injection properly, allowing controllers to become bloated, not properly scoping $scopes, and not handling memory leaks. It also provides best practices for directory structure, using modules, testing, and recommendations for further reading on Angular style guides and the changes coming in Angular 2.0.
![Dependency Injection
Great Design Pattern for Testing and Parallelizing Development
Not the prettiest in AngularJS
var app = angular.module('app',[]);
app.controller('MainCtrl', function($scope, $timeout){
$timeout(function(){
console.log($scope);
}, 1000);
});](https://image.slidesharecdn.com/airpairworkshop1114-141111003644-conversion-gate01/85/Top-10-Mistakes-AngularJS-Developers-Make-5-320.jpg)
![Array Style
+ Safe for minification
- Extra in-line code
app.controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout){
$timeout(function(){
console.log($scope);
}, 1000);
}]);](https://image.slidesharecdn.com/airpairworkshop1114-141111003644-conversion-gate01/85/Top-10-Mistakes-AngularJS-Developers-Make-6-320.jpg)
![$inject
Property attached to controller functions
Not as convenient for in-lining
Potentially cleaner without duplicate names at declaration
var MainCtrl = function($scope, $timeout){
$timeout(function(){
console.log($scope);
}, 1000);
};
MainCtrl.$inject = ['$scope', ‘$timeout']; //or MainCtrl[‘$inject’]
app.controller('MainCtrl', MainCtrl);](https://image.slidesharecdn.com/airpairworkshop1114-141111003644-conversion-gate01/85/Top-10-Mistakes-AngularJS-Developers-Make-7-320.jpg)
![Value
Often used for storing primitives, e.g. key string values
var myApp = angular.module('myApp', []);
myApp.value('clientId', 'a12345654321x');
myApp.controller('DemoController', ['clientId', function DemoController(clientId) {
this.clientId = clientId;
}]);](https://image.slidesharecdn.com/airpairworkshop1114-141111003644-conversion-gate01/85/Top-10-Mistakes-AngularJS-Developers-Make-12-320.jpg)
![Factory
Can have dependencies
Can return primitives or functions
myApp.factory('apiToken', ['clientId', function apiTokenFactory(clientId) {
var encrypt = function(data1, data2) {
// NSA-proof encryption algorithm:
return (data1 + ':' + data2).toUpperCase();
};
var secret = window.localStorage.getItem('myApp.secret');
var apiToken = encrypt(clientId, secret);
return apiToken;
}]);](https://image.slidesharecdn.com/airpairworkshop1114-141111003644-conversion-gate01/85/Top-10-Mistakes-AngularJS-Developers-Make-15-320.jpg)
![Provider Example
myApp.provider('unicornLauncher', function UnicornLauncherProvider() {
var useTinfoilShielding = false;
this.useTinfoilShielding = function(value) {
useTinfoilShielding = !!value;
};
this.$get = ["apiToken", function unicornLauncherFactory(apiToken) {
return new UnicornLauncher(apiToken, useTinfoilShielding);
}];
});
myApp.config(["unicornLauncherProvider", function(unicornLauncherProvider) {
unicornLauncherProvider.useTinfoilShielding(true);
}]);](https://image.slidesharecdn.com/airpairworkshop1114-141111003644-conversion-gate01/85/Top-10-Mistakes-AngularJS-Developers-Make-17-320.jpg)
Top 10 Mistakes AngularJS Developers Make
- 1. Top 10 Mistakes AngularJS Developers Make Mark Meyer @nuclearghost
- 2. About Me Software Engineer at Sharethrough Developing on AngularJS since 1.1.5 (triangle-squarification) Built ~40k line AngularJS app and many much smaller AngularJS apps
- 3. What’s the point? AngularJS === Awesome Easy to Start Learning Curve Eventually Ramps up My Experiences from building a large application
- 4. The Mistakes 1. MVC Directory Structure 2. Modules 3. 4. 5. 6. Batarang 7. Too Many Watchers 8. Scoping $scope’s 9. Manual Testing Dependency Injection Controllers Bloat Services v Factory 10. Using jQuery
- 5. Dependency Injection Great Design Pattern for Testing and Parallelizing Development Not the prettiest in AngularJS var app = angular.module('app',[]); app.controller('MainCtrl', function($scope, $timeout){ $timeout(function(){ console.log($scope); }, 1000); });
- 6. Array Style + Safe for minification - Extra in-line code app.controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout){ $timeout(function(){ console.log($scope); }, 1000); }]);
- 7. $inject Property attached to controller functions Not as convenient for in-lining Potentially cleaner without duplicate names at declaration var MainCtrl = function($scope, $timeout){ $timeout(function(){ console.log($scope); }, 1000); }; MainCtrl.$inject = ['$scope', ‘$timeout']; //or MainCtrl[‘$inject’] app.controller('MainCtrl', MainCtrl);
- 8. ng-annotate Automatically add array style notations Integrate into build process before minification Can be easily integrated with Grunt, Gulp, Browserify, Rails Assets Pipeline, and more https://github.com/olov/ng-annotate
- 9. Controller Bloat Limit Controllers to bartering between view and data model Data model should live in provider (service, factory, etc.) Controllers should have view-model for data binding
- 10. Controller Bloat Example deadbolt by Ed Carter Chrome extension for hashing passphrase to secure password Very clean, readable code Controllers get a little lengthy handling all the user events https://github.com/bittenbytailfly/deadbolt-password- generator-chrome-extension/ blob/master/extension/js/control lers.js
- 11. Service v Factory Provider, Factory, Service, Value, Constant All based on Provider All singletons Definitely over complicated Read the docs: https://docs.angularjs.org/guide/providers
- 12. Value Often used for storing primitives, e.g. key string values var myApp = angular.module('myApp', []); myApp.value('clientId', 'a12345654321x'); myApp.controller('DemoController', ['clientId', function DemoController(clientId) { this.clientId = clientId; }]);
- 13. Constant Values available at config time and run time Every AngularJS app has config phase, then run phase myApp.constant('planetName', 'Greasy Giant');
- 14. Service Returns new’d instance of object returned in service Cannot create primitives app.service('helloWorldService', function(){ this.hello = function() { return "Hello World"; }; }); Service'. We regret this and know that we'll be somehow punished for our misdeed. It's like we named one of our
- 15. Factory Can have dependencies Can return primitives or functions myApp.factory('apiToken', ['clientId', function apiTokenFactory(clientId) { var encrypt = function(data1, data2) { // NSA-proof encryption algorithm: return (data1 + ':' + data2).toUpperCase(); }; var secret = window.localStorage.getItem('myApp.secret'); var apiToken = encrypt(clientId, secret); return apiToken; }]);
- 16. Provider Closest to the metal Must implement $get method Available during config phase
- 17. Provider Example myApp.provider('unicornLauncher', function UnicornLauncherProvider() { var useTinfoilShielding = false; this.useTinfoilShielding = function(value) { useTinfoilShielding = !!value; }; this.$get = ["apiToken", function unicornLauncherFactory(apiToken) { return new UnicornLauncher(apiToken, useTinfoilShielding); }]; }); myApp.config(["unicornLauncherProvider", function(unicornLauncherProvider) { unicornLauncherProvider.useTinfoilShielding(true); }]);
- 19. The Mistakes 1. MVC Directory Structure 2. Modules 3. 4. 5. 6. Batarang 7. Too Many Watchers 8. Scoping $scope’s 9. Manual Testing Dependency Injection Controllers Bloat Services v Factory 10. Using jQuery
- 20. 11. Memory Leaks Controllers and Directives should subscribe to: $scope.$on('$destroy', …) Remove handlers Clean up resources which won’t be garbage collected automatically
- 21. MVC Directory Structure templates/ _login.html _feed.html app/ app.js controllers/ LoginController.js FeedController.js directives/ FeedEntryDirective.js services/ LoginService.js FeedService.js filters/ CapatalizeFilter.js app/ app.js Feed/ _feed.html FeedController.js FeedEntryDirective.js FeedService.js Login/ _login.html LoginController.js LoginService.js Shared/ CapatalizeFilter.js
- 22. Modules Group code into bundles which are independent Directory structure should follow module design Configure routes per module Each module manages its own dependencies
- 23. Batarang Still under active-isn development Check out ng-inspector: http://ng-inspector.org/
- 24. Watchers If something doesn’t change, don’t watch it Bindonce directive is your friend https://github.com/Pasvaz/bindonce
- 25. Scoping $scopes Learn prototypical inheritance in javascript http://www.airpair.com/javascript/workshops/javascript-prototypal-inheritance Don’t stress too much 2.0 is coming
- 26. Testing Come back tomorrow http://www.airpair.com/angularjs/ workshops/unit-testing-angularjs
- 27. Further Reading Angular Best Practices: https://github.com/angular/angular.js/wiki/Best- Practices Officical App Structure Recommendation: https://docs.google.com/document/d/1XXMvReO8- Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub
- 28. Angular 2.0 is coming! Major changes in the pipeline Goodbye Controllers, $scope, angular.module, jqLite Rob Eisenberg goes in depth: http://eisenbergeffect.bluespire.com/all-about- angular-2-0/ Igor Minar and Tobias Bosch overview: https://docs.google.com/presentation/d/1XQP0_NTzCUcFweauLlkZpbbh NVYbYy156oD--KLmXsk/edit#slide=id.g498335282_0112
- 29. Wrap Up Reach me on twitter: @nuclearghost Want individualized help?: http://airpair.me/NuclearGhost Thanks for your time!