Introduction to AngularJS

Basic API

1. Boundary instruction ng-app

   Description: Specifies a boundary that tells the framework what scope it is in effect

   Syntax: < HTML ng-app>

   Note: The boundary directive is a mandatory directive to use with the NG framework

2. Render instruction {{}}

   Description: The NG framework specifies that {{}} sign-in double brackets are used to represent the content presentation function

   You can write variables, strings, and even expressions under the NG syntax rules in {{}}

3. Information instruction ng-model

   Description: The NG framework specifies that nG-model is used for things like input or textarea

   Tags used to collect user information for data binding

4. The binding directive ng-bind

   Description: The NG framework provides a function for non-input tags

   A helper directive similar to the {{}} render directive that binds the NG variable to the label you want to display

5. The initialization instruction ng-init

   Description: The NG framework specifies the use of this directive to initialize the data model (NG variable) inside the boundary

   Ng-init does not specify where it must be placed, but it is customary to place it on the body

   The internal data model is initialized automatically after the page loads

   Syntax:

The controller

1. Presents the module () method

   Description: This method is provided in the NG framework to generate [page data model] method

   Syntax: var model name = angulat.module(‘ boundary name ‘, [injection information])

2. Declare the controller directive ng-controller

   Description: This directive is used to declare which element is the controller in a page

   Controller: A unit used to manipulate data and data.

   Syntax: < HTML ng-controller=”mainController”>

   Note: Whenever a label is declared to own a controller, the controller must be written out in the script.

3. Implement the controller method *.controller()

   Description: This method is provided by NG framework in script script, used to generate [page controller] method

   Controller (‘ scope’, function(scope’, function(scope’, function(scope){…}])

   App. controller(‘mainController’, [‘$scope’, function($scope){…}])

4. The traversal instruction ng-repeat

   Description: This directive is used to iterate over the NG variable and build a page HTML element from it

   
   {{ng-repeat}}
   

   Note: Track by $index indicates that duplicate content is allowed

Event listeners

In the NG framework, you can add an event listener to an element by adding the [ng-event name] directive to the element tag, and the event listener callback function needs to be implemented in the controller, via $scope.

Syntax:

$scope. $scope. $scope. }

Routing the router

1. Use this command with the ng-view command

2. NgRoute needs to be injected

3. The statement

   app.config('$routeProvider'.function($routeProvider){
     $routeProvider
         .when('/home', {
             templateUrl: 'views/home.html'.controller: homeController	/ / controller})})Copy the code

service

In the NG framework, flat controllers cannot communicate with each other, so the concept of services is proposed. Different controllers can interact with each other by injecting services: App. Controller (‘ controller ‘[‘ $scope’, ‘service’, function ($scope, system services) {…}])

There are many different services, including system services and custom services

System services $HTTP

A service for handling network functions is built directly into the APP data model within the NG framework, which is $HTTP

/ / get request
$http({
    method: 'GET'.url: ' '
}).success(function(data) {
  
}).error(function(err) {})/ / post request
$http({
    method: 'POST'.url: ' '.headers: {
    "Content-Type": 'application/x-www-form-unlencoded'
  },
  data: ' '
}).success(function(data) {
  
}).error(function(err) Imgsrc and imgA tags should not be copied to SRC and href. Ng-src and ng-href should not be copied to SRC and href.Copy the code

Filter service $filter

Data conversion display of a small tool, support for custom content

Grammar: {{| any content filter}}

1. Common filters:

1.To transform content for the currency format, the default format is $* * * | currency:'Currency symbol'

2.Filter an array of subsets from an array option3.*** | uppercase/lowercase4.Ordering displayed content based on the value of an expression is typically used in ng-repeat structures, and repeat structures are not simple data structures. * * * | orderBy:'expression'
Copy the code

2. Custom filter

app.filter('Custom filter name'.function(){
    return function(text) {...}
})
Copy the code

Timeline service

There are three kinds of timeline services: [interval calling service] [delay calling service interval] [delay calling service interval] [delay calling service timeout] [Clear timeline content service]

var timer = null;
timer = $interval(function() {... $interval.cancel(timer);/ / remove
}, 1000)

timer = $timeout(function() {... },1000)
Copy the code

Listening to the service

Listen for the value of the NG variable and call back if the value changes.

$scope.$watch(‘NG variable ‘, function(){… }, true/false)

Custom service

1. The value of service
2. Constant service
3. Factory service
4. Service service
5. The provider service

Value User-defined service

Description: Value service is a service customization method that extends the APP data model through the. Value () method

Syntax: app.value(‘ Custom service name ‘, service content JSON)

Constant service

Description: The constant service has the same function as the value service, but the difference is that once the constant service is customized, it cannot be changed until injection. Only the first of multiple customization takes effect.

Syntax: app.constant(‘ Custom service name ‘, service content JSON)

Factory service

Create an object structure with the.factory() method and return it directly.

Syntax: app.factory(‘ custom service name ‘, function(){return {}})

Service service

Description: A blank object has been built, and all operations within the service are done through this (similar object).

Syntax: app.service(‘ custom service name ‘, function(){this.name = ‘zhangsan’; })

The provider service

$get = function(){this.$get = function(){… } fixed structure to expand the service content. Whenever a provider service is created, it is added directly to the app, whether injected or not.

App.service (‘ custom service name ‘, function(){this.$get = function(){return {}}}

Custom instruction

Description: Created by the app.directive() method

Grammar:

app.directive('Custom instruction name'.function(){
    return {
        /* How to wake up the command: 'A', 'E', 'C', 'M', can be used alone or in combination. 'A' : attribute, by attribute 'E' : element, by element 'C' : class, by class name 'M' : comment, by comment <! -- directive: Custom directive name --> The instruction name must be in lower case, any upper case will be invalid. 2. If the instruction name is of type M, replace is mandatory and must be set to true to take effect. Directives loaded through template have one and only one root */ 
        restrict: 'Instruction type'.// The HTML structure that a directive can display on a page. If you need to load the directive's structure from an external file, write it as templateUrl
	template: 'Instruction structure'./* Directive overwrite refers to whether the directive, when present on the page, will put a word element to add to the current element. The default is false and replaces the current element directly. Can be set to true to not overwrite the current element, but instead be added to the page as its word element */
	replace: 'Command copy'}})Copy the code