AngularJS学习笔记

0X00 AngularJS 简介

AngularJS 是一个 JavaScript 框架。它可通过 `<script>` 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。
  1. AngularJS 通过 ng-directives 扩展了 HTML。
  2. 非常适合做单页面应用
  3. MVC的思想(或者是MVVM)
  4. 模块化和依赖注入
  5. 双向数据绑定
  6. 指令

下面是angular中关于MVVM模式的运用:
Angular的mvvm

在angular中MVVM模式主要分为四部分:

  • View:它专注于界面的显示和渲染,在angular中则是包含一堆声明式Directive的视图模板。
  • ViewModel:它是View和Model的粘合体,负责View和Model的交互和协作,它负责给View提供显示的数据,以及提供了View中Command事件操作Model的途径;在angular中$scope对象充当了这个ViewModel的角色;
  • Model:它是与应用程序的业务逻辑相关的数据的封装载体,它是业务领域的对象,Model并不关心会被如何显示或操作,所以模型也不会包含任何界面显示相关的逻辑。在web页面中,大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象;而angular中的service则是封装和处理这些与Model相关的业务逻辑的场所,这类的业务服务是可以被多个Controller或者其他service复用的领域服务。
  • Controller:这并不是MVVM模式的核心元素,但它负责ViewModel对象的初始化,它将组合一个或者多个service来获取业务领域Model放在ViewModel对象上,使得应用界面在启动加载的时候达到一种可用的状态。

【注】:单页面应用 (single-page application 简称为 SPA) 是一种特殊的 Web应用。它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML、JavaScript 和CSS。一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript动态的变换HTML的内容,从而实现UI与用户的交互。由于避免了页面的重新加载,SPA 可以提供较为流畅的用户体验。

【例子1】

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>

【解释:】ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的”所有者”。
ng-model指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

0X01 AngularJS 指令

  1. ng-app 指令定义一个 AngularJS 应用程序,即应用程序的根元素,也标记了AngularJS脚本的作用域
  2. ng-init 指令初始化应用程序数据,定义了初始值
  3. ng-model 指令把元素值(比如输入域的值)绑定到应用程序。还可以:
    为应用程序数据提供类型验证(number、email、required)。
    为应用程序数据提供状态(invalid、dirty、touched、error)。
    为 HTML 元素提供 CSS 类。
    绑定 HTML 元素到 HTML 表单。
  4. ng-bind 指令把应用程序数据绑定到 HTML 视图。
  5. ng-repeat 指令会重复一个 HTML 元素,可以用在数组对象上
  6. 自定义指令,可以使用 .directive 函数来添加自定义的指令

【例子2】

1
2
3
4
5
6
<div ng-app="" ng-init="firstName='John'">
<p>在输入框中尝试输入:</p>
<p>姓名:<input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p><!--相当于下句数据的绑定-->
<p>你输入的为: <span ng-bind="firstName"></span></p>
</div>

【例子3】

1
2
3
4
5
6
7
8
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>

【例子4】

1
2
3
4
5
6
7
8
9
10
11
12
13
<body ng-app="myApp">
<runoob-directive></runoob-directive>
/*用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以"-"分割, runoob-directive:*/
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
<!--restrict:"E",-->
template : "<h1>自定义指令!</h1>"
};
});
</script>

</body>

【注】:可以通过以下方式调用指令:

  1. 元素名:<runoob-directive></runoob-directive>
  2. 属性 :<div runoob-directive></div>
  3. 类名 :<div class="runoob-directive"></div>
  4. 注释 :<!-- 指令: runoob-directive -->

通过restrict 值可以限制你的指令只能通过特定的方式来调用。值有以下几种:

  • E 只限元素名使用
  • A 只限属性使用
  • C 只限类名使用
  • M 只限注释使用

0X02 AngularJS 表达式

  • AngularJS 表达式写在双大括号内:。
  • AngularJS 表达式把数据绑定到 HTML,这与ng-bind 指令有异曲同工之妙。
  • AngularJS 将在表达式书写的位置”输出”数据。
  • AngularJS 表达式 很像JavaScript 表达式:它们可以包含文字、运算符和变量。
  • 实例 10 或 undefined undefined

【注:】

  • 类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。
  • 与 JavaScript表达式不同,AngularJS 表达式可以写在 HTML 中。
  • 与 JavaScript 表达式不同,AngularJS表达式不支持条件判断,循环及异常。
  • 与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。

【例子5】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div ng-app="">
<!-- AngularJS 数字 -->
<div ng-init="quantity=1;cost=5">
<p>总价: {{ quantity * cost }}</p>
</div>
<!-- AngularJS 字符串 -->
<div ng-init="firstName='John';lastName='Doe'">
<p>姓名: {{ firstName + " " + lastName }}</p>
</div>
<!-- AngularJS 对象 -->
<div ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 {{ person.lastName }}</p>
</div>
<!-- AngularJS 数组 -->
<div ng-model="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>
</div>

0X03 AngularJS 模型(ng-model指令)

  • ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
  • ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。
  • 双向绑定,在修改输入域的值时, AngularJS 属性的值也将修改
  • 验证用户输入
  • ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error)
  • ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类

【例子10】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   <div ng-app="myApp" ng-controller="myCtrl">
/*双向绑定*/
</br>
名字: <input ng-model="name">
<h1>你输入了: {{name}}</h1>
/*验证用户输入*/
<form name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>

0X04 AngularJS 过滤器

过滤器可以使用一个管道字符(|)添加到表达式和指令中。

过滤器 描述
filter 从数组项中选择一个子集
lowercase 格式化字符串为小写
orderBy 根据某个表达式排列数组
uppercase 格式化字符串为大写
currency 格式化数字为货币格式

【例子6】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<div ng-app="myApp" ng-controller="personCtrl">
=====================================
=====================================
</br>
//大小写
<div>
/*原先*/
<p>姓名为 {{ lastName }}</p>
/*大写*/
<p>姓名为 {{ lastName | uppercase }}</p>
/*小写*/
<p>姓名为 {{ lastName | lowercase }}</p>
</div>
=====================================
=====================================
</br>
//货币
<div>
数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">
<p>总价 = {{ (quantity * price) | currency }}</p>
</div>
=====================================
=====================================
</br>
//排序
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
=====================================
=====================================
</br>
//输入过滤
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.quantity = 1;
$scope.price = 9.99;
$scope.names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}];
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>

0X05 AngularJS 服务

在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。

  1. $location 服务:它可以返回当前页面的 URL 地址
  2. $http 服务:服务向服务器发送请求,应用响应服务器传送过来的数据
  3. $timeout 服务:对应了 JS window.setTimeout 函数
  4. $interval 服务:对应了 JS window.setInterval 函数
  5. 创建自定义的服务

【注:】AngularJS 会一直监控应用,处理事件变化, AngularJS 使用 $location 服务比使用 window.location 对象更好。

【例子7】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div ng-app="myApp" ng-controller="myCtrl"> 
<p>现在时间是:</p>
<h1>{{theTime}}</h1>
</div>
<p>$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
</script>

【例子8】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div ng-app="myApp" ng-controller="myCtrl">
<p>在获取数组 [255, 251, 200] 值时使用过滤器:</p>
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
<p>过滤器使用服务将10进制转换为16进制。</p>
</div>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
app.controller('myCtrl', function($scope) {
$scope.counts = [255, 251, 200];
});
</script>

当然Angular还有很多其他功能,依赖注入、路由等等,初学就暂不学习这些功能了~


【参考】

  1. http://www.tuicool.com/articles/IvyYNb
  2. http://www.runoob.com/angularjs/angularjs-tutorial.html
  3. http://www.apjs.net/