Home > Developer > Web Develop
Angularjs, angularjs Chinese community
Angularjs aims to reduce the complexity of developing applications using AJAX, making it easy to create, test, expand, and maintain programs. The following are some core concepts in angularjs.
1. Client TemplateMulti-page applications generate HTML by assembling and splicing data on the server, and then output it to the browser. Angularjs is different in that it transmits templates and data to the browser and then assembles them on the browser side. The browser's role programming only provides the static resources of the template and the data required by the template.
| Hello.html |
Controllers. jsfunction HelloController($scope) { $scope.greeting = { text: 'Hello' };} |
Controllers. jsfunction HelloController($scope) { $scope.greeting = { text: 'Hello' };} |
function HelloController($scope, $location) {$scope.greeting = { text: 'Hello' };// use $location for something good here...} |
<!DOCTYPE html> |
| <Html ng-app> Ng-app tells Angular to manage the part of the page. Ng-app can also be placed on <div> as needed <Body ng-controller = "CartController"> The Javascript class is called a controller, which can manage everything in the corresponding page area. <Div ng-repeat = "item in items"> Ng-repeat indicates that the DOM in the DIV is copied once for each element in the items array, and the item is set as the current element and can be used in the template. <Span >{{ item. title }}</span> Expression {item. title} retrieves the current item in the iteration and inserts the title attribute value of the current item into the DOM. <Input ng-model = "item. quantity"> Ng-model defines the data binding between the input field and item. quantity <Span >{{ item. price | currency }}</span> <Span >{{ item. price * item. quantity | currency }}</span> The unit price and total price are formatted as USD. Format the dollar format using Angular's currency filter. <Button ng-click = "remove ($ index)"> Remove </button> Remove Data and the corresponding DOM through the iteration sequence $ index of ng-repeat (bidirectional binding feature) Function CartController ($ scope ){ CartController manages the logic of this shopping cart. $ scope is used to bind data to elements on the interface. $ Scope. items = [{title: 'paint pots', quantity: 8, price: 3.95}, {title: 'polka dots', quantity: 17, price: 12.95}, {title: 'pebbles ', quantity: 5, price: 6.95}]; By defining $ scope. items, we have created a virtual data that represents a collection of items in the user's shopping cart. The shopping cart cannot only work in the memory, but also needs to notify the server of persistent data. $ Scope. remove = function (index) {$ scope. items. splice (index, 1 );}; The remove () function can be bound to the interface, so we also add it to $ scope. |
Pay attention to the following key areas,
1. Add ng-app
2. Introduce angularjs.
See angularjs.org/here for details.
<! Doctype html>
Establish an AngularJS Environment
Pay attention to the following key areas,
1. Add ng-app
2. Introduce angularjs.
See angularjs.org/here for details.
<! Doctype html>
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
