How to use angularjs? Detailed analysis of angularjs framework examples (with complete examples)-JS Tutorial-php.cn

This article introduces a summary of the framework knowledge points of angularjs, with complete examples and detailed explanations of complete tags. Next, let us read this article together

1. What is AngularJS?

It is a front-end framework developed by Google with an MVC structure. In the Angular application, the view layer is DOM, and the controller is JavaScript Class, model data is stored in object properties.

2. Data Binding

By declaring a certain part of the interface to be mapped to properties of JavaScript , let them automatically Synchronization, this programming method is data binding. There is no need to register a listener for the field, and the object properties and interface display can be changed synchronously.

3. Dependency Injection

No need to re-create the object, you will need to use the object $scope or $loaction is injected into the constructor in the following way. This is dependency injection.

function HelloController($scope, $location) {
$scope.greeting = { text: &#39;Hello&#39; };
// use $location for something good here...
}

Copy after login

4. Directives

The core layer of the framework has a powerful DOM transformation engine that allows you to extend HTML Syntax. The ng-controller in HTML is used to specify which controller to serve which view, ng- modelBind an input box to the model part. We call these HTML extension instructions.

5. Explain each tag based on examples

<!DOCTYPE html>
<html  ng-app>
<head>
<base/>
<title>Your Shopping Cart</title>
<script src="../frm/angular/angular.js"></script>
</head>
<body ng-controller=&#39;CartController&#39;>
<h1>Your Order</h1>
<p ng-repeat=&#39;item in items&#39;>
<span>{{item.title}}</span>
<input ng-model=&#39;item.quantity&#39;/>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)"> Remove </button>
</p>
<script>
function CartController($scope) {
////@formatter:off
$scope.items = [{
title : &#39;Paint pots&#39;,
quantity : 8,
price : 3.95
}, {
title : &#39;Polka dots&#39;,
quantity : 17,
price : 12.95
}, {
Title : &#39;Pebbles&#39;,
quantity : 5,
price : 6.95
}];
////@formatter:on
$scope.remove = function(index) {
$scope.items.splice(index, 1);
};
}
</script>
</body>
</html>

Copy after login

According to the above code, An explanation of the key content:

ng-app Properties tell Angular which part of the page it should manage. Since we put it on the html element, it tells Angular to manage the entire page. If you are integrating Angular with an existing application that uses other methods to manage pages, then you may need to place p## in the application #superior.

）

at Angular # In ##, the page area managed by the JavaScript class is called a controller. By including a controller in the body tag, the declared CartController will manage body# Anything between ## tags. 3）

ng-repeat represents itemscopy each element in the array once to in this p DOM. In each copy of p, an attribute called item is also set to represent the current element, so we can use. As you can see, each p contains the product name, quantity, unit price, total price and a remove button.

4) {{item.title}}

As demonstrated The 'Hello World' example, data binding is to insert the value of the variable into a certain part of the page through {{ }} Stay in sync. The complete expression {{item.title}} retrieves the current item in the iteration and then adds the current item's titile attribute value Insert into DOM.

5）

ng-model Definition Created a data binding between the input field and item.quantity. span{{ in the tag }}A one-way relationship is established and the value is inserted here. But the application needs to know that when the user changes the quantity, it can change the total price, which is what we want. By using ng-model we will keep changes in sync with our model. ng-modelStates that the value of item.quantity will be inserted into the input box. Whenever the user enters a new value, it will automatically Update item.quantity.

6） {{item.price | currency}}

We want the unit price to be formatted in USD. Angular has a feature called a filter that allows us to convert text. There is a filter called currency that will do this dollar format formatting for us. .

7）

Click this button to call the remove() function. Also passed is $index, which contains the iteration order of ng-repeat so that we know which item to remove.

8）function CartController($scope) {

CartController Manage the logic of this shopping cart. Through this we tell Angular that the controller

needs an object called $scope . $scope is used to bind data to elements on the interface.

9）$scope.remove = function(index) {

$scope.items.splice(index, 1);

};

我们希望 remove()函数能够绑定到界面上，因此我们也把它增加到$scope中。对于这

个内存中的购物车版本，remove()函数只是从数组中删除了它们。因为通过ng-repeat创建

的这些

是数据捆绑的，当某项消失时，列表自动收缩。记住，无论何时用户点击移除

按钮中的一个，都将从界面上调用 remove()函数。（想看更多就到PHP中文网AngularJS开发手册中学习）

6. 调用 Angular

任何应用使用 Angular 必须做两件事：

1）加载 angular.js

2）使用 ng-app告知Angular管理哪一部分的DOM

7. 加载脚本

很简单：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

Copy after login

推荐使用 Google 的CDN。Google的服务器是非常快的，脚本是跨应用缓存的。那就是说，如果你的用户有多个使用Angular的应用，它只下载一次。同样，如果用户访问过使用Google Angular的CDN链接，那么当他访问你的站点时没有必要再次下载。

8. 模块

<html ng-app=&#39;myApp&#39;>
<body ng-controller=&#39;TextController&#39;>
<p>{{someText.message}}</p>
<script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script>
var myAppModule = angular.module(&#39;myApp&#39;, []);
myAppModule.controller(&#39;TextController&#39;,
function($scope) {
var someText = {};
someText.message = &#39;You have started your journey.&#39;;
$scope.someText = someText;
});
</script>
</body>
</html>

Copy after login

在这个模板中，我们告知 ng-app 元素我们的模块名，myApp。然后我们调用了Angular对象创建一个名为myApp的模块，传递了控制器函数给模块的控制器函数。

只要记住，远离全局命名空间是一件好事。模块化这是我们通用的机制。

9. 模板和数据绑定

Angular 应用中的模板只是那些我们从服务器加载的 HTML文档或者是定义在