Home > Developer > Web Develop
Angularjs is designed to overcome the lack of HTML in building applications. HTML is a good declarative language for static text presentation design, but it seems weak to build a Web application. So I did some work (you can also think of it as a gimmick) to get the browser to do what I want.
In general, we use the following techniques to solve the disadvantages of static web page technology in building dynamic applications:
Class libraries-class libraries are a collection of functions that can help you write Web applications. It's your code that dominates, and it's up to you to decide when to use the class library. Class libraries are: jquery, etc.
Framework-Framework is a special, already implemented Web application that you only need to populate with specific business logic. The framework here is the dominant one, and it is used to invoke your code based on the specific application logic. The framework is: Knockout, Sproutcore and so on.
Angular JS
http://angularjs.org
Angularjs uses a different approach, and it tries to make up for the drawbacks of HTML itself in building applications. Angularjs allows the browser to recognize the new syntax by using the structure we call Identifiers (directives). For example: use MVC pattern development; Use Ng-controller to specify which part of the view each controller is responsible for monitoring. Data binding using double curly braces {{}}}; First of all, of course, the introduction of Angularjs <script src= "Xx/angular.js" ></script> then, after you're going to be angular The controlled part is added with the Ng-app value, can be empty, preferably named. <div ng-app= "App" > Need to "activate" <script type= "text/javasricpt" >angular.module (' app ', []) inside the script. Controller (' Hello ', function ($scope) {$scope. text= ' Hello '}) </script >module (), the first parameter is the module to be controlled, here is the module of the name of the app, The second parameter is the class library that you want to load with angular, which can be added in the form ["", "", ""], and then<div ng-controller= "Hello" >
<input ng-model= "text" class= "Form-control"/>
<H1 ng-bind= "text+ ', World '" >,world<H1 ng-cloak class= "Ng-cloak" >{{text}}<div class= "{{text}}" >{{text}}</div>
</div>
Add Ng-controller to the div to control it, call it in the script. Controller set method control. Data binding with $scope binding data and the view layer
In the binding of input to the data you want to change, using ng-model= "" You set the variable, here is "text"
To associate with {{}}, put text inside.
Some people may think that {{}} is ugly in the DOM structure, we can also use Ng-bind or Ng-cloak to set, the effect is the same.
In a bit more complex
<body ng-app= ' app ' >
<div ng-controller= "Hello" >
<input ng-model= "text" class= "Form-control"/>
<H1 ng-bind= "text+ ', World '" >,world<H1 ng-cloak class= "Ng-cloak" >{{text}}<div class= "{{text}}" >{{text}}</div>
</div>
<div ng-controller= "Shopping" >
<div ng-repeat= "Item in Item" >
<span>{{item.title}}</span>
<input type= "" Name= "" id= "" value= "" ng-model= "item.quantity"/>
<span>{{item.price|currency}}</span>
<span>{{item.price*item.quantity|currency}}</span>
<button ng-click= "Remove ($index)" >Remove</button>
</div>
JS Code
Angular.module (' app ', [])
. Controller (' Hello ', function ($scope) {
$scope. text= ' Hello '
})
. Controller (' Shopping ', function ($scope) {
$scope. item=[
{title: ' A ', quantity:8,price:3.95},
{title: ' B ', quantity:12,price:55},
{title: ' C ', quantity:28,price:95}
]
$scope. remove = function (index) {
$scope. Item.splice (index,1)
}
})
This is achieved by the number of input filled in, calculate the following total price, click Remove next to remove the current line
Using the array set in. js, inside the HTML ng-repeat the object values inside the array
Ng-repeat means that for each element in the item array, a copy of the DOM structure in <div> is copied (including the Div itself), and each copy of the Div is given a property of item, so that the copy element can be used in the template.
Learning angularjs-day1-Summary
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
