Angular js introduction

1,841 views
1,726 views

Published on

AngularJS Indroduction

Published in: Technology

Angular js introduction

  1. 1. Hsiu-Yuan Shan
  2. 2. Looking Back • Code scattering and tangling(Unobtrusive) • Dependency management(AMD, module) • Scope(closure) • The Pyramid of Doom(promise) • Testing(Jasmine)
  3. 3. Feature • MVC/MVVM framework • Module • Scope • Templates and Data Bindings • Directives • Dependency Injection • Testable
  4. 4. http://plnkr.co/edit/0xdJwbiGr8EYqav0DFQr Declare Controller with function Model Directive and Bootstrap Template and Binding
  5. 5. 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
  6. 6. Module • <html ng-app='moduleName'> • angular.module('moduleName', [dependencie s]) • Module API – config/constant/controller/directive/factory/filter/ provider/run/service/value
  7. 7. 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
  8. 8. Directives • ng-init • ng-bind • ng-model • ng-show/ng-hide • ng-repeat • ng-switch
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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']
  13. 13. Promise
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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/

×