AngularJS IntroductionAngularjs is a structural framework for designing Dynamic Web applications. First, it is a framework, not a class library, that provides a complete set of scenarios for designing Web applications. It's not just a JavaScript framework, because its core is actually an enhancement to HTML tags. Dynamic Web applications can be implemented, so that the Web application can provide users with a wealth of operations, the ability to continuously update the view with user operations without URL jumps. Ng has also declared that it is more suitable for developing CRUD applications, which are more applications for data manipulation than for games or image processing applications. Features:AngularJS is aJavaScript Framework. It can be added to the HTML page by <script> tags. AngularJS throughthe directive extends HTML and binds the data to HTML through an expression. You need to import the file before using it:function:
- AngularJS binds application data to HTML elements.
- AngularJS can clone and repeat HTML elements.
- AngularJS can hide and display HTML elements.
- AngularJS can add code to the HTML element "behind".
- AngularJS supports input validation.
01-"Angularjs expression" 1, Angularjs use{{}} binding expression. Used to output the contents of an expression to a page. Expressions can be literals, operators, variables, and so on, or in an expressionThe result of the operation output. Eg: <p>{{5+5+ "Angular"}} </p>If the Angular.js file is placed below the page, you will see the {{}} expression as is in the instant of the page refresh, so you can use the Ng-bind directive instead of an expression. Eg: the above can be rewritten as: <png-bind= "5+5+ ' Angular '" ></p>02-"Common Instructions for Angularjs" The AngularJS directive is an extended HTML attribute,prefixed with ng-. 1.Ng-app: declares the area under the jurisdiction of ANGULARJS. Generally written on the body or HTML tags, in principle, a page can only have one. Eg: <body ng-app= "" ></body> 2,Ng-model: An instruction binds an element value (such as the value of an input field) to a variable in the application. Eg: <input type= "text" ng-model= "name"/> 3,Ng-bind: Outputs the values from the application variables to the page HTML view. You can replace each other with the expression {{}}. Eg: <div ng-bind= "Name" ></div> 4,Ng-init: Initializes the value of the variable in the ANGULARJS application; Eg: <body ng-app= "" ng-init= "Name= ' jredu '" > When the application initializes, the name variable is appended with the initial value.MVC and scopes in 03-angularjs 1. "MVC three-tier architecture"model layer: The part of the application that is used to process data. (including saving or modifying data into databases, variables, files). In Angularjs, the model specifically refers to the various data in the application.View layer: The user can see the page where the user displays the data. Controller : The controller is a bridge linking view and model . Responsible for reading the data from the view, accepting the user's operation input, and sending the data to the model layer. After the model layer has finished processing the data, the results are returned to Controller,controller and the results are returned to the view layer display. ：
2, create a ANGULARJS module. The part that ng-app= "" needs to be bound. var app = Angular.module ("myApp", []); need to accept two parameters: ①The name of the module, which is the name that needs to be bound in Ng-app double quotation marks. <body ng-app= "myApp" >IiArray. Represents the module name that needs to be injected and does not need to be injected into other modules instead of an empty array. >>> Angularjs encapsulates common functionality into angular.js, which can be used directly when creating the main module without injection. >>> Some applications have fewer features, need to import the corresponding JS file, and in [] injected into this module, to be able to use. This is the "modular development" and "dependency Injection" in Angularjs!on the Angularjs module, create a controller that needs to pass two parameters:①the controller name, which is the name Ng-controller needs to bind. <div ng-controller= "Myctrl" >②the constructor of the controller, the constructor can pass in multiple parameters. >>> If you want to use a system's built-in object in a function, you must pass in the function's arguments, otherwise you cannot use it. >>> Angularjs built-in objects, starting with $, such as $scope, $rootScope3, the scope of Angularjs①$scope: A local scope that declares properties and methods on the $scope. Can only be used in the current controller; (local use)Ii$rootScope: Root scope. The properties and methods declared on the $rootscope can be used in the scope contained throughout the Ng-app. (Global use)>>> If you do not use the $scope declaration variable, Instead, the scope of the data bound in the HTML tag is directly using Ng-model: 1. If Ng-model is written in a controller, the variable is bound to the $scope of the current controller by default ; 2. If Ng-model is not written on any controller, the variable will be bound to $rootscope by default;>>> Angularjs in the parent-child scope! 1, Angularjs, sub-roleA domain can only access variables in the parent scope, not the variables of the parent scope; 2, in order to solve the above problems, you can declare the variables in the parent scope as reference data types, such as objects. This allows you to modify the properties of an object directly in the child scope without modifying the address saved by the object itself. Examples are as follows:Ng-app: declaring the area under the jurisdiction of Angularjs Create a Angularjs module. The part that ng-app= "" needs to be bound. on the Angularjs module, create a controller, set the name of the controller, and the controller's constructor. The Run page displays the results as:Auto capture display. Create a controller to compare, scope differencesThe global input is bound to the variable, and the effect is as follows:filters in the 04-angularjs A filter can use a pipe character (|) is added to the expression and directives. >>> system built-in filters for example applications:1. Uppercase,lowercase Case Conversion{{"Lower cap string" | uppercase}}//Result: Lower cap string {"TANK is good" | lowercase}}//Result: TANK is good2. Date format{{1490161945000 | date: ' YYYY-MM-DD HH:mm:ss '}}//2017-03-22 13:52:253, number formatting (keep decimals){{149016.1945000 | number:2}}4. Currency Currency format{{currency}}//Result: $250.00 {{] | currency: "Rmb￥"}}//Result: rmb￥250.005. Filter LookupInput filters can be added to the directive with a pipe character (|) and a filter followed by a colon and a model name.Filter Filter Select a subset from the arrayFind the name of the iphone line {{[{"Age": "id": Ten, "Name": "iphone"}, {"Age": "id": one, "name": "Sunm Xing"}, {"Age": "id": 1 2, "name": "Test ABC"}] | filter:{' name ': ' iphone '}}6, LimitTo interception{{"1234567890" | limitto:6}}//Starting from the front 6 bits {{"1234567890" | limitto:-4}}//Starting from the back to intercept 4 bits7. Sort by orderRoot ID descending order {{[{"Age": "id": Ten, "Name": "iphone"}, {"Age": "id": one, "name": "Sunm Xing"}, {"Age": $, "id": "Name": "Test abc"}] |by : ' ID ': true}} According to the ID ascending order {{[{"Age": "id": Ten, "Name": "iphone"}, {"Age": "id": one, "name": "Sunm Xing"}, {"Age": $, "id": "Name" : "Test abc"}] | by : ' ID '}} Custom One:>>> Custom filters, while passing filter parameters. * Call Filter Example: <p>{{12345678912 | hidetel:5}}</p>* The parameter 5 passed in, it will be accepted by the NUM parameter of the filtered function. Filter ("Hidetel", function () {return function (text,num) {num = num>0&&num<11?num:3;//Set Default replacement length text = text+ ""; var NewText = text.substring (0,11-num) + Text.substring (11-num,11). Replace (/\d/g, "*"); return NewText;}}) The run displays the result asCustom Two:Custom filters, implemented according tothe ability to filter data by name. * >>> Invocation Example: * Please enter your name: <input type= "text" ng-model= "name"/>* <tr ng-repeat= "Item in Classes | Filterbyname:name ">*/.filter (" Filterbyname ", function () {return function (Item,search) {if (!search) return item; var arr = []for (var i=0; i<item.length; i++) {var index = item[i].name.indexof (search); if (index>-1) {Arr.push (item[ I]);}} return arr;}}) Operating effect:Filter finds the default full match and cannot be searched individually! Service services in the 05-angularjs AngularJS Services (service) AngularJS You can create your own services, or use the built-in services.What is a service? In AngularJS, a service is a function or object that can be used in your AngularJS app. More than 30 services are built in AngularJS.Why use the service?In many services, such as $location service, it can use objects that exist in the DOM, similar to window.location objects, but window.location objects have some limitations in AngularJS applications. AngularJS will always monitor applications, handle event changes, and AngularJS use$location service is better than using window.location objects. "Services Service"* 1, built-in services: * >>> to use the service, the service name must be injected through the parameters of the controller's constructor!!! * >>> system built-in services, unified use$ Start, the properties and methods in the service use $$ to begin with!!! When customizing the service, be careful to distinguish it from the system service; * * $location: Returns the URL address information of the current page, is an object; * $http: Sends a request to the server, similar to the ajax;* $timeout in jquery: equivalent to SetTimeout (); * $interval: Equivalent to SetInterval (); Custom Service (equivalent to declaring a function) * The first parameter is the service name: * The second parameter is a constructor for the custom service. Our custom service is essentially an object. * The properties of the object, which can be represented in the constructor, use the this. property representation; * The method of the object, which can be used in the constructor, using the this. method, for example: Custom service: Converts decimal number to 16 binary. Service ("Hexafy", function () { This.gongneng = "Convert decimal number to 16 binary"; this.func = function (num) {return num.tostring (16);}}) You can also use filters to achieve the same functionality. Filter ("Filter1", function () {return function (num) {return num.tostring (16);}})Call the service in the filter!! You must also inject the service name in the outer constructor of the declaration filter!!!. Filter ("Filter2", Function (Hexafy, $location) {return function (num) {return Hexafy.func ( num);})
Beginner---angularjs detailed
