Top 10 Mistakes AngularJS Developers Make
-
Upload
mark-meyer -
Category
Software
-
view
1.582 -
download
0
description
Transcript of Top 10 Mistakes AngularJS Developers Make
![Page 1: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/1.jpg)
Top 10 Mistakes AngularJS
Developers MakeMark Meyer
@nuclearghost
![Page 2: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/2.jpg)
About MeSoftware Engineer at
Sharethrough
Developing on AngularJS since
1.1.5 (triangle-squarification)
Built ~40k line AngularJS app
and many much smaller
AngularJS apps
![Page 3: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/3.jpg)
What’s the
point?AngularJS === Awesome
Easy to Start
Learning Curve Eventually
Ramps up
My Experiences from
building a large application
![Page 4: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/4.jpg)
The Mistakes
1. MVC Directory Structure
2. Modules
3.
4.
5.
6. Batarang
7. Too Many Watchers
8. Scoping $scope’s
9. Manual Testing
10. Using jQueryServices v Factory
Dependency Injection
Controllers Bloat
![Page 5: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/5.jpg)
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);
});
![Page 6: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/6.jpg)
Array Style
+ Safe for minification
- Extra in-line code
app.controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout){
$timeout(function(){
console.log($scope);
}, 1000);
}]);
![Page 7: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/7.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);
![Page 8: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/8.jpg)
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
![Page 9: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/9.jpg)
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
![Page 10: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/10.jpg)
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
![Page 11: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/11.jpg)
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
![Page 12: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/12.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;
}]);
![Page 13: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/13.jpg)
Constant
Values available at config time and run time
Every AngularJS app has config phase, then run phase
myApp.constant('planetName', 'Greasy Giant');
![Page 14: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/14.jpg)
Service
Returns new’d instance of object returned in service
Cannot create primitives
app.service('helloWorldService', function(){
this.hello = function() {
return "Hello World";
};
});
Note: Yes, we have called one of our service recipes 'Service'. We regret this and know that we'll be somehow punished for our misdeed. It's like we named one of our offspring 'Child'. Boy, that would mess with the teachers.
![Page 15: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/15.jpg)
FactoryCan 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;
}]);
![Page 16: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/16.jpg)
Provider
Closest to the metal
Must implement $get method
Available during config phase
![Page 17: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/17.jpg)
Provider ExamplemyApp.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);
}]);
![Page 18: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/18.jpg)
Provider Family Conclusion
![Page 19: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/19.jpg)
The Mistakes
1. MVC Directory Structure
2. Modules
3.
4.
5.
6. Batarang
7. Too Many Watchers
8. Scoping $scope’s
9. Manual Testing
10. Using jQueryServices v Factory
Dependency Injection
Controllers Bloat
![Page 20: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/20.jpg)
11. Memory Leaks
Controllers and Directives should subscribe to: $scope.$on('$destroy', …)
Remove handlers
Clean up resources which won’t be garbage collected automatically
![Page 21: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/21.jpg)
MVC Directory Structuretemplates/
_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
![Page 22: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/22.jpg)
Modules
Group code into bundles which are independent
Directory structure should follow module design
Configure routes per module
Each module manages its own dependencies
![Page 23: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/23.jpg)
Batarang
Still under active-isn development
Check out ng-inspector: http://ng-inspector.org/
![Page 24: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/24.jpg)
Watchers
If something doesn’t change, don’t watch it
Bindonce directive is your friend
https://github.com/Pasvaz/bindonce
![Page 25: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/25.jpg)
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
![Page 26: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/26.jpg)
Testing
Come back tomorrow
http://www.airpair.com/angularjs/
workshops/unit-testing-angularjs
![Page 27: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/27.jpg)
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
![Page 28: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/28.jpg)
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
![Page 29: Top 10 Mistakes AngularJS Developers Make](https://reader033.fdocuments.in/reader033/viewer/2022052623/559eb9551a28ab2a4d8b4823/html5/thumbnails/29.jpg)
Wrap Up
Reach me on twitter: @nuclearghost
Want individualized help?: http://airpair.me/NuclearGhost
Thanks for your time!