first, introduction and use1.Angular JS is the front-end JS Frame 2.Angular JS was born in 2009, byMisko Hevery and another person were created and then acquired by Google3. Download: Search angular.min.js, open http://www.bootcdn.cn/angular.js/, Version: 1.5.8, click, open a new page, find https:// Cdn.bootcss.com/angular.js/1.5.8/angular.min.js, copy the link, through the browser can preview angular JS, can be downloaded to local use, You can also use the copied link address directly (note: Use the corresponding protocol version according to the protocol used) 4. Use: Introduce angular JS can be 5.jquery based on dom;angular based on data 6. Features: MVVM, bidirectional data binding, modularity, semantic tagging, dependency injectionSecond, the directive: Directive1. Instruction (Directive): System built-in instructions, custom directives; Define instructions to use the Hump method to name, use "-" to connect multiple words2. System built-in directive: Search Angularjs, open https://docs.angularjs.org/, find directive, that is System instruction 3. System Instructions: Ngapp (Ng-app): Defines an application owner who, if written in HTML, is the owner of the application, and if written in body indicates that the body is the owner of the application; written in a Div, it means that the div is the owner of the application. After assigning a ng-app to a tag, it means that the other instructions inside the tag can be used angular, and other instructions that use angular outside of this tag will fail/error. Note: Only one time can be used in a projectNgmodel (Ng-model): Bind/Associate a variable to the tag, only for the input tag, which is equivalent to holding a variable in real-time to save input value, once input has changed, the tag corresponding to the value of the variable also corresponding to the real-time modification. Ng-model values are stored directly in the $scopeNgcontroller (Ng-controller): Defining the Controllerngrepeat (ng-repeat): Loop array or object eg:ng-repeat= "variable name in array"Ngbind (Ng-bind): binding data, see below for specific usageNgclick (Ng-click): Trigger Click eventNgclass (ng-class): Append style, note that the style must be quoted, otherwise it will be treated as a variable!!! ngshow (ng-show): Sets whether the label is displayed True/falsenghide (ng-hide): Sets whether the label is hidden True/false4. Custom directives: Create Module (module ()) = "binding directive (Directive () ) Global object: HTML has a global object Window,angularjs also has a global object: angular global function: The function in the manual, which is defined by the global function, which is the global object angular. Moudule (): 1. Create a new module: two parameters: module name (string, corresponding to name in Ng-app), array (string, delimited): Each string represents an existing module. The second parameter is the other module that the first module needs to rely on. 2. Get an existing module: One parameter: module name Module method: directive ("instruction name", function () {}): Custom module binding directive command name: Follow the Hump method namedcallback function: Returns an object that contains the following properties:Template: Templates;restrict: Method of Invocation (E:element a:attribute c:class m:comment); Replace: boolean,true: Replaces commentswith instructions, transclude: boolean,true (replace label), and needs to be written in the template <ng-transclude> </ng-transclude> used to replace new content;templateurl: template path, template can only have one root tag, note with template only two select one, and must be placed in the server environment when using Templateurl use : label type: EG attribute form: eg <div hello-world></div>class form: Eg <div class= "Hello-world" ></div>Note form: eg <!--directive:hello-world-->
Third, services: Service1. Service: System comes with, can be used to handle network request ($http), Eg:ajaxModule Method: Controller (' Controller name ', function (service object) {}): Defines the director; can have more than one. Controller name: value in Ng-controller $http Object : $http ({ method: Request MethodURL: The requested path}). Then (the function (data) { //Success function, return data},function (Error) {//Failure function, return error});$scope Objects: Area objects, each controller has its own scope object, which is used to store variables and functionsWhen you write code in the controller, pay attention to the order of the code (before you can use the attribute)!!!! Each controller has a $scope, each $scope has its own scope!!!! The child controller can inherit the parent controller's $scope$rootScope object: The root scope of the $scope, all controllers are available! Global Objects! Four, data two-way binding1. Three ways: A. {{variable/function/Expression}}, the most used, when the network speed is not good, the source code will appear B.ng-bind: c.Ng-model:
If age already exists, use the existing value and add data to $scope if it does not exist
v. Filters: Filter1. Filter: Filter the data2. Common system comes with filters: Currency: Processing currencyEg:{{pro.price | Currency: "￥"}} = "Use renminbi to display currency
3. Custom filters: 3.1. Custom filters must be separate modules3.2. Use the filter () method of the module: Filter (' Filter name ', callback function)Eg: the module name. Filter (' Filter name ', function () {return function () {};//returns one of the functions used to filter the parameters}); 4. Use a custom filter: you need to inject the module in use (see below), Then use the same as the built-in filter 5. Global function: IsArray (): Whether it is an array isundefined (): undefined
vi. Dependency Injection1. In angular, each module has its own function, when other modules need to use this function, as long as the corresponding module is added to the module depends on the array can be 2. Specific usage:
vii. routing mechanism (Ngroute)1. Download:http://www.bootcdn.cn/angular.js/= "Angular-route.min.js =" Right-click, save as 2. Must be loaded first: The system comes with the module 3. Use the following:
Angularjs First Experience
