angular

14 Apr 2014


一些概念

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.使用过滤器格式化数据

使用过滤器的语法: