一些概念
1.客户端模版
2.Model View Controller(MVC):angular引用了MVC的概念。
MVC背后的核心理念:你应该把管理数据的代码(model)、应用逻辑代码(controller),以及向用户展示数据的代码(view)清晰的分离开。
3.数据绑定
4.依赖注入
5.指令:angular内置命令,如双花括号实现数据绑定、ng-controller用来制定每个控制器负责监视试图中的哪一部分、ng-model,用来把输入数据绑定到模型中的一部分属性上。我们把这些叫做HTML扩展指令。
AngularJS应用骨架
1.调用angular,首先加载angular.js库;然后使用ng-app指令声明Angular的边界,告诉Angular应该管理DOM中的哪一部分。
2.Model View Controller *用来容纳数据的模型,模型代表应用当前的状态。 *用来展示数据的一些视图。 *用来管理模型和视图之间的关系的一些控制器。
3.模板和数据绑定
4.显示文本
5.表单输入
6.非入侵式JavaScript ??
7.列表、表格以及其他迭代型元素——ng-repeat
8.隐藏和显示——ng-show和ng-hide
9.css类和样式
可以使用插值语法把它们进行数据绑定,也可以使用插值的方式绑定内联样式,style="{ {some expression}}"。由于插值语法存在一些不利的方面,所以angular提供了ng-class和ng-style指令。这两个值都接受一个表达式,表达式执行的结果可能是如下取值之一:
*表示css类名的字符串,以空格分隔。
*css类名数组。
*css类名到布尔值的映射。
10.反思src和href属性——ng-src and ng-href
<img ng-src="/images/cats/{ {favoriteCat}}">
<a ng-href="/shop/category={ {numberOfBalloons}}">some text</a>
11.表达式
12.区分UI和控制器的职责
在应用中控制器有三种职责:
*为应用中的模型设置初始状态。
*通过$scope对象把数据模型和函数暴露给视图(UI模板)。
*监视模型其余部分的变化,并采取相应的动作。
嵌套控制器
<div ng-controller="ParentController">
<div ng-controller="ChildController"></div>
</div>
虽然我们把这种方式叫做控制器嵌套,但真实的嵌套发生在$scope对象上。
通过内部的原型继承机制,父控制器对象上的$scope会被传递给内部嵌套控制器的$scope。
具体到上面的例子就是,ChildController的$scope对象可以访问ParentController的$scope对象上的所有属性(和函数)。
13.利用$scope暴露模型数据
14.使用$watch监控数据模型的变化
calculateDiscount = (newValue, oldValue, scope) -> $scope.bill.discount = if newValue > 100 then 10 else 0 $scope.$watch($scope.totalCart, calculateDiscount)
15.使用Module(模块)组织依赖关系
16.使用过滤器格式化数据
使用过滤器的语法: