【AngularJS】AngularJS基本使用

慕承恩

2023-12-01

AngularJS指令

AngularJS 指令是以 ng 作为前缀的 HTML 属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/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>

<div ng-app="" ng-init="firstName='John'">
<p>姓名为 <span ng-bind="firstName"></span></p>
</div>

当网页加载完毕，AngularJS 自动开启。

ng-app 指令告诉 AngularJS，<div>元素是 AngularJS 应用程序的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
ng-init 指令初始化 AngularJS 应用程序变量。

HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

<div data-ng-app="" data-ng-init="firstName='John'">
  <p>姓名为 <span data-ng-bind="firstName"></span></p>
</div>

ng-repeat 指令

ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。

<div data-ng-app="" data-ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li data-ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

ng-repeat 指令用在一个对象数组上：

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象：</p>
<ul>
  <li ng-repeat="x    in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

ng-app 指令

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-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):

	<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
		Email: <input type="email" name="myAddress" ng-model="myText" required>
		<p>编辑邮箱地址，查看状态的改变。</p>
		<h1>状态</h1>
		<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
		<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
		<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>
	</form>

文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。

ng-valid: 验证通过
ng-invalid: 验证失败
ng-valid-[key]: 由$setValidity添加的所有验证通过的值
ng-invalid-[key]: 由$setValidity添加的所有验证失败的值
ng-pristine: 控件为初始状态
ng-dirty: 控件输入值已变更
ng-touched: 控件已失去焦点
ng-untouched: 控件未失去焦点
ng-pending: 任何为满足$asyncValidators的情况
ng-invalid:未通过验证的表单
ng-valid:布尔型属性，它指示表单是否通过验证。如果表单当前通过验证，他将为true
ng-dirty:布尔值属性，表示用户是否修改了表单。如果为 ture，表示有修改过；false 表示修没有修改过
ng-touched:布尔值属性，表示用户是否和控件进行过交互
ng-pristine:布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过

ng-show指令

ng-show 属性返回 true 的情况下显示。
ng-show 指令隐藏或显示一个 HTML 元素。

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

ng-disabled 指令

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。禁用

创建自定义的指令

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用.directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

元素名

<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>
</body>

属性

<body ng-app="myApp">
<div runoob-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>
</body>

类名

<div class="runoob-directive"></div>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "C",
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

注意：你必须设置 restrict 的值为 “C” 才能通过类名来调用指令。

注释

<body ng-app="myApp">
<!-- directive: runoob-directive -->
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "M",
        replace : true,
        template : "<h1>自定义指令!</h1>"
    };
});
</script>
</body>

注意：我们需要在该实例添加 replace 属性，否则评论是不可见的。
注意：你必须设置 restrict 的值为 “M” 才能通过注释来调用指令。

限制使用

restrict 值可以是以下几种:

E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用
注意: restrict默认值为EA, 即可以通过元素名和属性名来调用指令。

AngularJS 表达式

表达式可以为字符串,数字,对象,数组

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
	<p>姓名: <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
	<p>姓为 {{ person.lastName }}</p>
</div>

<div ng-app="" ng-init="points=[1,15,19,2,40]">
	<p>第三个值为 {{ points[2] }}</p>
</div>

<div ng-app="" ng-init="points=[1,15,19,2,40]">
	<p>第三个值为 <span ng-bind="points[2]"></span></p>
</div>

AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
<div ng-app="">
     <p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>
</body>
</html>

AngularJS 表达式与 JavaScript 表达式

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

AngularJS 应用

AngularJS 模块（Module）定义了 AngularJS 应用。
AngularJS 控制器（Controller）用于控制 AngularJS 应用。
ng-app指令指明了应用, ng-controller 指明了控制器。

<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>

ng-app 指令告诉 AngularJS，<div>元素是 AngularJS 应用程序的"所有者"。

Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。

如何使用

控制器中的属性对应了视图上的属性：
当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。

Scope 概述
AngularJS 应用组成如下：

View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

scope 是模型。

scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

//在controller中可以设置获取修改函数

<body>
		<div ng-app="myApp" ng-controller="myCtrl">
			<input ng-model="name">
			<h1>{{greeting}}</h1>
			<button ng-click='sayHello()'>点我</button>
			<button ng-click='sayBye()'>点我</button>
		</div>

		<script>
			var app = angular.module('myApp', []);
			app.controller('myCtrl', function($scope) {
				$scope.name = "Runoob";
				$scope.sayHello = function() {
					$scope.greeting = 'Hello ' + $scope.name + '!';
				};
				$scope.sayBye = function() {
					$scope.greeting = 'ByeBye ' + $scope.name + '!';
				};
			});
		</script>
<p>当你修改输入框中的值时，会影响到模型(model),当然也会影响到控制器对应的属性值。</p>
	</body>

@score只作用于 controller中
$rootScope作用于所有controller中

根作用域$rootScope

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

@scope只能在当前controller中使用
@rootScope

AngularJS 控制器

AngularJS 控制器控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。

AngularJS 过滤器

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

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

例如:
<p>姓名为 {{ lastName | uppercase }}</p>

在指令中使用过滤器

 <li ng-repeat="x in names | orderBy:'name'">
    {{ x.name + ', ' + x.country }}
  </li>

过滤输入

	<div ng-app="myApp" ng-controller="namesCtrl">
		<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>

自定义过滤器

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
    return function(text) {
        return text.split("").reverse().join("");
    }
});

AngularJS 服务(Service)

AngularJS 中你可以创建自己的服务，或使用内建服务。

什么是服务?
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

$location 服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义。

为什么使用服务?
在很多服务中，比如 $location 服务，它可以使用 DOM 中存在的对象，类似 window.location 对象，但 window.location 对象在 AngularJS 应用中有一定的局限性。
AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。

$location vs window.location

windows.location	windows.location	$location.service
目的	允许对当前浏览器位置进行读写操作	允许对当前浏览器位置进行读写操作
API	暴露一个能被读写的对象	暴露jquery风格的读写器
是否在AngularJS应用生命周期中和应用整合	否	可获取到应用生命周期内的每一个阶段，并且和$watch整合
是否和HTML5 API的无缝整合	否	是（对低级浏览器优雅降级）
和应用的上下文是否相关	否，window.location.path返回"/docroot/actual/path"	是，$location.path()返回"/actual/path"

常用服务-$http 服务
$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
	<div ng-app="myApp" ng-controller="myCtrl">
		<p>欢迎信息:</p>
		<h1>{{myWelcome}}</h1>
	</div>
	<p>$http 服务向服务器请求信息，返回的值放入变量 "myWelcome" 中。</p>
	<script>
		var app = angular.module('myApp', []);
		app.controller('myCtrl', function($scope, $http) {
			$http.get("welcome.htm").then(function(response) {
				$scope.myWelcome = response.data;
			});
		});
	</script>
</body>
</html>

常用服务-$timeout 服务
AngularJS $timeout 服务对应了 JS window.setTimeout 函数。

<body>
	<div ng-app="myApp" ng-controller="myCtrl">
		<p>两秒后显示信息:</p>
		<h1>{{myHeader}}</h1>
	</div>
	<p>$timeout 访问在规定的毫秒数后执行指定函数。</p>
	<script>
		var app = angular.module('myApp', []);
		app.controller('myCtrl', function($scope, $timeout) {
			$scope.myHeader = "Hello World!";
			$timeout(function() {
				$scope.myHeader = "How are you today?";
			}, 2000);
		});
	</script>
</body>

$常用服务 -$ interval 服务
AngularJS $interval 服务对应了 JS window.setInterval 函数。

<body>
	<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>
</body>

自定义服务
自定义服务，获取当前毫秒数

<body>
	<div ng-app="myApp" ng-controller="myCtrl">
		<p>255 的16进制是:</p>
		<h1>{{hex}}</h1>
	</div>
	<p>自定义服务，获取当前毫秒数</p>
	<script>
		var app = angular.module('myApp', []);
		app.service('myService', function() {
			this.getCurrTime = function(x) {
				return x + new Date().getTime();
			}
		});
		app.controller('myCtrl', function($scope, myService) {
			$scope.hex = myService.getCurrTime('当前毫秒:');
		});
	</script>
</body>

过滤器使用服务

<body>
	<div ng-app="myApp">
		在过滤器中使用服务:
		<h1>{{255 | myFormat}}</h1>
	</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);
			};
		} ]);
	</script>
</body>

在数组中使用服务

<body>
	<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>
</body>

$http

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

使用格式

// 简单的 GET 请求，可以改为 POST
$http({
    method: 'GET',
    url: '/someUrl'}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码
});

简写方法
$http.get(’/someUrl’, config).then(successCallback, errorCallback);
$http.post(’/someUrl’, data, config).then(successCallback, errorCallback);

还有以下简写方法

$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
$http.patch

~~v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。~~

AngularJS1.5 以上版本 - 实例

<body>
	<div ng-app="myApp" ng-controller="siteCtrl">
		<ul>
			<li ng-repeat="x in names">{{ x.Name + ', ' + x.Country }}</li>
		</ul>
	</div>
	<script>
		var app = angular.module('myApp', []);

		app.controller('siteCtrl', function($scope, $http) {
			$http({
				method : 'GET',
				url : 'https://www.runoob.com/try/angularjs/data/sites.php'
			}).then(function successCallback(response) {
				$scope.names = response.data.sites;
			}, function errorCallback(response) {
				// 请求失败执行代码
			});

		});
	</script>
</body>

AngularJS1.5 以上版本 - 实例-简写方法实例

<body>
	<div ng-app="myApp" ng-controller="siteCtrl">
		<ul>
			<li ng-repeat="x in names">{{ x.Name + ', ' + x.Country }}</li>
		</ul>
	</div>
	<script>
		var app = angular.module('myApp', []);
		app.controller('siteCtrl', function($scope, $http) {
			$http.get("https://www.runoob.com/try/angularjs/data/sites.php")
					.then(function(response) {
						$scope.names = response.data.sites;
					});
		});
	</script>
</body>

AngularJS 事件

ng-click 指令

<body>
	<div ng-app="myApp" ng-controller="myCtrl">
		<button ng-click="count = count + 1">点我！</button>
		<p>{{ count }}</p>
	</div>
	<script>
		var app = angular.module('myApp', []);
		app.controller('myCtrl', function($scope) {
			$scope.count = 0;
		});
	</script>
</body>

AngularJS 支持以下事件:

ng-click
ng-dbl-click
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-keydown
ng-keyup
ng-keypress
ng-change

AngularJS 模块

模块定义了一个应用程序。
模块是应用程序中不同部分的容器。
模块是应用控制器的容器。
控制器controller通常属于一个模块module。

创建模块
你可以通过 AngularJS 的 angular.module函数来创建模块：

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []); 
</script>

注意:

在模块定义中 [] 参数用于定义模块的依赖关系。
中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。

AngularJS 输入验证

客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。

<body>
	<h2>验证实例</h2>

	<form ng-app="myApp" ng-controller="validateCtrl" name="myForm"
		novalidate>

		<p>
			用户名:<br> <input type="text" name="user" ng-model="user" required>
			<span style="color: red"
				ng-show="myForm.user.$dirty && myForm.user.$invalid"> <span
				ng-show="myForm.user.$error.required">用户名是必须的。</span>
			</span>
		</p>

		<p>
			邮箱:<br> <input type="email" name="email" ng-model="email"
				required> <span style="color: red"
				ng-show="myForm.email.$dirty && myForm.email.$invalid"> <span
				ng-show="myForm.email.$error.required">邮箱是必须的。</span> <span
				ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
			</span>
		</p>

		<p>
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  myForm.email.$dirty && myForm.email.$invalid">
		</p>

	</form>

	<script>
		var app = angular.module('myApp', []);
		app.controller('validateCtrl', function($scope) {
			$scope.user = 'John Doe';
			$scope.email = 'john.doe@gmail.com';
		});
	</script>
</body>


$dirty	表单有填写记录
$valid	字段内容合法的
$invalid	字段内容是非法的
$pristine	表单没有填写记录

AngularJS 全局 API

AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合，如：

比较对象
迭代对象
转换对象
全局 API 函数使用 angular 对象进行访问。

angular.lowercase (<angular1.7）
angular.$$lowercase()（angular1.7+）	转换字符串为小写
angular.uppercase() (<angular1.7）
angular.$$uppercase()（angular1.7+）	转换字符串为大写
angular.isString()	判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber()	判断给定的对象是否为数字，如果是返回 true。

如何使用

<body>
	<div ng-app="myApp" ng-controller="myCtrl">
		<p>{{ x1 }}</p>
		<p>{{ x2 }}</p>
	</div>
	<script>
		var app = angular.module('myApp', []);
		app.controller('myCtrl', function($scope) {
			$scope.x1 = "RUNOOB";
			$scope.x2 = angular.$$lowercase($scope.x1);
		});
	</script>
</body>

AngularJS 包含

使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容:

<div ng-include="'runoob.htm'"></div>

AngularJS 参考手册

指令	描述
ng-app	定义应用程序的根元素。
ng-bind	绑定 HTML 元素到应用程序数据
ng-bind-html	绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符
ng-bind-template	规定要使用模板替换的文本内容
ng-checked	规定元素是否被选中
ng-class	指定 HTML 元素使用的 CSS 类
ng-class-even	类似 ng-class，但只在偶数行起作用
ng-class-odd	类似 ng-class，但只在奇数行起作用
ng-cloak	在应用正要加载时防止其闪烁
ng-copy	规定拷贝事件的行为
ng-csp	修改内容的安全策略
ng-cut	规定剪切事件的行为
ng-disabled	规定一个元素是否被禁用
ng-form	指定 HTML 表单继承控制器表单
ng-hide	隐藏或显示 HTML 元素
ng-href	为 the 元素指定链接
ng-if	如果条件为 false 移除 HTML 元素
ng-include	在应用中包含 HTML 文件
ng-init	定义应用的初始化值
ng-jq	定义应用必须使用到的库，如：jQuery
ng-list	将文本转换为列表 (数组)
ng-model	绑定 HTML 控制器的值到应用数据
ng-model-options	规定如何更新模型
ng-non-bindable	规定元素或子元素不能绑定数据
ng-open	指定元素的 open 属性
ng-options	在`<select>`列表中指定 `<options>`
ng-paste	规定粘贴事件的行为
ng-pluralize	根据本地化规则显示信息
ng-readonly	指定元素的 readonly 属性
ng-repeat	定义集合中每项数据的模板
ng-selected	指定元素的 selected 属性
ng-show	显示或隐藏 HTML 元素
ng-src	指定 `<img>`元素的 src 属性
ng-srcset	指定`<img>`元素的 srcset 属性
ng-style	指定元素的 style 属性
ng-submit	规定 onsubmit 事件发生时执行的表达式
ng-switch	规定显示或隐藏子元素的条件
ng-transclude	规定填充的目标位置
ng-value	规定 input 元素的值

AngularJS 全局 API

转换

API	描述
angular.lowercase()	将字符串转换为小写
angular.uppercase()	将字符串转换为大写
angular.copy()	数组或对象深度拷贝
angular.forEach()	对象或数组的迭代函数

比较

API	描述
angular.isArray()	如果引用的是数组返回 true
angular.isDate()	如果引用的是日期返回 true
angular.isDefined()	如果引用的已定义返回 true
angular.isElement()	如果引用的是 DOM 元素返回 true
angular.isFunction()	如果引用的是函数返回 true
angular.isNumber()	如果引用的是数字返回 true
angular.isObject()	如果引用的是对象返回 true
angular.isString()	如果引用的是字符串返回 true
angular.isUndefined()	如果引用的未定义返回 true
angular.equals()	如果两个对象相等返回 true

JSON

API	描述
angular.fromJson()	反序列化 JSON 字符串
angular.toJson()	序列化 JSON 字符串

基础

API	描述
angular.bootstrap()	手动启动 AngularJS
angular.element()	包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。
angular.module()	创建，注册或检索 AngularJS 模块