Angular JS 基础
本文中的AngularJS是AngularJS 1.x
AngularJS是一个JavaScript框架。通过
建议把脚本放在 元素的底部。这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。
通过指令扩展html，通过表达式绑定数据到html。
AngularJS官网
AngularJS 官方API
菜鸟教程：AngularJS参考手册
简介
【示例】
AngularJS
名字 :
Hello {{name}}
AngularJS 扩展了 HTML
- AngularJS 通过 ng-directives 扩展了 HTML。
- ng-app 指令定义一个 AngularJS 应用程序。
- ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
- ng-bind 指令把应用程序数据绑定到 HTML 视图。
什么是AngularJS
- AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。
- AngularJS 把应用程序数据绑定到 HTML 元素。
- AngularJS 可以克隆和重复 HTML 元素。
- AngularJS 可以隐藏和显示 HTML 元素。
- AngularJS 可以在 HTML 元素"背后"添加代码。
- AngularJS 支持输入验证。
AngularJS 指令
- AngularJS 指令是以 ng 作为前缀的 HTML 属性。
- ng-init 指令初始化 AngularJS 应用程序变量。
使用 ng-init 不是很常见。一般使用
【示例】
姓名为
AngularJS 表达式
- AngularJS 表达式写在双大括号内：{{ expression }}。
- AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
- AngularJS 将在表达式书写的位置"输出"数据。
- AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
例如： {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
//显示10
{{5+5}}
//显示Danyang Zhang
{{firstName+" "+ lastName}}
AngularJS 应用
- AngularJS 模块（Module） 定义了 AngularJS 应用。
- AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
- ng-app指令定义了应用, ng-controller 定义了控制器。
【示例】
名:
姓:
姓名: {{firstName + " " + lastName}}
Angular 模块
- 模块定义了一个应用程序。
- 模块是应用程序中不同部分的容器。
- 模块是应用控制器的容器。
- 控制器通常属于一个模块。
创建模块
你可以通过 AngularJS 的 angular.module 函数来创建模块：
...
添加控制器
你可以使用 ng-controller 指令来添加应用的控制器:
{{ firstName + " " + lastName }}
添加指令
AngularJS 提供了很多内置的指令，你可以使用它们来为你的应用添加功能。
Angular JS 表达式
数字
总价： {{ quantity * cost }}
或者
总价：
字符串
姓名： {{ firstName + " " + lastName }}
或者
姓名：
对象
姓为 {{ person.lastName }}
或者
姓为
数组
第三个值为 {{ points[2] }}
或者
第三个值为
AngularJS 表达式 与 JavaScript 表达式
- 类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
- 与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
- 与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
- 与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。
AngularJS API
angular.lowercase() 转换字符串为小写
angular.uppercase() 转换字符串为大写
angular.isString() 判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber() 判断给定的对象是否为数字，如果是返回 true。
AngularJS指令
- AngularJS 通过被称为 指令 的新属性来扩展 HTML。
- AngularJS 通过内置的指令来为应用添加功能。
- AngularJS 允许你自定义指令。
AngularJS 指令
【示例】
价格计算器
数量：
价格：
总价： {{ quantity * price }}
ng-app
ng-app 指令告诉 AngularJS，
- ng-app 指令定义了 AngularJS 应用程序的 根元素。
- ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
ng-init
ng-init 指令为 AngularJS 应用程序定义了 初始值。
通常情况下，不使用 ng-init。使用一个控制器或模块来代替它。
ng-model
ng-model 指令 绑定 HTML 元素 到应用程序数据。
ng-model 指令也可以：
- 为应用程序数据提供类型验证（number、email、required）。
- 为应用程序数据提供状态（invalid、dirty、touched、error）。
- 为 HTML 元素提供 CSS 类。
- 绑定 HTML 元素到 HTML 表单。
ng-repeat
ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。
使用 ng-repeat 来循环数组
-
{{ x }}
循环对象：
-
{{ x.name + ', ' + x.country }}
自定义指令
可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， zdyDirective, 但在使用它时需要以 - 分割, zdy-directive.
限制使用
restrict 值可以是以下几种:
- E 作为元素名使用 Element
- A 作为属性使用 Attribute
- C 作为类名使用 Class
- M 作为注释使用 Comment
- restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
元素名
属性名
类名
注释
AngularJS 模型 ng-model
【示例】
双向绑定
{{name}}
验证用户输入
提示信息会在 ng-show 属性返回 true 的情况下显示。
应用状态
ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error)。
CSS类
ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid[-key]
ng-invalid[-key]
ng-dirty //是否和控件进行过交互
ng-pending
ng-pristine //是否修改过 true未修改，false修改
AngularJS Scope 作用域
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
【示例】
{{carname}}
当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。
Scope概述
AngularJS 应用组成如下：
- View(视图), 即 HTML。
- Model(模型), 当前视图中可用的数据。
- Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
如果你修改了视图，模型和控制器也会相应更新。
Scope 作用范围
根作用域
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
【示例】
{{name}}
- {{x}}
{{name}}
- {{x}}
AngularJS 控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。
AngularJS 控制器
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
控制器方法
名:
姓:
姓名: {{fullName()}}
外部文件中的控制器
First Name:
Last Name:
Full Name: {{firstName + " " + lastName}}
【personController.js】
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
AngularJS 过滤器
过滤器可以使用一个管道字符（|）添加到表达式和指令中。
| 过滤器 | 描述 |
|---|---|
| currency | 格式化为货币格式 |
| filter | 从数组项中选择一个子集 |
| lowercase | 格式化字符串为小写 |
| orderBy | 根据某个表达式排列数组 |
| uppercase | 格式化字符串为大写 |
【示例】
{{lastName|uppercase}}
{{ (quantity * price) | currency }}
【orderBy排序实例】
-
{{ x.name + ', ' + x.country }}
【过滤输入】
输入过滤:
-
{{ (x.name | uppercase) + ', ' + x.country }}
AngularService
AngularJS 中你可以创建自己的服务，或使用内建服务。
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。
$location
$http
$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
XMLHttpRequest 实例
$timeout
AngularJS $timeout 服务对应了 JS window.setTimeout 函数。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
$interval
AngularJS $interval 服务对应了 JS window.setInterval 函数。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
自定义服务
【创建服务】
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
【使用服务】
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
【过滤器适用自定义服务】
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
Select 选择框
【示例1：字符串数组】
【示例2：对象数组】
你选择的是: {{selectedSite.site}}
网址为: {{selectedSite.url}}
【示例3：对象】
使用对象作为数据源, x 为键(key), y 为值(value)。
你选择的是: {{selectedCar.brand}}
模型: {{selectedCar.model}}
颜色: {{selectedCar.color}}
注意选中的值是一个对象。