angularjs 简介

来源：互联网发布：淘宝网购物天猫编辑：程序博客网时间：2024/06/05 09:59

1、数据绑定

angularjs建立实时模板来代替试图，而不是将数据和并进模板之后更新DOM，自动数据绑定使我们可以将视图理解为模型状态的映射。

这种表现分离①能将应用中的对象很好地隔离开来，因此视图不需要知道如何保存对象，只要知道如何显示它即可。这也意味着数据模型不需要同视图进行交互，只需要包含数据和操作视图的方法。控制器用来存放将二者绑定在一起的
业务逻辑。

定时器：

通过视图实现数据双向绑定：

在输入字段上使用ng-model指令来实现数据绑定

<body ng-app="lio">
<div ng-controller="con">
<input type="text" ng-model="go.name"/>
<p ng-bind="go.name"></p>
</div>
</body>
<script>
angular.module('lio',[]).controller('con',function($scope){
$scope.go={name:"Lio"};
});
</script>

$timeout对象

由于JavaScript自身的特点，以及它在传递值和引用时的不同处理方式，通常认为，在视图中通过对象的属性而非对象本身来进行引用绑定，是Angular中的最佳实践。防止污染全局变量。

用$apply检测指针变化，它允许开发者使用其中的apply机制，将数据模型的变化在整个应用范围内进行通知。

2、模块

模块应用优点：

 保持全局命名空间的清洁；
 编写测试代码更容易，并能保持其清洁，以便更容易找到互相隔离的功能；
 易于在不同应用间复用代码；
 使应用能够以任意顺序加载代码的各个部分。

使用angular.module()方法来声明模块，这个方法能够接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表。requires包含了一个字符串变量组成的列表，每个元素都是一个模块名称，本模块依赖于这些模块，依赖需要在本模块加载之前由注入器进行预加载。

3、作用域（$scope）

关于scope的一些概念整理：

1、作用域（scope）①是构成AngularJS应用的核心基础，在整个框架中都被广泛使用，因此了解它如何工作是非常重要的。

2、应用的作用域是和应用的数据模型相关联的，同时作用域也是表达式执行的上下文。$scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。

3、作用域是应用状态的基础。基于动态绑定，我们可以依赖视图在修改数据时立刻更新$scope，也可以依赖$scope在其发生变化时立刻重新渲染视图。

4、作用域提供了监视数据模型变化的能力。它允许开发者使用其中的apply机制，将数据模型的变化在整个应用范围内进行通知

5、$scope对象在AngularJS中充当数据模型，但与传统的数据模型不一样，$scope并不负责处理和操作数据。

6、作用域包含了渲染视图时所需的功能和数据，它是所有视图的唯一源头。可以将作用域理解成视图模型（view model）。

7、生命周期：创建--链接--更新--销毁。

可以使用这个$scope上叫做$destory()的方法来清理这个作用域。

8、，$scope对象用来从数据模型向视图传递信息。同时，它也可以用来设置事件监听器，同应用的其他部分进行交互，以及创建与应用相关的特定业务逻辑。

我们可以创建一个控制器来管理与其相关的变量，而不用将name变量直接放在$rootScope上：
angular.module("myApp", [])
.controller('MyController',
function($scope) {
$scope.name = "Ari";
});

作用域有以下的基本功能：
 提供观察者以监视数据模型的变化；
 可以将数据模型的变化通知给整个应用，甚至是系统外的组件；
 可以进行嵌套，隔离业务功能和数据；
 给表达式提供运算时所需的执行环境。

4.控制器：

1、控制器在AngularJS中的作用是增强视图。

2、AngularJS中的控制器是一个函数，用来向视图的作用域中添加额外的功能。我们用它来给作用域对象设置初始状态，并添加自定义行为。

3、AngularJS会生成并传递一个新的$scope给这个控制器。可以在这个控制器里初始化$scope。

4、控制器可以将与一个独立视图相关的业务逻辑封装在一个独立的容器中。尽可能地精简控制器是很好的做法。作为AngularJS开发者，使用依赖注入来访问服务可以实现这个目的。

5、控制器并不适合用来执行DOM操作、格式化或数据操作，以及除存储数据模型之外的状态维护操作。

6、控制器嵌套

<body ng-app="lio">
<div ng-controller="con">
<input type="text" ng-bind="count"/>
<button ng-click="add(count)">add</button>
<button ng-click="remove(count)">remove</button>
<p ng-bind="count"></p>
<span>{{age}}</span>//父作用域不能访问子作用域的属性
<div ng-controller="two">
<input type="text" ng-model="age"/>
<p ng-bind="age"></p>
<p>{{count}}</p>
</div>
</div>
</body>
<script>
angular.module('lio',[]).controller("con",function($scope){
$scope.count=1;
$scope.add=function(i){
$scope.count=$scope.count+i;
};
$scope.remove=function(i){
$scope.count=$scope.count-i;
}
}).controller('two',function($scope){
$scope.age=18;
})
</script>

执行顺序：

<body ng-app="lio">
<div ng-controller="con">
<input type="text" ng-bind="count"/>
<button ng-click="add(count)">add</button>
<button ng-click="remove(count)">remove</button>
<p ng-bind="count"></p>
</div>
</body>
<script>
angular.module('lio',[]).controller("con",function($scope){
$scope.count=1;
$scope.add=function(i){
$scope.count=$scope.count+i;
};
$scope.remove=function(i){
$scope.count=$scope.count-i;
}
})
</script>

5、表达式

1、对表达式进行的任何操作，都会在其所属的作用域内部执行，因此可以在表达式内部调用那些限制在此作用域内的变量，并进行循环、函数调用、将变量应用到数学表达式中等操作。

2、AngularJS通过$parse这个内部服务来进行表达式的运算，这个服务能够访问当前所处的作用域。这个过程允许我们访问定义在$scope上的原始JavaScript数据和函数。

<body ng-app="lio">
<div ng-controller="con">
<input type="text" ng-model="asd"/>
<p ng-bind="asdasd"> </p>
</div>
</body>
<script>
angular.module('lio',[]).controller('con',function($scope,$parse){
$scope.$watch('asd',function(newval,oldval,scope){
if(newval!=oldval){
var parseFun=$parse(newval);
$scope.asdasd=parseFun(scope);
}
})
})
</script>

字符插值操作：

$interpolate服务是一个可以接受三个参数的函数，其中第一个参数是必需的。

text（字符串）：一个包含字符插值标记的字符串。
mustHaveExpression（布尔型）：如果将这个参数设为true，当传入的字符串中不含有表达式时会返回null。
trustedContext（字符串）：AngularJS会对已经进行过字符插值操作的字符串通过
$sec.getTrusted()方法进行严格的上下文转义。

用startSymbol()方法可以修改标识开始的符号。这个方法接受一个参数。
value（字符型）：开始符号的值。
用endSymbol()方法可以修改标识结束的符号。这个方法也接受一个参数。
value（字符型）：结束符号的值。
如果要修改这两个符号的设置，需要在创建新模块时将$interpolateProvider注入进去。

6、过滤器

内置过滤器：

1、currency

2、date

3、filter

1 0