angular Js 学习笔记（一）

（1）简介

1.goole 开发，减少开发应用AJAX试用

2.客户端模板：模板和数据都被发送到浏览器中，然后在客户端装配；

3.mvc模式：view层-- Document Object Model

                      control层-- javascript类

                     模型数据--存储在对象的属性

4.数据绑定：mvvm 模式

                      自动将model和view间数据同步，view始终是model的投影，model发生变化，自动反映到view上；

                      单向数据绑定：模版和model合并，不会自动反映，需要不断同步数据（ajax操作）；（经典模板）

                      anguler的数据绑定：模版在浏览器编译，产生实时更新视图；

5.依赖注入：软件设计模式，处理代码数据依赖关系 

                       依赖和注入：a传入b，b依赖于a，a注入了b；

                       依赖注入：系统自动注入a到b中；

（2）数据绑定

1.ng-app 嵌入html元素 告诉anguler应该管理页面哪一块 

2.anguler表达式  js 表达式：eval（xxx）；对window对象；

                             anguler表达式：{{XXX}}；对scope对象；宽容不报错；没有流程控制语句；

3.ng-model  表示html元素value指向key。<input ng-model="name" value="" />

                    数据双向绑定，view会实时改变；

（3）控制器

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

2. 声明js控制器    var controller= function($scope){

//$scope 为作用域

//声明model

$scope.name="xx";

 

 }

3.ng-bind指令  html 加载时间延迟 替换scope作用域内容

4多个控制器和作用域 

（4）$scope 里的$apply、 $digest 方法

1.scope 为指向应用model的object，表达式执行上下文

2.脏检查 检查绑定到html的属性；初始化angular 会给属性添加watcher；

3.apply 通过digest触发脏检查 

4.watch 方法 观察value与上次执行是否一致 model每次改变都会触发

（5）常用方法

1.ng-repeat<tr ng-repeat=“item in xx”>

<td>{{xx.xx}}</td>

<td>{{xx.xx}}</td>

<td>{{xx.xx}}</td>

 </tr>

2.ng-click事件 点击触发事件

（6）模块

  1.模块  声明应用如何启动 

定义 angular.module("myAPP",[]);

（7）自动注入

1.$provider 该对象用来实现自动依赖注入机制，调用$get()方法，把得到对象进行相关调用

                    自定义服务：$provide.provider("service",function(){

this.$get =function(){

return{

message:"service message";

 }

}

 })

  2.  $provider    factory 方法 

      // 自定义工厂

$provide.factory("service",function(){

return 　[2,2,3];

}

 })

//自定义服务

$provide.service("service",function(){

return 　[2,2,3];

}

 })

3.多个控制器数据共享

方法一：　$scope.data = $scope.$$prevSibling.data;//获取上一个scope

方法二： factory：自动注入；