[AngularJS] ANGULARJS Series (1) Basic article

Directory

• What is Angularjs?
• Why use the/ng feature
• Hello World
• Built-in Directives
• Built-in filters
• Modular development

Starting with Angularjs a year ago (hereafter referred to as NG), Ng is now 2. Although the 2 is completely different, but the 1.x is still good enough.

What is Angularjs?

NG is a JS framework, and the latest version is 1.5.8.

Official website: https://angularjs.org/

Download:

Install-package Angularjs.core

NPM install [email protected]

Why use the/ng feature

Ng is a very rare two-way binding framework.

Characteristics:

1. Jvm
2. Modular development
3. Two-way binding
4. Instruction System

Hello World

Building a 1 ng page is easy

<! DOCTYPE html>
This is almost the simplest Hello World page of Ng
which
Ng-app ng built-in directives that Mark Ng-managed areas
{{model}} is Ng's double-parenthesis interpolation syntax, where the values of model models are output
Ng-model ng built-in directives for binding specific models
Built-in Directives
In NG: ng-xxx for instructions in HTML
NG contains:

 
 

  
  

  
Ng-app
 
   
 
    
Specify NG Management Area
 
   
  
  

  
Ng-init
 
   
 
    
Initialization
 
   
  
  

  
Ng-model
 
   
 
    
Bidirectional data binding directives
 
   
  
  

  
Ng-bind
 
   
 
    
Bind data (the default is to escape HTML data)
 
   
  
  

  
Ng-cloak
 
   
 
    
Hidden before loading, loading the display (the NG module will move out of the feature after loading)
 
   
  
  

  
Ng-repeat
 
   
 
    
Loop traversal (with $id $index $first $last $middle $even Property with item in each element scope)
 
    
(Key,value) in the data track by $index
 
   
  
  

  
Ng-class
 
   
 
    
Ng-class= ' {red:true} ' set class based on object
 
   
  
  

  
Ng-show/ng-hide/ng-if
 
   
 
    
Whether to show/hide/exist (Ng-if can be restored by comment mark)
 
   
  
  

  
Ng-src/ng-href
 
   
 
    
An expression error that prevents the default request
 
   
  
  

  
Ng-switch
 
   
 
    
When a lot of judgment logic, reduce the use of ng-show, etc.
 
   
  
  

  
Ng-checked/ng-selected/ng-readonly/ng-disabled
 
   
 
    
Generally available Ng-model (above 4 instructions are not two-way binding, you can achieve the full selection of Tick box code)
 
   
  
  

  
Ng-change/ng-copy/ng-click/ng-dblclick/ng-focus/ng-blur/ng-submit
 
   
 
    
Ng Common Event directives
 
   
 
 
Built-in filters
In order to do some common operations on the data, NG defines some built-in filters
<! DOCTYPE html>
Ng-init Initialization of model data
{{model | currency}} Currency is a currency filter

 
  

  
   
 
    
Currency (currency processing) 
     
 
      
{{num | currency: ' ￥ '}}
 
     
 
    
Date (dates formatted) 
     
 
      
{{date | date: ' YYYY-MM-DD hh:mm:ss eeee '}}
 
     
 
    
Filter (matched substring) 
     
 
      
{{Childrenarray | filter: {name: ' I '}}}//match the name attribute containing I
 
     
 
    
JSON (format JSON object) 
     
 
      
{{jsontest | json}}
 
     
 
    
LimitTo (Limit array length or string length) 
     
 
      
{{Childrenarray | limitto:2}}//will display the first two items in the array
 
     
 
    
lowercase (lowercase)
 
    
Uppercase (UPPERCASE)
 
    
Number (formatted digit)
 
    
Order BY (sort)
 
   
 
  
Modular development
In the actual development environment, it is not written as a single line of JS code in the above example.
In Ng, our code is generally developed under a module.
Way One:
<! DOCTYPE html>
Mode Two (you can also create multiple page modules at the same time):
<! DOCTYPE html>
Simply explain the above API

 
    

  
     
 
      
Angular.bootstrap ()
 
       
 
        
angular.bootstrap(dom,[‘myApp‘]) 手动加载模块myApp
 
       
 
      
Angular.module ()
 
       
 
        
angular.module(‘myApp‘,[])Create a module
 
        
angular.module(‘myApp)Get module
 
       
 
      
Module.run ()
 
       
 
        
module.run(function(){})Equivalent to the main method of the program
 
       
 
      
Module.controller ()
 
       
 
        
module.controller(‘HomeCtrl‘,function(){})Create a Controller
 
        
module.controller(‘HomeCtrl‘,[‘$scope‘,function(scope){}])Create a controller (recommended)
 
       
 
     
 
    
In Ng, it is recommended that the business logic be executed in the controller.
This address: http://www.cnblogs.com/neverc/p/5903257.html
[AngularJS] ANGULARJS Series (1) Basic article