Hsiu-Yuan Shan's AngularJS Anatomy
•Download as PPTX, PDF•
14 likes•2,164 views
This document provides an overview of key AngularJS concepts including MVC framework features, data binding, modules, scopes, directives, filters, forms, dependency injection, services, routing, and best practices. It explains core components like controllers, models, views, and how they interact. It also provides examples and resources for learning more about AngularJS.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (18)
Similar to Hsiu-Yuan Shan's AngularJS Anatomy
Similar to Hsiu-Yuan Shan's AngularJS Anatomy (20)
Recently uploaded
Recently uploaded (20)
Hsiu-Yuan Shan's AngularJS Anatomy
- 2. Looking Back • Code scattering and tangling(Unobtrusive) • Dependency management(AMD, module) • Scope(closure) • The Pyramid of Doom(promise) • Testing(Jasmine)
- 3. Feature • MVC/MVVM framework • Module • Scope • Templates and Data Bindings • Directives • Dependency Injection • Testable
- 4. http://plnkr.co/edit/0xdJwbiGr8EYqav0DFQr Declare Controller with function Model Directive and Bootstrap Template and Binding
- 6. Anatomy • Bootstrap – By using ng-app – Support manually by angular.bootstrap(element[, modules]); • MVC – View : DOM and template – Controller : Javascript Function – Model : Object Properties • Data Binding – Updating view({{interpolation}}) whenever model($scope[properties]) changes and vice versa
- 7. Module • <html ng-app='moduleName'> • angular.module('moduleName', [dependencie s]) • Module API – config/constant/controller/directive/factory/filter/ provider/run/service/value
- 8. Scope • Each Angular application has exactly one root scope, but may have several child scopes. • One created with each controller • Inherited from $rootScope • $watch – observe model mutations • $apply – propagate any model changes through the system into the view from outside of the Angular http://plnkr.co/edit/D8RaIlT9wWDK55HWZSNp
- 9. Directives • ng-init • ng-bind • ng-model • ng-show/ng-hide • ng-repeat • ng-switch
- 10. Custom Directives • Consider creating a custom DSL • Translating the camel case name into snake case with these special characters :, -, or _ • Options for directive declaration usage – element – attribute – class – comment http://plnkr.co/edit/GQkYJMzYyKHJ8Ufmb1nr http://plnkr.co/edit/MfTAdjUITyR0IniJf51n
- 11. Filters • Format data for display to the user • {{ expression [|filter_name[:parameter_value] ... ] }} • Build-in filter currency/date/filter/json/limitTo/lowercase/number /orderBy/uppercase • Support custom filter http://plnkr.co/edit/a23sJj4OQpD1BNcuGfJB
- 12. Form • Directive that instantiates FormController • Types – text/checkbox/file/password/email/url/numer/range/date • Status – $pristine/$dirty/$valid/$invalid/$error • Validation – novalidate/required/pattern/minlength/maxlength/min/m ax/change • Class – ng-invalid/ng-valid/ng-pristine/ng-dirty http://plnkr.co/edit/dE91ImbqV401OfSMoAFx
- 13. Dependency Injection 1. moduleName.controller('Controller',['$scope', 'service1', 'service2'],function(($scope,service1,service2){…….}); 2. moduleName.controller('Controller', function(($scope,service1,service2){…….}); 3. function($scope,service1,service2){…….} • Only first is acceptable if you want to minifying your javascript and it also recommended by official web site • Third can be acceptable by adding $Controller.$inject = ['$scope', 'service1', 'service2']
- 14. Promise
- 15. Service • service – get service from instantiation of your function module.service( 'serviceName', yourFunction); • factory – get factory from the value that is returned by invoking your function module.factory( 'factoryName', yourFunction); • provider – get provider from instantiation of your function and invoke $get() module. provider( ' providerName', yourFunction); http://plnkr.co/edit/fwxmaFBMofiyGd0du1K4
- 16. Service Communication • $http – low-level implementation of XHR – support method GET/HEAD/POST/DELETE/PUT/JSONP • $resource – include the angular-resource.js – angular.module('myModule', ['ngResource'])) – use inject $resource where needed
- 17. Service Communication • $resource – Default nethod – Support Custom Method http://plnkr.co/edit/XVeWmx512HIuYfRYjYdu Name Method Is Array get GET save POST query GET true remove DELETE delete DELETE
- 18. Routing • Used for deep-linking URLs to controllers and views • Using $routerProvider to point to the correct view when coupled with the ngView directive at config phase • $routeParams – Current set of route parameters – /Chapter/:chapterId/Section/:sectionId ==> {chapterId:1, sectionId:2} • $locationProvider – HashBang Mode – HTML5 Model http://plnkr.co/edit/RltdXkVrEXRogJVOYbTO
- 19. Best Practices • Script tag on the bottom of page • Use ng-cloak or ng-bind instead of {{interpolation}} avoid user see{{}} • Structuring Business Logic – Controllers • should not reference DOM • should have view behavior – Services • should not reference DOM • singleton • have logic independent of View • Scope – threat as read-only in templates and write-only in controllers – should be the reference of the model http://www.youtube.com/watch?v=ZhfUv0spHCY&list=TL126yqdm_Yyk
- 20. Resource • http://angularjs.org/ • http://www.youtube.com/user/angularjs • https://github.com/jmcunningham/AngularJS- Learning • https://github.com/angular/angular.js/wiki/JsFidd le-Examples • https://gitcafe.com/Angularjs/Angularjs- Developer-Guide/tree/master • http://zouyesheng.com/angular.html • https://www.facebook.com/groups/augularjs.tw/