本文深入讲解AngularJS框架，包括其双向绑定机制、MVC模式设计、指令使用、表达式处理、模块与控制器的概念及实现方式。并通过实例演示如何创建模块、控制器，以及使用$scope对象进行数据绑定。
AngularJS
1. 前端框架AngularJS提供双向绑定机制，只要用指令将HTML元素与模型中的变量进行了绑定，然后用JS脚本修改被绑定变量的值，HTML元素的内容、CSS样式就都会随之发生改变。2. AngularJS按照MVC(或MVVM)模式来设计前端应用，将前端应用严格划分为视图、控制器(或视图模型)、调度器三种组件，并提供了依赖注入来管理各组件之间的依赖关系。
3. 使用AngularJS可以不写任何JavaScript脚本，只要为原来的 HTML标签增加一些额外的属性（它们是AngularJS 的指令）即可。
理解AngularJS的基本设计
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<--导入angularJS-->
<script src="https://cdn.staticfile.org/angular.js/1.6.2/angular.min.js"></script>
</head>
<body ng-app ng-init="a=0;b=0">
商品价格：<input type="number" min="0" ng-model="a" /><p>
商品数量：<input type="number" min="0" ng-model="b" /><p>
总价：{{a*b}}
</body>
</html>
| 项目 | Value |
|---|---|
| ng-app | 用于在某标签内设置AngularJS应用 |
| ng-model | 用于执行"双向绑定" |
| ng-bind | 用于将表达式的值绑定到HTML元素的innerHTML |
| ng-init | 用于声明变量，该指令的属性值可声明一个或多个变量，多个变量直接用分号隔开即可 |
| ng-controller | 用于定义某个模块包含的控制器 |
| ng-click | 用于为html标签的单击事件指定事件处理函数名称(可自定义名称) |
- 导入angularJS：
在 script 标签里加上 src=“https://cdn.staticfile.org/angular.js/1.6.2/angular.min.js” - 使用{{}}来输出表达式
- 所谓双向绑定指的是将HTML输入元素的值与AngularJS应用的某个变量进行绑定。
完成"双向绑定"之后，当HTML输入元素的值发生改变时，AngularJS应用中绑定的变量的值也会随之改变；反过来，当程序修改AngularJS应用的变量的值时，HTML输入元素的值也会随之改变。
表达式
AngularJS表达式主要用于在HTML页面上生成输出，AngularJS表达式与普通JavaScript表达式类似，同样支持变量以及各种运算符。只要将AngularJS的表达式放在{{}}中即可。
简单表达式
AngularJS的简单表达式既可由直接量（包括数值、字符串、boolean值等），也可由变量组成。
直接量类型
一般来说，JavaScript可以处理的表达式，AngularJS都可以正常处理.
<body ng-app>
{{4*8+10/2}}<p>
{{'十几万'+'挖墙脚'}}<p>
{{'sdsw'+4+8}}<p>
{{'sasa'+(4+8)}}
</body>
AngularJS还提供了ng-bind指令，该指令用于将表达式的值绑定到HTML元素（如＜span…/＞、＜div…/＞、＜p…/＞等）的innerHTML，这样这些 HTML 元素也用于显示 AngularJS表达式的值
<body ng-app>
<p ng-bind="8+8"></p>
<p ng-bind="'得分'+8+8"></p>
<p ng-bind="'defwe'+(8+8)"></p>
</body>
变量表达式
AngularJS表达式也可以处理变量，ng-init用于声明变量，该指令的属性值可声明一个或多个变量，多个变量直接用分号隔开即可
<body ng-app ng-init="a=0;b=0">
商品价格：<input type="number" min="0" ng-model="a" /><p>
商品数量：<input type="number" min="0" ng-model="b" /><p>
总价：{{a*b}}
</body>
复合对象表达式
AngularJS 表达式也支持使用对象、数组等复合类型。
1.使用对象：
使用ng-init指令初始化了一个item对象，该对象包含price和number两个属性。
<div ng-app ng-init="item={price:50,number:2}">
商品价格：<input type="number" min="0" ng-model="item.price" /><p>
商品数量：<input type="number" min="0" ng-model="item.number" /><p>
总价：{{item.price*item.number}}
</div>
2.使用数组：
<div ng-app ng-init="users=[{name:'小狗',age:12},{name:'小猫',age:8},{name:'鸭子',age:20}]">
{{users[0].name}}的年龄是{{users[0].age}}<p>
{{users[1].name}}的年龄是{{users[1].age}}<p>
{{users[2].name}}的年龄是{{users[2].age}}<p>
</div>
模块与控制器
模块是AngularJS页面最重要的组成单元，每个模块相当于一个独立的AngularJS应用。模块是一系列服务（service、指令、控制器、过滤器和配置信息）的集合。控制器是模块的下一级程序单元，也表示AngularJS模块内的重要作用域。
模块的加载
-
AngularJS模块的加载：
- ➢ 匿名模块（就是没有为ng-app指定属性值或属性值为空字符串），此时AngularJS可以自动加载并创建AngularJS模块。
➢ 命名模块（为ng-app指定了属性值，该属性值就是该模块的名称），此时必须调用angular对象的module()方法来创建AngularJS模块。
创建命名模块需要调用angular对象的module()方法：
- angular.module( name , [requests] , [configFn] );
1. 该方法的第一个参数指定要创建的模块名
2. 第二个参数是一个数组，指定创建该模块时需要依赖的模块
3. 第三个参数用于传入一个配置函数。
<body>
<div ng-app="brrby">
<input type="text" ng-model="a" /><p>
{{a}}
</div>
<script>
//加载命名模块
var app=angular.module("brrby",[]);
</body>
-
模块创建完成之后，可调用模块的如下两个方法为模块添加全局变量或常量
- ➢ value（name，value）：添加全局变量
➢ constant（name，value）：添加全局常量
使用value()方法或constant()方法添加的变量或常量可被本模块内的任意控制器访问。
控制器
一个模块可包含多个控制器，模块可调用controller()方法来注册控制器。
ng-controller用于定义某个模块包含的控制器
<body>
<div ng-app="app1" ng-controller="app1_ctrl">
<input type="text" ng-model="name"/>
</div>
<script>
var app1=angular.module("app1",[]);
app1.value("name","小汉");
app1.controller("app1_ctrl",function(name){
alert(name);
});
</script>
</body>
$scope对象
调用模块的controller()方法注册控制器时，传入的第二个参数是一个函数，在该函数中可声明一个$scope形参，该形参就表示了AngularJS控制器对应的作用域。
通过$scope作用域指定的属性，和HTML中ng-model对应的变量是双向绑定的，也可自动显示在与指定ng-bind绑定的HTML元素中。
<body>
<div ng-app="app1" ng-controller="app1_ctrl">
<input type="text" ng-model="name"/>
</div>
<script>
var app1=angular.module("app1",[]);
app1.value("name","小汉");
app1.controller("app1_ctrl",function($scope,name){
$scope.name="撒旦";
alert(name);
});
</script>
</body>
点击alert确定后：
此外也可通过$scope为控制器作用域设置方法（相当于函数）
ng-click指令为html标签的单击事件指定事件处理函数名称
<body >
<div ng-app="brrby" ng-controller="brrby-ctrl">
<button ng-click="cli()">点击我计数</button>
单击了{{count}}次
</div>
<script>
//根据名称来创建模块(创建命名模块)
var app=angular.module("brrby",[]);
app.controller("brrby-ctrl",function($scope){
$scope.count=0;
//设置按钮的自定义点击的函数cli
$scope.cli=function(){
$scope.count++;
}
});
</script>
</body>
不管使用AngularJS的指令"双向绑定"变量，还是使用表达式输出AngularJS变量，
还是使用AngularJS指令绑定事件处理函数，这些变量、函数都应该是$scope作用域内的。
扫一扫
757
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
