ANGULARJS Study Syllabus

l what is ANGULARJS? • JavaScript-based client application framework enables us to develop Web applications more quickly and easily. • was born in 2009 and later acquired by Google and used in many projects. • For CRUD applications or for the development of a SPA single page Web site.

LANGULARJS Resources

http://www.angularjs.org/https://www.github.com/angular/http://www.angularjs.cn/http://www.ngnice.com/ http://woxx.sinaapp.com/ langularjs Downloadhttp://www.bootcdn.cn/angular.js/npm Install angular

What are the characteristics of LANGULARJS? MVC mode • Module system • Instruction System • Dependency Injection • Bidirectional data binding

Langularjs's MVC approach• Data Mount ng-controller double curly brace expression Scope of Langularjs• $scope • $rootScope • Dependency Injection • Service Langularjs's command systemNg-app Ng-controller bidirectional data binding for LangularjsMVVM $timeout ng-click Ng-model A small example of Langularjs• Purchase Amount Calculation • Filter –currency $watch – Monitor data changes – three parameters  modularity of the LangularjsAngular.module problems with compression

tools and methods of LangularjsAngular.bind angular.copy Angular.extend

Angular.isarray

angular.isdate angular.isdefined angular.isundefined angular.isfunction angular.isnumber angular.isobject Angular.isstring angular.iselementangular.versionangular.equals angular.foreach Angular.fromjson/tojson angular.identity/noop angular.lowercase/uppercase Angular.element angular.bootstrap angular.injector l$scope $scope. $watch • $scope. $apply Langular.module Controller Run

Filters for Langularjs

currency number lowercase/uppercase JSON LimitTo date orderby filter l Filter Extension Section• Filters can be combined using filter JS – $scope/$rootScope/$timeout – $filter • Custom Filters –angular.module»controller/run»filter

lng-repeat Directive• Learned commands are: –ng-app–ng-controller–ng-model–ng-click Traversal Collection – iterate through each item/instance – The operation of the table

lng-repeat Directive• Extended section – $index – $first – $middle – $last – $even – $odd –ng-repeat-start–ng-repeat-end  L Event Instructionsng-click/dblclick ng-mousedown/up ng-mouseenter/leave ng-mousemove/over/out ng-keydown/up/press Ng-focus/blur Ng-submit

L Event Instructionsng-selected ng-change ng-copy ng-cut ng-paste

Langularjs's instructions.ng-disabled– service $interval ng-readonly ng-checked ng-value ng-bind ng-cloak ng-bind-template ng-bind-html–http:/ /www.bootcdn.cn/angular.js/ng-non-bindable ng-class ng-style ng-href ng-src ng-attr-(suffix) ·ng-show·ng-hide· Ng-if ng-swtich–on–default–when ng-open ng-init ng-include ng-model–ng-model-options–updateon ng-controller–as <a> <select>–ng-options»for in <textarea> <input> <form>–novalidate form validation for Langularjs• $valid • $invalid • $pristine • $dirty • $error • Pay attention to the –name way to find – write Ng-model

type

–email–number–url Required Ng-minlength ng-maxlength Ng-pattern

class–.ng-valid{}–.ng-invalid{}–.ng-pristine{}–.ng-dirty{} Instances – How forms are validated in combat

custom directives for LangularjsFour ways to define –angular.module»controller»run»filter»directive restrict replace template Templateurl–directive»scope Independent scope true isolation scope {} @ = &

custom directives for Langularjs–directive»controller»link scope Element attr Recontroller –directive»transclude ng-transclude»require ^? Langularjs's Services• $scope – $watch – $apply • $rootScope • $timeout • $interval • $filter

Langularjs's Services• $http –method–url–success–error– Shorthand Method»jsonp»json_callback– Example: Baidu dropdown Search

Langularjs's Services• $location –absurl () –path () –replace () –hash () –search () –url () –host () –port () –protocol ()

Langularjs's Services• $anchorScroll – Example: Anchor Jump – $cacheFactory –info () –put () –get () –remove () – Configuration capacity

Langularjs's Services• $log –log () –info () –warn () –error () – $interpolate – Example: Interpolation calculation LANGULARJS Services • Implementation of the $q –promise –defer () –resolve () –reject () –notify () –then () –  Suppliers of Langularjs• Initial configuration operation of the service config–provider– $interpolate»startsymbol ()»endsymbol () – $log»debugenabled () – $anchorScroll» Disableautoscrolling () Langularjs Custom Service module–filter () –directive () –factory () –provider ()» Differences» $get  Custom Services for Langularjs• Communication between modules –provide Benefits Service () – constructor constant () – Set constant value () – Difference

Langularjs Plug- inngsanitize ngroute– version of issue –ng-view– $routeProvider»when template Templateurl

Langularjs Plug- inngroute– $routeProvider»when controller»otherwise redirectto– $routeParams – Events» $on» $routeChangeStart»$ Routechangesuccess/error

Events in Langularjs• $emit • $broadcast event–targetscope–currentscope–name–stoppropagation () • Internal communication method – $routeChangeStart –$ viewcontentloaded  Langularjs Plug- inNGANIMATE–CSS3 the way –ng-enter–ng-enter-active–ng-leave–ng-leave-active– supports the instructions»if,view,repeat,include,swtich» Repeat Ng-enter-stagger Animation-delay  Langularjs Plug- innganimate–ng-hide-add–ng-hide-add-active–ng-hide-remove–ng-hide-remove-active– Supported instruction»class,show,hide,model etc – JS mode»animation () enter/leave Removeclass/addclass  Langularjs Plug- inngresource– supports RESTful schema mode –get () –query ()» Difference –save () –delete ()

architecture of the Langularjs• Refer to the official example –phonecat– installation

ANGULARJS Study Syllabus