angularjs - the folly of choice
DESCRIPTION
An intro to AngularJS and some experiences of using it to build https://starthq.comTRANSCRIPT
![Page 1: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/1.jpg)
![Page 2: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/2.jpg)
communityjs.org
![Page 3: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/3.jpg)
StartHQ
![Page 4: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/4.jpg)
Toolkits vs. Frameworks
![Page 5: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/5.jpg)
![Page 6: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/6.jpg)
![Page 7: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/7.jpg)
Toolkits vs. Frameworks
● Toolkit: collection of libraries
some assembly required
● Libraries should “do one thing and do it well”
● Inversion of control
You call a library, but a framework calls you
![Page 8: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/8.jpg)
A Bit of History
![Page 9: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/9.jpg)
![Page 10: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/10.jpg)
![Page 11: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/11.jpg)
![Page 12: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/12.jpg)
AngularJS
![Page 13: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/13.jpg)
![Page 14: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/14.jpg)
AngularJS
● What HTML would have been, had it been designed for building web apps
● 80% of code deals with manipulating the DOM
AngularJS makes this go away
● Definitely a standalone framework
modules, templating, dependency injection, events, services, promises, testing, directives, http, interceptors, history
![Page 15: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/15.jpg)
Key Features
![Page 16: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/16.jpg)
![Page 17: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/17.jpg)
Key Features
● Declarative – not imperative
Two way data binding
● Doesn't abstract away the DOM
Augments it with directives
● More than one way to do the same thing
![Page 18: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/18.jpg)
Scopes
![Page 19: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/19.jpg)
![Page 20: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/20.jpg)
Scopes
• creating a scope & controller$rootScope
• prototypal inheritance
• scope attributes & methods
• importance of the dot
![Page 21: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/21.jpg)
Templates
![Page 22: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/22.jpg)
![Page 23: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/23.jpg)
Templates
• Interpolationng-directive alternative
• ng-show, ng-hideng-cloak
• ng-repeat<li ng-repeat=”item in items”>{{item.name}}</li>
• logic can be templates
![Page 24: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/24.jpg)
Modules
![Page 25: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/25.jpg)
![Page 26: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/26.jpg)
Modules
var app = angular.module('app', [/* deps */]) .config([..., function() {}]) .run([..., function() {}]);
• convenience methodscontroller, directive, filter, value, factory, provider
ngmodules.org
![Page 27: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/27.jpg)
Dependency Injection
![Page 28: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/28.jpg)
![Page 29: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/29.jpg)
Dependency Injection
• inversion of control, removal of global state– Important for testing
• function TodoCtrl($scope) {}
• app.controller('TodoCtrl', ['$scope', function() {}]);
![Page 30: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/30.jpg)
Views
![Page 31: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/31.jpg)
![Page 32: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/32.jpg)
Views
• ng-view
• ng-include src="'/navbar.html'"
![Page 33: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/33.jpg)
Routing
![Page 34: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/34.jpg)
![Page 35: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/35.jpg)
Routing
$locationProvider.html5Mode(true);$routeProvider.when('/config', { templateUrl:'/views/config.html', controller:'Config'});
$routeProvider.otherwise({ redirectTo:'/' });
![Page 36: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/36.jpg)
Directives
![Page 37: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/37.jpg)
![Page 38: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/38.jpg)
Directives
app.directive('ngLoad', function() { return function($scope, element) { });
• wrapping jQuery plugins$scope.watch, $scope.apply
• web components
![Page 39: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/39.jpg)
Other Tools
![Page 40: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/40.jpg)
![Page 41: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/41.jpg)
Other Tools
• Services$http, $location
• Events
• Filters
• Promises
$q
![Page 42: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/42.jpg)
Testing
![Page 43: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/43.jpg)
![Page 44: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/44.jpg)
Testing
• Unit tests
• End to end tests
• angular-seed project
• Karma test runner
![Page 45: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/45.jpg)
Study Material
![Page 46: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/46.jpg)
![Page 47: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/47.jpg)
Study Material
docs.angular.org/tutorial
www.egghead.io
www.youtube.com/user/angularjs
github.com/olegp/nexus
![Page 48: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/48.jpg)
![Page 49: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/49.jpg)
Conclusion
![Page 50: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/50.jpg)
![Page 51: AngularJS - the folly of choice](https://reader035.vdocuments.us/reader035/viewer/2022062703/5555cc33d8b42a711f8b4821/html5/thumbnails/51.jpg)
Thank you!
@olegpodsechin
github.com/olegp
starthq.com