AngularJS学习笔记-1

官方推荐的模块切分方式：

1.任何一个ng应用都是由控制器、指令、服务、路由、过滤器等有限的模块类型构成的

2.指令、服务、路由、过滤器分别放在一个模块里边

3.用一个总的app模块做为入口点，它依赖其它全部模块

4.Provider/factory/service/constant/value

5.Provider是基础，其他都是调用provider函数实现的，只是参数不一样 从左向右，灵活性愈来愈差

 

Provider模式与ng实现：

1.Provider模式是策略模式和工厂模式的综合体

2.核心目的是为了让接口和实现分离 在ng中，全部provider均可以用来进行注入: provider/factory/service/constant/value

3.如下类型的函数能够接受注入： Controller/directive/filter/service/factory等

4.Ng中的“依赖注入”是经过provider和injector这两个机制联合实现的

5.Ng的三种注入方式：推断式注入，标注式注入，内联注入（ng中最简单的依赖注入）

6.Injector源码分析：建立、注册、调用

7.发布ng提供的API：publishExternalAPI(angular)

8.尝试绑定jQuery:bindjQuary()

 

经常使用指令：

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-repeat 指令对于集合中（数组中）的每一个项会 克隆一次 HTML 元素。

ng-list:将文本转换为列表；

ng-model-options:规定如何更新模型；

ng-src：指定 <img> 元素的 src 属性；

ng-transclude:规定填充的目标位置；

ng-annotate:添加和删除AngularJS依赖注入注释；

ng-cloak:在应用正要加载时防止其闪烁;

ng-model 指令把元素值（好比输入域的值）绑定到应用程序。它是用于表单元素的，支持双向绑定。对普通元素无效；

ng-bind用于普通元素，不能用于表单元素，应用程序单向地渲染数据到元素；当ng-bind和{{}}同时使用时，ng-bind绑定的值覆盖该元素的内容。

 

具体介绍一下ng-model指令：

 ng-model指令能够为应用数据提供状态值（invalid、dirty、touched、error）:

ng-model 指令根据表单域的状态添加/移除如下类：
ng-empty
ng-not-empty
ng-touched：布尔值属性，表示用户是否和控件进行过交互

ng-valid：布尔型属性，它指示表单是否经过验证。若是表单当前经过验证，他将为true
ng-invalid：未经过验证的表单
ng-dirty：布尔值属性，表示用户是否修改了表单。若是为 ture，表示有修改过；false 表示修没有修改过
ng-pending：任何为知足$asyncValidators的状况；
ng-pristine：布尔值属性，表示用户是否修改了表单。若是为true，表示没有修改过；false表示修改过

 

建立自定义的指令
除了 AngularJS 内置的指令外，咱们还能够建立自定义指令。
你可使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上须要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时须要以 - 分割, runoob-directive:

 

调用指令的方式:
元素名 <runoob-directive></runoob-directive>
属性名 <div runoob-directive></div>
类名 <div class="runoob-directive"></div>
注释 <!-- directive: runoob-directive -->

 

限制使用:
你能够限制你的指令只能经过特定的方式来调用。
restrict 值能够是如下几种:
E 做为元素名使用
A 做为属性使用
C 做为类名使用
M 做为注释使用
restrict 默认值为 EA, 便可以经过元素名和属性名来调用指令。

 

项目实例：

 

1. 当同时调用first和second时,只有first生效,两个template不会同时出现。
2. 当设置了 scope:{} 以后,{{name}}获取不到了,缘由就是做用域的问题,想要设置这里的name的值,能够再加一个controller的字段。

 

 

参考连接：http://www.runoob.com/angularjs/angularjs-tutorial.html