Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular js introduction

2,018 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/

×