AngularJS - TechTalk 3/2/2014
6 likes8,958 views
AngularJS seems initially complex with many new concepts and terms. It is designed for single page applications and has a learning curve. AngularJS uses modules, dependency injection, MVC principles, scopes, directives, filters and services/factories/providers to build applications. Testing and reusable components are important. While challenging, AngularJS is a powerful tool for building dynamic web applications.
![Modules
❖
app = angular.module(‘myApp’, [])
❖
❖
It is required when creating a new module
(module declaration)
❖
❖
Use of an array to include other modules
app = angular.module(‘myApp’) retrieves
an existing module (module reference)
Modules cannot be included at runtime
!8](https://image.slidesharecdn.com/techtack3febrary2014-angularjs-140209062937-phpapp02/85/AngularJS-TechTalk-3-2-2014-8-320.jpg)
![View
❖
ng-repeat
❖
this would not work
<div ng-repeat=“number in [1, 2, 3]”>
<input type=“text” ng-model=“number” />
</div>
but this would work
<div ng-repeat=“number in [{n: 1}, {n: 2}, {n: 3}]”>
<input type=“text” ng-model="number.n"/>
</div>
❖
$index, $first, $middle, $last, $event, $parent
❖
ng-click, ng-show, ng-model, ng-change, ng-href …
!21](https://image.slidesharecdn.com/techtack3febrary2014-angularjs-140209062937-phpapp02/85/AngularJS-TechTalk-3-2-2014-21-320.jpg)
![Directives
app.directive(‘event-info', function() {
return {
restrict: ‘E’,
replace: true,
templateUrl: ‘views/eventInfo.html’
transclude: true,
scope: {
startDate: ‘=’,
endDate: ‘=’
},
link: function(scope, element) {
infoButton = element.children()[0].children[0].children[0]
scope.open = false;
angular.element(infoButton).bind(‘click’, function() {
scope.$apply(‘open = !open’);
});
};
};
});
!32](https://image.slidesharecdn.com/techtack3febrary2014-angularjs-140209062937-phpapp02/85/AngularJS-TechTalk-3-2-2014-32-320.jpg)
AngularJS - TechTalk 3/2/2014
- 1. TechTalk | 3 February 2014 Spyros Ioakeimidis
- 2. AngularJS ❖ Seemed a bit weird in the beginning ❖ All these new terms and concepts… !2
- 4. AngularJS ❖ Made for SPA (Single Page Applications) ❖ It has a learning curve! ❖ Maintained by Google (for some this is good, for others not) ❖ Community keeps increasing !4
- 5. AngularJS ❖ MVC principle ❖ Others say it is an SPA framework ❖ Others that it is just a library to help you built a framework ❖ AngularJS is a toolset (extensibility) !5
- 6. !6
- 7. Modules !7
- 8. Modules ❖ app = angular.module(‘myApp’, []) ❖ ❖ It is required when creating a new module (module declaration) ❖ ❖ Use of an array to include other modules app = angular.module(‘myApp’) retrieves an existing module (module reference) Modules cannot be included at runtime !8
- 9. Modules ❖ We have a module app ❖ .value() ❖ ❖ global values, good for defaults .constant() ❖ same as Value, but the it is expected to not change ❖ .service() ❖ .factory() ❖ .provider() !9
- 11. W(M)VC ❖ Whatever (Model) ❖ ❖ ❖ It is the $scope, which contains models and functions as well e.g. $scope.event = {‘title’: ‘Placed Event’} View ❖ ❖ HTML markup Controller ❖ An JS object ❖ app.controller(‘MyController’, function{}) ❖ DOM manipulation does not belong to controllers !11
- 12. Whatever (Data) stored in $scope of contains View (HTML) communicates with Controller (Business Logic) provides functionality Hiller, Christopher. “Developing an AngularJS Edge.” !12 Directive (DSL in HTML) provides functionality Service (Library)
- 13. Scope.models !13
- 14. Scope ❖ prototypical inheritance ❖ treat scope as read-only in templates ❖ when binding to templates ng-model=“user.name”, always use a dot ❖ $rootScope ❖ $scope.$apply() ❖ $eval() -> $exceptionHandler(e) -> $digest() ❖ e.g. when observing DOM elements directly in directives !14
- 15. Scope ❖ $scope.$watch(‘foo’, function() {}) ❖ observe a model for changes, evaluates by reference ❖ will fire when $scope.foo = ‘’ and then $scope.foo = ‘bar’ ❖ but not when $scope.foo.bar = ‘’ and then $scope.foo.bar = ‘baz’ ❖ can evaluate by value (expensive operation!) ❖ when writing own $watch, it must be fast and it must be idempotent !15
- 17. $emit(‘eventB’, …) $emit(‘eventC’, …) Controller A $emit(‘eventB’, …) $on(‘eventA’, …) $rootScope.$on(‘eventC’, …) $on(‘eventB’, …) $on(‘eventC’, …) $broadcast(‘eventA’, …) Controller B Controller C $broadcast(‘eventA’, …) !17 $emit(‘eventC’, …) $on(‘eventA’, …)
- 18. Model ❖ Scope is not the model! ❖ $scope.foo, where the foo is the model ❖ data-binding, <p>{{foo.bar}}</p> ❖ a portion of view is bind to a model ❖ when either one changes, they are both synchronized !18
- 19. View !19
- 20. View ❖ presentation logic ❖ does not know anything about the controller, nor the controller about it ❖ everything goes through the Scope ❖ integrates with models, directives, filters !20
- 21. View ❖ ng-repeat ❖ this would not work <div ng-repeat=“number in [1, 2, 3]”> <input type=“text” ng-model=“number” /> </div> but this would work <div ng-repeat=“number in [{n: 1}, {n: 2}, {n: 3}]”> <input type=“text” ng-model="number.n"/> </div> ❖ $index, $first, $middle, $last, $event, $parent ❖ ng-click, ng-show, ng-model, ng-change, ng-href … !21
- 22. View ❖ orderBy, filter ❖ <div id=“{{post.id}}” ng-repeat=“post in posts| orderBy:order:descending| filter:filter”> </div> ❖ in Controller $scope.order = ‘date’ $scope.descending = true ❖ and filter would come from an text box ❖ ngClassEvent, ngClassOdd !22
- 23. View ❖ compilation for templates and markup is done in two steps Step 1: compile Step 2: link var linker = $compile(template) var compiled = linker(scope) 1) template examined for directives 1) scope into the link function of its directive 2) AngularJS collects them and 2) get back AngularJS element representing produces a link function the DOM fragment * no data has been inserted in the template $compile(template)(scope) !23
- 24. Controller !24
- 25. Controller ❖ they are for the business logic ❖ they are not meant to interact with the DOM ❖ services can be injected to share common functionality with other controllers !25
- 26. Dependency Injection ❖ A nice way to create modular applications ❖ it is magic (but not really…) ❖ Angular converts functions to strings .toString() ❖ runs string matching against them ❖ determines from the name of the parameter what you want to inject !26
- 27. Directives !27
- 28. Directives ❖ Create your own DSL ❖ A nice way to include logic in the views ❖ this is where DOM manipulation should happen! ❖ Can have an isolated scope ❖ Defines a linking function ❖ ❖ ❖ is passed a Scope object, an element, and the element’s attributes (optionally a controller inst.) where the logic goes Need a scope, use link. Don’t? Use compile. !28
- 29. Directives HTML with HTML with HTML with directives directives directives examines <my-directive> finds compile() returns Scope object link (scope) Hiller, Christopher. “Developing an AngularJS Edge.” !29 returns Compiled template with data
- 30. Directives app.directive(‘new-event’, function() { return { restrict: ‘E’, scope: { event: ‘=’, linked to the parent scope save: ‘=’, cancel: ‘=’, saveText: ‘@’, copied verbatim cancelText: ‘@’ }, replace: true, template: ‘<div ng-show="event">' + ‘<input type=“text” ng-model=“event.temp.title”/><br/>’ + ‘<input type=“text” ng-model=“event.temp.subtitle”></../>’ + ‘<button ng-click=“cancel(event)”>{{cancelText}}</button>’ + ‘<button ng-click=“save(event)”>{{saveText}}</button></div>’ }; }); } } !30
- 31. Directives <new-event event=“event” cancel=“cancel” save=“save” cancel-text=“Cancel” save-text=“Save”> </new-event> !31 linked to the parent scope copied verbatim
- 32. Directives app.directive(‘event-info', function() { return { restrict: ‘E’, replace: true, templateUrl: ‘views/eventInfo.html’ transclude: true, scope: { startDate: ‘=’, endDate: ‘=’ }, link: function(scope, element) { infoButton = element.children()[0].children[0].children[0] scope.open = false; angular.element(infoButton).bind(‘click’, function() { scope.$apply(‘open = !open’); }); }; }; }); !32
- 33. Directives <div class="event-info"> <div class="event-info-content"> <div class="event-title" ng-transclude> <span class=“addtional-info-button”>More...</span> </div> <div class="additional-info>" ng-show="open"> <div class=“event-start">{{startDate}}</div> <div class="event-end">{{endDate}}</div> </div> </div> </div> We could call it like: <event-info start-date=“event.event_start" end-date="event.event_end"> {{event.title.en}} </event-info> !33
- 34. Directives ❖ ‘=foo’ links directly to parent scope ❖ ‘@foo’ assigns an attribute to whatever the key is ❖ ‘&foo’ binds expression and executes it against the parent scope ❖ ❖ <my-directive on-close=“hide()”></my-directive> ❖ ❖ in directive definition: scope: {‘close’: ‘&onClose’} in directive’s template: ng-click=“close()” There are also ‘A’, ‘AE’, ‘C’, and ‘M’ restrict options !34
- 35. Directives ❖ write reusable and generic directives ❖ the less reusable (involving scopes) the less maintainable they become ❖ write directives with isolated scopes! ❖ share functionality between directives using a controller ❖ long learning curve, but powerful! !35
- 36. Service | Factory | Provider !36
- 37. Service | Factory | Provider ❖ the backbone of the an AngularJS app ❖ keep the controller from thinking too hard ❖ … and directives have only one function, make it readable and testable (inject services) !37
- 38. Service | Factory | Provider Needs a $get Explicitly returns Present during Component Instantiated method something $config() Service Yes No No No Factory No No Yes No Provider Yes Yes No Yes Hiller, Christopher. “Developing an AngularJS Edge.” !38
- 39. Service ❖ it is a singleton, instantiated the first time is requested ❖ requires less memory and processing power than the others !39
- 40. Promises EventsCtrl (Controller) 1) Calls getEvents() Promise 3) Returns a Promise Events (Service) !40 Server 2) Asks Server for a list of Events
- 41. Promises 4) Returns a list of events Server Events (Service) 5) Promise resolved with events data EventsCtrl (Controller) Promise 6) Takes action with data received from resolved promise !41
- 42. Factory ❖ it can return a function, object, or primitive ❖ useful for utils !42
- 43. Provider ❖ can be configured during initialization ❖ $http is also a provider injects config() $httpProvider injects run() $http !43
- 44. Provider Configure with Plugin B in Module.config() Plugin A DialogProvider Plugin B Dialog Uses plugin B at runtime Hiller, Christopher. “Developing an AngularJS Edge.” !44
- 45. Filters !45
- 46. Filters ❖ execute logic against models only the view cares about ❖ app.filter(‘product’, function() { return function(a, b, c) { return a * b * c; }; }); ❖ can be used like: <span>the product is {{a|product:b:c}}</span> ❖ executed often, so keep them simple ❖ they should not have side-effects !46
- 48. Testing (intro) ❖ Jasmine (behavior-driven testing) ❖ aware of asynchronous events ❖ take advantage of binding information ❖ excellent mock objects ($log) !48
- 49. ng-modules ❖ http://ngmodules.org/, currently 440 modules (++) ❖ angular-ui, bootstrap, ui-router ❖ restangular ❖ angular-translate ❖ angular-cache ❖ … !49
- 50. built.with.angularjs ❖ http://builtwith.angularjs.org/ ❖ http://www.google.com/doubleclick/ Create, transact, and manage digital advertising ❖ http://demo.songpane.com/ Form song set lists (songs, lyrics, chords) ❖ http://www.zaptravel.com/ Deals for experiences of interest ❖ http://hat.jit.su/ Distributed scrum planning poker ❖ … !50
- 51. References ❖ Hiller, Christopher. “Developing an AngularJS Edge.” ❖ Mastering Web Application Development with AngularJS ❖ Ari Lerner “ng-book - The Complete Book on AngularJS” !51
- 53. AAAAngularosum!