AngularJS 基础点
1.是什么？
AngularJS 是一个为动态WEB应用设计的结构框架。类库有： jQuery 等框架有： knockout 、 sproutcore 等模块化这是我们通用的机制。
调用$watch()，传递一个观察的表达式和一个回调函数，当表达式改变时，将调用回调函数。
2.特点：
-
REST Client： RestFul 是主流的接口模式，而AngularJS实现RestFul 接口客户端只需要一行代码即可。
-
MVVM（Model-View-ViewModel）模式： Model 简单数据对象，View 视图（如HTML,JSP等），ViewModel是用来提供数据和方法，和View 进行交互。这种设计模式使得代码解耦合。
-
数据绑定： AngularJS是数据双向绑定。
-
依赖注入：AngularJS支持注入方式把需要的对象，方法等注入到指定的对象中。
-
指令： AngularJS内部自带各种常用指令，同时也支持开发者自定义指令。
-
HTML模板和扩展HTML： AngularJS可以定义与HTML兼容的自定义模板。
控制器 是一些类或者是你写的类型告知 Angular 哪个对象或者原型通过将他们指定到$scope 对象传递到控制器填充模型
控制器在应用中有三个作用：
在应用模型中设置初始状态
通过$scope 向视图（ UI 模板） 暴露模型和函数
监视模型发生变化的其他部分并做出相应的动作 -
如果你有复杂的界面场景，那么你可以让你的代码保持简洁、可维护。 通过创建内嵌的控制器， 通过继承结构这些控制器能够共享模型和函数。 嵌套的控制器是简单的。 你可以简单地把一个控制器给以 DOM 元素， DOM 元素里面的是另外一个控制器，就像这样：
123<divng-controller="ParentController"><divng-controller="ChildController">...</div></div>
说明：（它在作用域上发生了嵌套。 传递给内嵌控制的 $scope 继承了它父控制器的 $scope。在这种场景下，这意味着传递给ChildController 的$scope 可以访问传递给 ParentController 的$scope 的所有属性。）
MVC 背后的核心理念就是， 你在你的代码之间明确 分离管理数据（模型），应用程序逻辑（控制器），并将数据给用户（ 视图）。
视图从模型中获取数据展示给用户。当用户通过点击或者输入和应用程序进行交互时，控制器通过改变模型中的数据响应。 最终，模型层 通知视图层，已经发生改变，一边更新显示。
在 Angular 应用中， 视图层就是 DOM，控制器就 JavaScript 类， 模型数据存储在对象属
性中。
1.<html ng-app>：在<html>中添加ng-app属性即说明整个<html>都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指令，如<div ng-app>，则AngularJS脚本仅在该<div>中运行。
2.加载AngularJS脚本:
|
1
|
<
script
src
=
"http://code.angularjs.org/angular-1.1.0.min.js"
></
script
>
|
3.双向绑定:通过设置 <input> 标签里的 ng-model属性, AngularJS会自动对数据进行双向绑定。
4.{{表达式}}:是AngularJS的数据绑定。 其中的表达式可以是表达式和过滤器( {{expression | filter }} )的组合。 AngularJS提供了过滤器来对输入输出数据格式化。
5.ng-init: 初始化应用数据该指令被调用时会初始化内部作用域。这个指令一般会出现在比较小的应用中，比如给个demo什么的...
|
1
|
<
div
ng-app
=
""
ng-init
=
"names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]"
>
|
一般情况下，初始化参数不使用ng-init, 我们会使用model或controller代替它，关于model和controller 会在下面介绍到。
6.ng-bind：使用ng-bind指令输出变量 （ <p ng-bind="greeting"></p> ）
7.ng-model指令： ng-model 会绑定HTML controller 的值到应用数据。
本指令用于实现input和变量的双向绑定。
ng-model 还具有以下功能：
a.为应用数据提供类型验证（number，require,emai, 将在第七节介绍）;
b.为应用数据显示状态（invalid, dirty, touched, error, 将在第七节介绍）;
c. 为HTML 元素提供css 样式；
d. 绑定元素到表单中。
8.ng-controller:<body ng-controller='CartController'>
在 Angular 中，用 JavaScript 类管理的页面区域叫做控制器。 通过在 body 标签中包含一个控制器， 声明的 CartController 将管理 body 标签之间的任何东西。
9.scope是angularJS中的作用域(其实就是存储数据的地方)，很类似javascript的原型链 。搜索的时候，优先找自己的scope，如果没有找到就沿着作用域链向上搜索，直至到达根作用域rootScope。
$rootScope是由angularJS加载模块的时候自动创建的，每个模块只会有1个rootScope。rootScope创建好会以服务的形式加入到 $injector中。也就是说通过 $injector.get("$ rootScope ");能够获取到某个模块的根作用域。更准确的来说，$rootScope是由angularJS的核心模块ng创建的。
（scope是html和单个controller之间的桥梁，数据绑定就靠他了。rootscope是各个controller中scope的桥梁。用rootscope定义的值，可以在各个controller中使用）
10.$timeOut()函数 延时
11.ng-repeat：迭代输出 ;ng-repeat 将生成 HTML 内所有的标签的拷贝，包括它所持有的标签
<div ng-repeat='item in items'>
[ng-repeat 代表为 items 数组中每个元素拷贝一次这 div 中的 DOM。 在 div 每次拷贝中，同时设置了一个叫 item 的属性代表当前的元素， 所以我们能够在模板中使用。 正如你看到的， 每个 div 中都包含了产品名称，数量，单价，总价和一个移除按钮。]
12.ng-options 是为下拉框专门打造的标签。
|
1
|
<
select
ng-model
=
"yourSelected"
ng-options
=
"person.id as person.name in persons"
></
select
>
|
13. ng-submit:用来提交表单信息
|
1
|
<
form
ng-submit
=
"submit()"
ng-controller
=
"FormController"
>
|
14.ng-show:显示HTML 元素，值为true时显示，否则不显示
ng-hide: 隐藏HTML元素，和ng-show相反。
15.ng-if
|
1
2
|
<
input
type
=
"checkbox"
ng-model
=
"checked"
>点击试试
<
div
ng-if
=
"!checked"
>content</
div
>
<!--//!checked 和 checked-->
|
16.用$watch 观察模型变化
所有的 scope 功能函数中使用最多的就是$watch 函数， 因为当你的模型发生改变
时能够通知到
|
1
|
$watch(watchFn, watchAction, deepWatch)
|
17.过滤器的使用语法是：{{ | }}
|
1
|
{{ expression | filterName : parameter1 : ...parameterN }}
|
其中表示是可以是任何 Angular 表达式， filterName 是你想用的过滤器名称， 传递给过滤器的参数用冒号隔开。 这些参数可以是任何合法的 Angular 表达式。
Angular 自带几个过滤器，像之前看到的 currency。
|
1
|
{{12.9 | currency}}
|
显示：$12.90
自定义过滤器：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
var homeModule = angular.module('HomeModule', []);
homeModule.filter('titleCase', function() {
var titleCaseFilter = function(input) {
var words = input.split(' ');
for (var i = 0; i <
words.length
; i++) {
words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
}
return words.join(' ');
};
return titleCaseFilter;
});
<!--对应的模板-->
<
body
ng-app
=
'HomeModule'
ng-controller
=
"HomeController"
>
<
h1
>{{pageHeading | titleCase}}</
h1
>
</
body
>
<!--通过控制器赋值给模型变量-->
function HomeController($scope) {
$scope.pageHeading = 'behold the majesty of your page title';
}
|
18.ng-view标识符:告诉 Angular 我们的视图应展示在哪里。
19.$http:它有一系列的抽象扩展，使和服务器交互变得很容易。 他能够支持 HTTP， JSONP， CORS，包括安全措施防止 JSON 漏洞和 XSRF 攻击。 它能够让你传输请求与响应数据更简单，甚至可以实现简单的缓存。
常用请求类型：
GET
HEAD
POST
DELETE
PUT
JSONP
有时， 提供的标准请求选项是不够用的。这可能是因为你想要：
为请求增加一些认证头部
为请求变更如何处理缓存
以某种特定的方式，处理发出的请求，或处理收到的响应。
在这样的情形下，你可以通过传递可选的配置对象给 request 进一步配置你的请求。在先前的例子中，我们使用 config 对象来指定可选的 URL 参数。但是，即使我们使用的 GET和 POST 方法是便捷方法， 系统内部的方法调用可能像这样：
|
1
|
$http(config)
|
把 Config 对象作为最有一个参数传递给$http.get,$http.post，因此当使用任何便捷方法
时，你仍然可以使用它。
你可以通过传递 config 对象更改生成的请求，设置如下键值：
method
一个 HTTP 请求类型的字符串，比如 GET， POST
url
一个 URL 字符串，表示请求资源的绝对或相对的 URL。
params
一个字符串到字符串对象（准确的键值映射），表示键值将会转换成 URL 参数。例如：
|
1
|
[{key1: 'value1', key2: 'value2'}]
|
将转换成：
?key1=value1&key2=value2
拼接到 URL 之后。如果使用一个对象，不是字符串或数字，对于这样值，这个对象将
转换成 JSON 字符串。
data
一个字符串或者对象，作为请求消息数据发送出去
timeout
在请求处理前需要等待的毫秒数
缓存响应
AngularJS 为 HTTP GET 请求提供了一中简单缓存系统。默认对所有请求是禁用的，但是
为你的请求启用缓存，你需要做的是：
|
1
2
3
|
$http.get('http://server/myapi', {
cache: true
}).success(function() { // Handle success });
|
这样就启用缓存， AngularJS 存储来自服务器端的响应。下次相同 URL 的请求， AngularJS
从缓存中返回响应。缓存也是智能的，因此即使你发出了相同 URL 的多个模拟请求，只有
一个请求是法相服务器的，响应是用于所有的请求。
然而，从可用性角度来看这是不和谐的，因为用户可能第一次看到的是旧数据，然后新
数据突然出现了。例如，一个用户可能将要去点击一个项，然后它在他的操作下可能会改变。
请注意，响应（即使是由缓存提供的），实际上仍然是异步的。换句话说， 期望你代码
的行为正如它第一次发出的请求的那样
在请求和响应间做转换
--------------------------------------------------
scopes、module、controller
scopes
$scope是一个把view（一个DOM元素）连结到controller上的对象。在我们的MVC结构里，这个 $scope 将成为model，它提供一个绑定到DOM元素（以及其子元素）上的excecution context。
尽管听起来有点复杂，但 $scope 实际上就是一个JavaScript对象，controller和view都可以访问它，所以我们可以利用它在两者间传递信息。在这个 $scope 对象里，我们既存储数据，又存储将要运行在view上的函数。
每一个Angular应用都会有一个 $rootScope。这个 $rootScope 是最顶级的scope，它对应着含有 ng-app 指令属性的那个DOM元素。
app.run(function($rootScope) { $rootScope.name = "张三"; });
如果页面上没有明确设定 $scope ，Angular 就会把数据和函数都绑定到这里， 第一部分中的例子就是靠这一点成功运行的。
这样，我们就可以在view的任何地方访问这个name属性，使用模版表达式{{}}，像这样：
{{ name }}
module
首先需要明确一下模板的概念。在我还不知道有模板这个东西的时候，曾经用js拼接出很长的HTML字符串，然后append到页面中，这种方式想想真是又土又笨。后来又看到可以把HTML代码包裹在一个<script>标签中当作模板，然后按需要取来使用。
在ng中，模板十分简单，它就是我们页面上的HTML代码，不需要附加任何额外的东西。在模板中可以使用各种指令来增强它的功能，这些指令可以让你把模板和数据巧妙的绑定起来。
在<html>标签上多了一个属性 ng-app=”MyApp”，它的作用就是用来指定ng的作用域是在<html>标签以内部分。在js中，我们调用angular对象的module方法来声明一个模块，模块的名字和ng-app的值对应。这样声明一下就可以让ng运行起来了。
示例：
<html ng-app="demoApp">
var demoApp = angular.module('demoApp', []);
ng-controller
要明确创建一个$scope 对象，我们就要给DOM元素安上一个controller对象，使用的是ng-controller 指令属性：
<div ng-controller="MyController"> {{ person.name }} </div>
ng-controller指令给所在的DOM元素创建了一个新的$scope 对象，并将这个$scope 对象包含进外层DOM元素的$scope 对象里。在上面的例子里，这个外层DOM元素的$scope 对象，就是$rootScope 对象。这个scope链是这样的：
所有scope都遵循原型继承（prototypal inheritance），这意味着它们都能访问父scope们。对任何属性和方法，如果AngularJS在当前scope上找不到，就会到父 scope上去找，如果在父scope上也没找到，就会继续向上回溯，一直到$rootScope 上。即如果controller是多层嵌套的，就会从最里面一直往外找，这个scope链是这样的：
唯一的例外：有些指令属性可以选择性地创建一个独立的scope，让这个scope不继承它的父scope们，这个会在指令详解中说明。