今天完成的事情：

学习整理

AngularJS 最常用的八种功能

第一 迭代输出之ng-repeat标签

ng-repeat让table ul ol等标签和js里的数组完美结合

<ul>

<li ng-repeat="person in persons">

{{person.name}} is {{person.age}} years old.

</li>

</ul>

你甚至可以指定输出的顺序：

<li ng-repeat="person in persons | orderBy:'name'">

第二 动态绑定之ng-model标签

任何有用户输入，只要是有值的html标签，都可以动态绑定js中的变量，
而且是动态绑定。

<input type="text" ng-model='password'>

对于绑定的变量，你可以使用{{}} 直接引用

<span>you input password is {{password}}</span>

如果你熟悉filter，你可以很容易的按你的需要格式输出

<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>

第三 绑定点击事件之ng-click事件

使用ng-click你可以很容易的为一个标签绑定点击事件。

<button ng-click="pressMe()"/>

当然前提是你要在$scope域中定义的自己的pressMe方法。

和传统的onclick方法不同，你甚至可以为ng-click方法传递一个对象，就像这样：

<ul>

<li ng-repeat="person in persons">

<button ng-click="printf(person)"/>

</li>

</ul>

当然还有ng-dblclick标签

第四 分支语句之ng-switch on、ng-if/ng-show/ng-hide/ng-disabled标签
分支语句让你在界面上都可以写逻辑判断。

<ul>

<li ng-repeat="person in persons">

<span ng-switch on="person.sex">

<span ng-switch-when="1">you are a boy</span>

<span ng-switch-when="2">you are a girl</span>

</span>

<span ng-if="person.sex==1">you may be a father</span>

<span ng-show="person.sex==2">you may be a mother</span>

<span>

please input your baby's name:<input type="text" ng-disabled="!person.hasBaby"/>

</span>

<span>

</li>

</ul>

第五 校验语法之ng-trim ng-minlength ng-maxlength required ng-pattern 等标签

表单中的输入框，你可以使用上面的标签来实现对用户输入的校验。
从字面意思上你已经知道了它们的意思。

<form name="yourForm">

<input type="text" name="inputText" required ng-trim="true" ng-model="userNum" ng-pattern="/^[0-9]*[1-9][0-9]*$/" ng-maxlength="6" maxlength="6"/>

</form>

你可以通过 $scope.yourForm.inputText.$error.required 来判断输入框是否为空
你可以通过 $scope.yourForm.inputText.$invalid 来判断输入的内容是否满足ng-pattern，ng-maxlength，maxlength
你通过$scope.userNum获得的输入内容是去掉前后空白的，因为ng-trim的存在。

第六 下拉框之ng-options标签

ng-options是为下拉框专门打造的标签。

<select ng-model="yourSelected" ng-options="person.id as person.name in persons"></select>

下拉框中显示的是person.name，当你选中其中一个的时候，你可以通过yourSelected得到你选中的person.id.

第七 控制css之ng-style标签

ng-style帮你轻松控制你的css属性

<span ng-style="myColor">your color</span>

你可以通过给myColor赋值的形式来改变你想要的效果，就像这样：

$scope.myColor={color:'blue'};

$scope.myColor={cursor: 'pointer',color:'blue'};

第八  异步请求之$http对象。

AngularJS 提供了一个类似jquery的$.ajax的对象，用于异步请求。
在AngularJS中对异步操作是推崇至极的，所以$http的操作都是异步的不像jquery.ajax里还提供了async参数。

$http({method : 'POST',params : { id:123}, data:{name:'john',age:27}, url : "/mypath"})

.success(function(response, status, headers, config){

//do anything what you want;

})

.error(function(response, status, headers, config){

//do  anything what you want;

});

如果你是POST请求，params里的数据会帮你拼到url后面，data里的数据会放到请求体中。

AngularJS有五个主要核心特性，如下介绍：

双向数据绑定 —— 实现了把model与view完全绑定在一起，model变化，view也变化，反之亦然。

模板 —— 在AngularJS中，模板相当于HTML文件被浏览器解析到DOM中，AngularJS遍历这些DOM，也就是说AuguarJS把模板当做DOM来操作，去生成一些指令来完成对view的数据绑定。

MVVM —— 吸收了传统的MVC设计模式针但又并不执行传统意义上的MVC，更接近于MVVM(Moodel-View-ViewModel)。

依赖注入 —— AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。

指令 —— 可以用来创建自定义的标签，也可以用来装饰元素或者操作DOM属性。

指令介绍

AngularJS有一套完整的、可扩展的、用来帮助web应用开发的指令集，它使得HTML可以转变成“特定领域语言(DSL)”，是用来扩展浏览器能力的技术之一，在DOM编译期间，和HTML关联着的指令会被检测到，并且被执行，这使得指令可以为DOM指定行为，或者改变它。

AngularJS通过称为指令的新属性来扩展的HTML，带有前缀ng-，我们也可以称之为“指令属性”，它就是绑定在DOM元素上的函数，可以调用方法、定义行为、绑定controller及$scope对象、操作DOM，等等。

AngularJS指令指示的是“当关联的HTML结构进入编译阶段时应该执行的操作”，它本质上只是一个当编译器编译到相关DOM时需要执行的函数，可以写在元素的名称里，属性里，css类名里，注释里。

当浏览器启动、开始解析HTML时，DOM元素上的指令属性就会跟其他属性一样被解析，也就是说当一个Angular.js应用启动，Angular编译器就会遍历DOM树来解析HTML，寻找这些指令属性函数，在一个DOM元素上找到一个或多个这样的指令属性函数，它们就会被收集起来、排序，然后按照优先级顺序被执行。

Angular.js应用的动态性和响应能力，都要归功于指令属性，常见的有：ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。

关于“指令属性”就先暂时介绍这些，相信你已经对它有初步的了解，接下来我们就开始逐一的深入的学习它们。

指令：ng-app

ng-app指令来标明一个AngularJS应用程序，并通过AngularJS完成自动初始化应用和标记应用根作用域，同时载入和指令内容相关的模块，并通过拥有ng-app指令的标签为根节点开始编译其中的DOM。

引用方法很简单，如下所示：

 View Code

如上引用，一个AngularJS应用程序初始化就完成了并标记了作用域，也就是div元素就是AngularJS应用程序的"所有者"，在它里面的指令也就会被Angular编译器所编译、解析了。

指令：ng-init

ng-init指令初始化应用程序数据，也就是为AngularJS应用程序定义初始值，通常情况下，我们会使用一个控制器或模块来代替它，后面我们会介绍有关控制器和模块的知识。

<div ng-app="" ng-init="name='Hello World'">

AngularJS表达式

AngularJS框架的核心功能之一 —— 数据绑定，由两个花括号{{}}组成，可以把数据绑定到HTML，类似Javascript代码片段，可以包含文字、运算符和变量，通常在绑定数据中用到，表达式可以绑定数字、字符串、对象、数组，写在双大括号内：{{ expression }}。

<div ng-app="" ng-init="name='Hello World'">

  {{ name }}

</div>

指令：ng-model

在AngularJS中，只需要使用ng-model指令就可以把应用程序数据绑定到HTML元素，实现model和view的双向绑定。

 View Code

指令：ng-bind

指令ng-bind和AngularJS表达式{{}}有异曲同工之妙，但不同之处就在于ng-bind是在angular解析渲染完毕后才将数据显示出来的。

<div ng-app="">

    请输入一个名字：<input type="text" ng-model="name" />

    Hello <span ng-bind="name"></span>

</div>

指令：ng-click

AngularJS也有自己的HTML事件指令,比如说通过ng-click定义一个AngularJS单击事件。

复制代码

1 <div ng-app="" ng-init="click=false">

2     <button ng-click="click= !click">隐藏/显示</button>

3     <div ng-hide="click">

4         请输入一个名字：<input type="text" ng-model="name" />

5         Hello <span ng-bind="name"></span> 

6     </div>

7 </div>

复制代码

控制器

AngularJS控制器控制AngularJS应用程序的数据，是常规的JavaScript对象。

ng-controller指令就是用来定义应用程序控制器的，并且同时创建了一个新的作用域关联到相应的DOM元素上。

所谓作用域就是一个指向应用模型的对象，它是表达式的执行环境，作用域有层次结构，这个层次和相应的DOM几乎是一样的，作用域能监控表达式和传递事件并且可以从父作用域继承属性。

每一个AngularJS应用都有一个绝对的根作用域。但也可能有多个子作用域。 一个应用可以有多个作用域，因为有一些指令会生成新的子作用域，当新作用域被创建的时候，他们会被当成子作用域添加到父作用域下，这使得作用域会变成一个和相应DOM结构一个的树状结构。

控制器

现在我们就用ng-controller指令来创建一个简单的控制器定义，如下所示：

复制代码

<div ng-app="" ng-controller="MyController">

请输入一个名字：<input type="text" ng-model="person.name"> 

Hello <span ng-bind="person.name"></span> 

</div>    

<script>

function MyController($scope) {

   $scope.person = {

      name: "World"

   };

}

</script>

MyController对象参数 —— $scope。

$scope就是把一个DOM元素连结到控制器上的对象，它提供一个绑定到DOM元素(以及其子元素)上的执行上下文。它也是一个JavaScript对象，指向应用程序作用域内的所有HTML元素和执行上下文。作用域呢，就是作为$scope的数据属性关联到DOM上的，并且能在需要调试的时候被获取到。

要明确创建一个$scope对象，我们就要给DOM元素安上一个controller对象，使用的是ng-controller 指令属性。

所有$scope都遵循原型继承，这意味着它们都能访问父$scope们,对任何属性和方法，如果AngularJS在当前$scope上找不到，就会到父$scope上去找，如果在父$scope上也没找到，就会继续向上回溯，一直到$rootScope上，这个$rootScope是最顶级的$scope，它对应着含有 ng-app指令属性的那个DOM元素，也就是说根作用域关联的DOM就是ng-app指令定义的地方。

也就是说，拥有了$scope，我们就可以操作作用域内任何我们想要获取的对象数据。

控制器

控制器不仅声明属性也可以声明方法，如下所示：

当然如果是开发条件的需要，我们也可以将控制器写在外部文件中，那如上示例该怎么做呢，很简单，如下简单引用即可：

<script src="MyController.js"></script>

 1 <div ng-app="" ng-controller="MyController">

 2      Your name:

 3      <input type="text" ng-model="username">

 4      <button ng-click="sayHello()">打招呼</button>

 5      <hr />

 6      {{greeting}}

 7 </div>

 8  

 9 <script>

10 function MyController($scope) {

11   $scope.username = 'World';

12   $scope.sayHello = function() {

13     $scope.greeting= 'Hello ' + $scope.username + '!';

14   };

15 }

明天要做的事：

继续学习接口与交互

遇到的问题：

暂无

收获：

找到好多js的功能组件啊，看了组件代码后对它的写法有了更深的理解