AngularJS教程（一）

来源：互联网发布：js 最大公约数编辑：程序博客网时间：2024/06/07 12:37

AngulaJs简介

AngularJs是一个JavaScript框架，AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

1.开始使用AngularJs

AngularJs是由JavaScript语言编写的库，可通过<script>标签来添加到页面文件中

<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>

2.AngularJs表达式

AngularJs中的表达式用{{expression}}来表示

AngularJs中的表达式和JavaScript很像，可以包括文字，运算符还有变量

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

3.AngularJs对象

AngularJs对象就像JavaScript对象

person={firstName:'apple',lastName:'banana'}

4.AngularJs数组

persons={1,3,4,5,4}

访问数组元素时第三个值为{{persons[2]}}

5.AngularJs指令

AngularJs通过指令（directivs）来扩展html，带有前缀ng-

5.1ng-app

ng-app初始化一个AngularJs应用程序

ng-app 告诉AngularJs他所活跃的范围

<span style="white-space:pre"></span><div ng-app=""><span style="white-space:pre"></span>    </div>

5.2 ng-init

ng-init用来初始化应用程序数据

<div ng-app="" ng-init="fruit='apple'"> <p>the fruit is {{fruit}}</p>    </div>

页面输出

the fruit is apple

5.3ng-model

ng-model把元素值绑定到应用程序

<!DOCTYPE html><html><head><meta charset="utf8"></head><body><div ng-app=""> <p>在输入框中尝试输入：</p> <p>姓名：<input type="text" ng-model="name"></p> <p ng-bind="name"></p></div><script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script></body></html>

下方的文字随输入框的改变而改变，因为name已经被绑定到input框中

5.4ng-bind

ng-bind实现数据绑定

<!DOCTYPE html><html><head><meta charset="utf8"></head><body><div ng-app="" ng-init="fruit='apple'"> <p>{{fruit}}</p> <p ng-bind="fruit"></p></div><script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script></body></html>

效果如下

在这里，两种方法得到的结果是一样的，看起来是这样，但是还存在着差别（可以把我举例子的代码运行一下看看），是当使用{{}}语法时，浏览器会先渲染index.html 文件，AngularJs才能进行解析，即用数据来替换模板中的花括号，在这段小小的间隔用户就可能看到数据改变的这一过程，所以当需要对页面的数据进行绑定的话，建议使用ng-bind。

5.5ng-repeat

ng-repeat会对数组中每个项都会克隆一次html

<!DOCTYPE html><html><head><meta charset="utf8"></head><body><div ng-app="" ng-init="fruits=[{type:'apple', weight:'2kg'},{type:'orange', weight:'1.5kg'}]"> <p ng-repeat="fruit in fruits">{{fruit.type+' '+fruit.weight}}</p></div><script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script></body></html>

6.AngularJs控制器

AngularJs是常规的JavaScript对象，由标准的JavaScript对象的构造函数创建，ng-controller指令定义了应用程序控制器。

<!DOCTYPE html><html><head><meta charset="utf8"></head><body><div ng-app="myApp" ng-controller="myCtrl">type: <input type="text" ng-model="type"><br>weight: <input type="text" ng-model="weight"><br><br>您要购买的水果是: {{type + " " + weight}}</div><script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {    $scope.type = "apple";    $scope.weight = "3.3kg";});</script>

ps:

1.ng-app用来指定angularJs的活跃范围

2.ng-controller是定义一个控制器

3.myCtrl是JavaScript函数

4.$scope是作用域

控制器也可以写在外部文件中，如果将上文中的JavaScript存到一个js文件（mycrl.js）中，则可以在页面文件中直接引用该文件

<script src="myctrl.js"></script>

7.AngularJs过滤器

filter过滤器用管道字符 | 来表示

7.1 uppercase

将字符串格式化为大写

将上文例子13行代码改为

您要购买的水果是: {{type|uppercase}}

7.2 lowercase

将字符串格式化为小写

将上文例子13行代码改为

您要购买的水果是: {{type|lowercase}}

7.3 currency

将数字格式化为货币形式

<!DOCTYPE html><html><head><meta charset="utf8"></head><body><div ng-app="myApp" ng-controller="myCtrl">type: <input type="text" ng-model="type"><br>weight: <input type="text" ng-model="weight"><br>price:<input type="text" ng-model="price"><br><br>您要购买的水果是: {{type+" "+weight}}单价为:{{price|currency}}</div><script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {    $scope.type = "apple";    $scope.weight = "3.3kg";    $scope.price = "2";});</script>

7.4 orderBy

根据表达式排列数组

<!DOCTYPE html><html><head><meta charset="utf8"></head><body><div ng-app="" ng-init="fruits=[{type:'straberry', weight:'3kg'},{type:'lemo', weight:'2.2kg'},{type:'apple', weight:'2kg'},{type:'orange', weight:'1.5kg'}]"> <p ng-repeat="fruit in fruits|orderBy:'type'">{{fruit.type+' '+fruit.weight}}</p></div><script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script></body></html>

7.5filter

filter可以取得子集该指令后跟着冒号和模型名称

<!DOCTYPE html><html><head><meta charset="utf8"></head><body><div ng-app="" ng-init="fruits=[{type:'straberry', weight:'3kg'},{type:'lemo', weight:'2.2kg'},{type:'apple', weight:'2kg'},{type:'orange', weight:'1.5kg'}]"><input type="text" ng-model="test"> <p ng-repeat="fruit in fruits|filter:test|orderBy:'type'">{{fruit.type+' '+fruit.weight}}</p> </br></div><script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script></body></html>

1 0