Home > Developer > Web Develop

ANGULARJS--Core concept

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Angularjs is designed to ease the complexity of developing applications using AJAX, making it easy to create, test, scale, and maintain programs. The following are some of the core concepts in ANGULARJS.
1. Client TemplatesA multi-page application generates HTML by assembling and splicing data on the server, and then outputting it to the browser. Angularjs is different from this, passing the template and data to the browser and then assembling it on the browser side. The role of the browser is programmed to provide only the static resources of the template and the data required by the template.
Hello.html
 
  
 
  
 
   Controllers.js
function Hellocontroller ($scope) {    $scope. Greeting = {text: ' Hello '};}
 
  
 
  






2. Model View Controller (MVC)The core concept of MVC is to understand the separation of management data (model) between the code, the application logic (Controller), and the presentation of the data to the user (view). In the angular application, the view is the DOM, the controller is the JavaScript class, and the model data is stored in the object properties.

3. Data binding A typical DOM operation is to insert the result into the desired DOM by setting innerHTML on the element before the data is processed.     This kind of work is very repetitive and ensures that the correct state of the data is obtained in the interface and JavaScript properties. This feature is included in the angular, which declares only one part of the interface to the JavaScript properties, allowing them to synchronize themselves over the active completion. 

 
  
  
 
   
 
  
 
  
 
   Controllers.js
function Hellocontroller ($scope) {    $scope. Greeting = {text: ' Hello '};}
 
  
 
  

The value of input (the user's input) is bound to the Greeting.Text and is presented in a timely fashion in the <p>. The bindings are bidirectional, and can also be used by setting the value of the $scope.greeting.text and proactively synchronizing to the input box and the double curly braces ({{}})


4. Dependency Injection$scope Object Bar Data binding itself is passed to the developer via the Hellocontroller constructor, $scope not the only thing we need, but also the ability to add a $location object, such as: 

 
  
  
 
   
function Hellocontroller ($scope, $location) {$scope. Greeting = {text: ' Hello '};//use $location for something good here. ..}
 
  
 
  

With angular's dependency injection system, we can follow the Dimitri rule (least knowledge principle) and focus only on the parts we need most.


5. DirectivesThe angular includes a powerful DOM transformation engine that enables developers to extend HTML syntax. In the previous instance we saw that {{}} was bound with data, and Ng-controller was used to specify which controller to service which view, Ng-model to bind an input box to the model part.     We call it HTML extension directives. Angular includes very many identifiers to define views, which can define common views as templates. In addition, developers can write their own identifiers to extend HTML templates.

Shopping Cart Demo Sample: 

 
  
  
 
   
<! DOCTYPE html>
 
  
 
  
 
   Ng-app tells angular the part of the admin page. According to need Ng-app also can put on <div>
<body ng-controller= "Cartcontroller" >
A JavaScript class is called a controller that manages whatever is in the corresponding page area.
<div ng-repeat= "Item in Items" >
The ng-repeat represents a copy of the DOM in the div once for each element in the items array, sets item as the current element at the same time, and can be used in the template.
<span>{{item.title}}</span>
Expression {{Item.title}} retrieves the current item in the iteration and inserts the value of the current item's title property into the DOM
<input ng-model= "Item.quantity" >
Ng-model defining data binding between an input field and a item.quantity
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
Unit prices and total price are formatted into dollar form. Formatted in US dollar format with angular's currency filter.
<button ng-click= "Remove ($index)" > Remove </button>
Remove data and corresponding DOM (bidirectional binding attribute) by Ng-repeat Iteration order $index
function Cartcontroller ($scope) {
Cartcontroller manages the logic of this shopping cart, $scope is the element used to bind data to the interface
$scope. Items = [{title: ' Paint pots ', Quantity:8, price:3.95}, {title: ' Polka dots ', quantity:17, price:12.95}, {titl E: ' Pebbles ', Quantity:5, price:6.95}];
By defining $scope.items, we have created a virtual data that represents the collection of items in the user's shopping cart, that the shopping cart cannot work in memory only, and that it needs to be notified of persistent data on the server side.
$scope. remove = function (index) {$scope. Items.splice (index, 1);};
The Remove () function can be bound to the interface, so we also add it to the $scope		 
  
 
  

















ANGULARJS--Core concept



                

                    
This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or
reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or
complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

                

            


                                                                    

        

            

                

                                        

                        

                    

                

                

    

                    
Contact Us

            
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
                products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
                content of the page makes you feel confusing, please write us an email, we will handle the problem
                within 5 days after receiving your email.

            

                If you find any instances of plagiarism from the community, please send an email to:
                info-contact@alibabacloud.com
                and provide relevant evidence. A staff member will contact you within 5 working days.
            

            



                

                

            

        

    

    


    


  

    

      

        

          

            

              
A Free Trial That Lets You Build Big!

              
 Start building with 50+ products and up to 12 months usage for Elastic Compute Service 

              

                Get Started for Free
              

            

          

          

            

              
    
                
  • 
                  
    Sales Support
    
                  
    
                    1 on 1 presale consultation
                  
    
                  
    
                    Chat
                    Contact Sales
                  
    
                
    • 
                
  • 
                  
    After-Sales Support
    
                  
    
                    24/7 Technical Support
                    6 Free Tickets per Quarter
                    Faster Response
                  
    
                  
    
                    Open a Ticket
                  
    
                
    • 
                
  • 
                  
    
                  
     Alibaba Cloud offers highly flexible support services tailored to meet your exact needs. 
    
                  
    
                    Learn More
                  
    
                
    •