angular入门 - 表达式 {{}}

AngularJS表达式和JavaScript表达式的区别

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量
AngularJS 表达式不同于 JavaScript 表达式的特征：

1. 来源于 $scope 对象
2. 容错性强 null, undefined
3. AngularJS 表达式不支持条件判断，循环及异常
4. AngularJS 表达式支持过滤器
5. $window对象
6. 可以写在 HTML 中

AngularJS表达式：{{}}

AngularJS使用表达式把数据绑定到 HTML（单向绑定数据并展示数据 ）
AngularJS表达式写在双大括号内

可与ng-bind指令互换 应用主入口页面常用ng-bind代替，防止页面初始化时闪现{{}}，影响体验

<h1>{{表达式内容}}</h1>

AngularJS表达式支持的形式

1. 值

   <!--  单纯的字符串，用单引号 -->
   <div>{{'Hello,Angular'}}</div>
   

   <!-- 字符串拼接 -->
   <div>{{'100 + 200 = '+ (100 + 200)}}</div> // 100 + 200 = 300
   

2. 运算式

   <div>{{1+2}}</div>
   

   <!--  三元表达式，但不支付if 形式 -->
   <div>{{ a? 'yes':'no'}}</div>
   

3. 布尔

4. 变量

   // controller.js
   $scope.title = '主页'
   

   <div>{{title}}</div> // 主页
   

5. 数组

6. 函数

   <div>{{ myfun() }}</div>
   

7. 过滤器

   <!--  使用过滤器 对原有的数据进行格式化 -->
   <div>{{10/3 | number:2}}</div> // 3.33 
   

8. $windows对象

AngularJS表达式不支持的形式

不支持直接写入json对象: {}
不支持直接写入循环
不支持直接写入if判断

AngularJS表达式的容错性

容错性强 null, undefined，可以屏蔽js的报错