简介
在学习 ionic 的路上遇到 angularjs 的一些指令什么的用法，不熟悉所以还要回来查很麻烦，所以先来系统的学一遍 angularjs 好了。
什么是angularjs
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。Angular通过指令扩展HTML的语法。
整体介绍
| 概念 | 说明 |
|---|---|
模板(Template)
|
带有Angular扩展标记的HTML |
指令(Directive)
|
用于通过自定义属性和元素扩展HTML的行为 |
模型(Model)
|
用于显示给用户并且与用户互动的数据 |
作用域(Scope)
|
用来存储模型(Model)的语境(context)。模型放在这个语境中才能被控制器、指令和表达式等访问到 |
表达式(Expression)
|
模板中可以通过它来访问作用域（Scope）中的变量和函数 |
编译器(Compiler)
|
用来编译模板(Template)，并且对其中包含的指令(Directive)和表达式(Expression)进行实例化 |
过滤器(Filter)
|
负责格式化表达式(Expression)的值，以便呈现给用户 |
视图(View)
|
用户看到的内容（即DOM）
|
数据绑定(Data Binding)
|
自动同步模型(Model)中的数据和视图(View)表现 |
控制器(Controller)
|
视图(View)背后的业务逻辑 |
依赖注入(Dependency Injection)
|
负责创建和自动装载对象或函数 |
注入器(Injector)
|
用来实现依赖注入(Injection)的容器 |
模块(Module)
|
用来配置注入器 |
服务(Service)
|
独立于视图(View)的、可复用的业务逻辑 |
Angular <script> 标签
在HTML页面底部放置 script 标签。这样可以优化应用的加载时间，因为避免了HTML加载时被 angular.js 脚步的加载阻滞。
- 选择
angular-[version].js这样一个可读的版本，用来作为开发和调试用 - 选择
angular-[version].min.js这样一个压缩版本，用来作为产品发布时用
一般会像这样<html ng-app="test">把 ng-app 放在应用的根节点中，是因为这样应用就可以自动启动 angular 了。
AngularJS 表达式(Expressions)
AngularJS 表达式写在双大括号内：{{ expression }}。
可能会有人认为Angular视图表达式就是JavaScript表达式，但这不完全正确，因为Angular并没有使用JavaScript中的'eval()'来解析表达式。你可以认为Angular表达式与JavaScript表达式有如下的区别：
- 属性解析： 所有的属性的解析都是相对于作用域(scope)的，而不像JavaScript中的表达式解析那样是相对于全局'window'对象的。
-
容错性： 表达式的解析对'undefined'和'null'具有容错性，这不像在JavaScript中，试图解析未定义的属性时会抛出
ReferenceError或TypeError错误. - 禁止控制流语句： 表达式中不允许包括下列语句：条件判断(if)，循环(for/while)，抛出异常(throw)。
另一方面，如果你想执行特定的JavaScript代码，你应该在一个控制器里导出一个方法，然后在模板中调用这个方法。如果你想在JavaScript中解析一个Angular表达式，使用$eval()方法。Angular表达式必须使用$window来指向全局的'window'对象。
举几个例子吧
<div ng-app>
<p>我的第一个表达式: {{ 5 + 5 }}</p>
</div>
输出结果：我的第一个表达式: 10
<div ng-app="" ng-init="a=1;b=5">
<p>c={{ a * b }}</p>
</div>
输出结果：c=5
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名: {{ firstName + " " + lastName }}</p>
</div>
输出结果：姓名: John Doe
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓名 {{ person.lastName }}</p>
</div>
输出结果：姓名 Doe
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>
输出结果：第三个值为 19
以上的代码，稍作改动，都可以变为ng-bind的写法，举其中一个例子
<div ng-app="" ng-init="a=1;b=5">
<p>c= <span ng-bind="a * b"></span></p>
</div>
网友评论