Angular学习（十）——表达式、外部src引用

当对<img>或<a>标签进行数据绑定时，在src或href特性中利用{{ }}来对设置其引用路径时会出错。因为浏览器不支持图片和其他内容并行下载。而Angular并不会打扰数据绑定请求。一个<img>常用的语法为：

<img src="/images/cats/{{favoriteCat}}">

而现在在Angular中我们应该使用ng-src属性来对模板进行创建和修改：

<img ng-src="/images/cats/{{favoriteCat}}">

同样对于<a>标签而言，你应该使用ng-href相对应的属性：

<a ng-href="/shop/category={{numberOfBalloons}}">some Text</a>

Expression

在使用模板的时候使用表达式的目的是让你对模板、应用逻辑和数据有所考虑，但是同时也防止在模板中使用应用程序逻辑。知道现在，我们经常将数据元素的引用作为表达式传递给Angular指令。但是这些表达式能够完成更多的功能。例如做简单的算术操作（+，-，*，/，%）、逻辑比较（==，！=，>，<，<=，>=），执行布尔值逻辑（&&，||，！）和其他的比特操作（\^,&,|）。你可以调用定义在Controller中$scope范围内的函数，同时你可以引用数组和对象标记（[]，{}）。这些都是在表达式实例中常用的：

<div ng-controller="SomeController">

<div>{{recompute() /10 }}</div>

<ul ng-repeat="thing in things">

<li ng-class="{highlight:$index % 4 >= threshold($index)}">

{{otherFunction($index)}}

</li>

</ul>

</div>

你可以利用哦表达式做相当多的事情，他们是根据Angular中常用的解析器来进行计算的。这不等同与利用Javascript中的eval()，并且这些表达式相对而言更为严格。这些表达式是利用Angular中的常用解析器来执行的。在解析其中你不会发现循环结构（for，while等），控制器操作（if-else，throw）和自增自减操作（++，--）。当你需要使用这些结构时，你可以在你的控制器中进行调用或通过指令来完成。

尽管Angular中的表达式相对Javascript中的表达式更为严谨，但这些表达式经常忘记去定义和定值。而在Angular中模板仅仅是不做任何刷新，而不会抛出异常。这将允许你能够安全的使用那些未被初始化的模板值，同时能够在他们赋值的同时更新相应的UI空间。

Separating UI Responsibilities with Controllers

控制器（Controller）在应用中主要有三个作用：

1、设置应用模型的初始状态；

2、通过$scope将模型和函数提供给视图（UI模板）

3、观测模型的其他部分来来进行改变和采取措施

在之前我们已经遇到过前两个功能。我们将稍微的涉及一下最后一点。控制器概念上的作用就是在用户在与视图交互的过程中为执行用户的意愿而提供的代码和逻辑。为了保持控制器小且可控，我们建议在视图的每个功能区域中创建一个对应的控制器。也就是说，如果你有一个菜单功能，那么就创建一个MenuController，如果你有一个导航条，那么就创建一个BreadcrumbController。

一般控制器都绑定到一个他们负责管理的DOM中。有两种方式可以联系到一个DOM节点的控制器，一种是直接通过在模板其ng-controller属性中声明，另一种是通过一个route与一个乘坐view的可动态下载的DOM模板片段。

嵌套控制器很简单，其结构如下：

<div ng-controller = "ParentController">

<div ng-controller="ChildController">...</div>

</div>

尽管我们这样定义嵌套控制器，但实际的嵌套发生在scope中。嵌套子控制器的$scope继承于其父控制器的$scope。在这种情况下，传递给ChildController的$scope将拥有获取ParentController的$scope的所有属性。