There's no time to explain, get in the car! Angularjs First Lecture: Angularjs introduction. __js

Angularjs First vehicle: ANGULARJS Introduction and the first instance Angularjs Introduction characteristics Introduction Terminology explanation grammar

Example explanation

    Absrtact: Mainly introduces the Angularjs and its characteristic, and makes the explanation with 3 examples.
    This tutorial uses the ANGULARJS version: 1.6.4
    development application software Blogger recommended: Webstorm
    angularjs Download Address: http://docs.angularjs.org 

introduction of Angualrjs

   Angularjs was developed by Google, designed to overcome the lack of HTML in building applications.
   Angularjs uses a different approach, trying to make up for the limitations of HTML itself in building applications.
   Angularjs enables browsers to recognize new syntax by using a structure that we call Identifiers (directives). For example:
        (1) data binding using a double brace {{}} syntax,
        (2) using a DOM control structure to implement iterations or hiding a DOM fragment,
        (3) Supporting form and form validation, and
        (4) Associating logical code with related DOM elements ;
        (5) The ability to divide HTML into reusable components.
    Angularjs is a framework for developing dynamic Web projects based on MVC processing mode, which implements MVVM data two-way binding.
    with its data and display separation, MVVM, MVC, Di and other powerful features active in the front-end development market, is the front-end agile development use of the mainstream must be mastered by one of the framework.

Second, characteristics

 1. Data binding data binding may be the coolest and most practical feature of ANGULARJS.
    It helps you avoid writing large amounts of initial code to save development time. A typical Web application might contain 80% of the code used to process, query, and monitor the DOM.
    Data binding makes less code, and you can focus on your application. 
    On the one hand, model changes drive element changes in the DOM, on the other hand, changes in DOM elements can also affect model.
    This is more complex in user interaction because developers need to process and parse these interactions, then merge into a model and update view.

This is a manual and complex process, and when a application is very large, it will be a very strenuous task. 2. Template in Angularjs, a template is an HTML file.
    But the HTML content is expanded to include a lot of content that helps you map model to view. The HTML template will be parsed into the DOM by the browser. The DOM then becomes the input of the Angularjs compiler. 
    Angularjs will traverse the DOM template to generate some guidance, namely, Directive (instruction).
    All instructions are responsible for setting data bindings for the view. Data binding is a DOM change, not a string connection or innerhtml change.
    Using the DOM as input, rather than a string, is the biggest reason Angularjs distinguishes itself from other frameworks. 

Using DOM allows you to extend the command vocabulary and create your own instructions and even develop reusable components. 3. MVC applies to client application development Angularjs absorbs the traditional MVC principles. 
    MVC or Model-view-controll Design patterns can mean different things to different people. Angularjs does not perform MVC in the traditional sense, much closer to MVVM (Model-view-viewmodel).

One of the MVC schematics can look at the following picture.
    4. Dependency Injection (Dependency injection, DI) Angularjs has built-in dependency injection subsystems that can help developers develop, understand, and test applications more easily. DI allows you to ask for your dependence instead of looking for them yourself.

For example, we need a thing that di is responsible for finding and providing to us. 5, directives (instruction) instruction is my personal favorite characteristics. Do you also want the browser to do something interesting.
    Then Angularjs can do it. Directive can be used to create a custom labelSign.
 They can be used to decorate elements or manipulate DOM properties.

iii. Explanation of terminology

    Template (Template): An       
                HTML code that contains angular special extension tags.      

    Directives (Directive):        
            Extended HTML code, custom tags, attributes, and so on.

    Model: Data that is           
            stored in JS and used to interact with the user.

    Scope (SCOPE): The       
            scope in which model data is produced in an HTML page.

    expression (expression):      
            Angularjs syntax that can be calculated on an HTML page.

    Compiler (Compiler):        
            is used to interpret angular code in HTML code.

    Filter:    
            Displays the data that is output in an HTML page in a specified format.

    View:
            The HTML view page that the user sees.    

    Data binding (binding): The 
            correlation between specific data in JS and data on an HTML page.

    Controller (Controller):    
            an Dongdong that provides functional support to view views.

    Dependency Injection (Dependency injection): 
            angular a way to automatically create objects and pass objects.

    INJECTOR (INJECTOR):
            a container specifically designed to implement dependency injection (DI).  

    Module: 
            angular is used to encapsulate items at the highest level.    

    Service:    
            angular is used to provide support for business functions to view views.

    Component (component):  
            angular code used to encapsulate the public parts of a Web page often contains templates, directives, services, and so on.   

iv. explanation of grammar

1. Any application of the bootstrapper

    , there will be a running portal during the operation.
    ANGULARJS applications are the same, under normal circumstances, there are two types of portal programs that guide the application of AG: Ng-app instruction, bootstrap manual boot. In
    Normal mode, it is through the ng-app instruction to guide the angular application to work.
    when the angular is introduced into the Web page, the program automatically finds the Ng-app instruction and starts loading the compilation and interprets the execution from the portal.
    code: Typically, the page will define Ng-app familiarity to specify that the portal loads the module specified by angular in script:   

    
 
Code: In some special cases, you can also dynamically control the load initiation angular application through the script to start the application through Angular.bootstrap (DOM, module):
 
 
2. Basic grammatical structure

    1. Before we begin to study angularjs, we should understand how to define and use the various parts of Angularjs, so as to solve some problems in the following learning process.
 
     Ng-app  
 
    2.Angular application to run the import instructions, under normal circumstances, is written in our front-end items on the entry file with the tag, used to launch the project at the time of booting angular application
 
    Angular.module (..)   
 
    3.Angular is a module to manage the data in our front-end projects, usually in a project will contain a variety of data, such as Administrators, news, announcements and so on.
    The module needs to be loaded when the application is started, so the angular in the process of design can bind a value, this value is the main module of the system.
 
3. Basic instructions

    Instruction is the use of more than one part of the angular, angular in the built-in instructions are ng-at the beginning of a special grammatical structure,
    such as: Ng-app, the common basic instructions are as follows:

    ng-app= "MYAPP": The entry of the program operation, Binding a module by name

    Ng-init: An operation that initializes data for some variables during the program's Operation

    ng-model= "param": data-bound instructions, mainly for data binding ng-bind on form elements

    : A data-bound instruction that is used to display the data of a variable to a page to replace the mustache syntax for

    Ng-controller: Controller directives that specify the scope of the controller in the page, usually appearing as a property

    Ng-[event]: event directives, function to invoke the instruction when certain events occur on the page
 
4. Basic grammar

    var app = Angular.module ("name", []): The module name used to define a angular is the name of the
    module
    [] Where you can add additional modules
    App.controller ("name", function () {}): The controller name that is used to define a angular is the name of the
    controller
    () {} is the functions that this controller is to handle function


    $scope scope   
    $ Scope is a parameter that is placed in the controller function. This parameter does not need to be passed a value, but rather angular automatically.
    In the process of Operation $scope is equivalent to a container, you can declare variables or functions on $scope,  
    $scope variables and functions are automatically bound to the variables in the view page, called $scope mount data.


    $rootScope Scope   
    $rootScope is the root scope of the ANGULARJS, also the global scope, a parameter placed in the controller function, the 
    parameter does not need to pass the value, angular will automatically assign the value, mount in the $ The data on the Rootscope is shared by the child modules and controllers under all the modules in the angular application.


    the Run () function is used with      
    $rootscope to declare and initialize the global data
    app.run (function ($rootScope) {//Process code})


    $scope. $watch ()     
    mount on $scope to monitor changes in data
    monitor a single variable: $scope. $watch ("name", function () {//Process code})
    monitors multiple variables: $scope. $watch (" name1 + name2 + ... "+ function () {})
 
5.angular Event Handling

    Event operations in Angularjs, because of its own virtual DOM structure, so it does not support ordinary events, 
    usually through its own event instructions to call through the $scope hanging in the controller of the completion of the function, the 
    event instruction is actually the encapsulation of common events, Start with ng-, plus the event name, such as mouse click event Ng-click.
 
v. Example EXPLANATION 
(1) An example of getting Started
 
<! DOCTYPE html>  
 
Note: The
    text input instruction <input ng-model= "Inputvalue"/> bound to a model variable called Inputvalue. The
    double brace Mark adds the YOURNAME model variable to the greeting language book.
    you do not need to register an additional event listener or add an event handler for the application.
    This page is very concise, if you write in jquery, then you have to set the input box in the Chang event,
    and then update the content. This process is much more cumbersome than the ANGULARJS.
 
(2) Getting Started Example 2    
 
<! DOCTYPE html>  
 
    Note that ng-app= "myApp", this can not be less, there are ng-controller= "" also can not be less,
    these two separate ANGULARJS valid range and Controller layer effective range.
 
(3) Getting Started example 3      
 
<! DOCTYPE html>