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:指定 元素的 src 属性;

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

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

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

ng-model 指令把元素值(比如输入域的值)绑定到应用程序。它是用于表单元素的,支持双向绑定。对普通元素无效;

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

 

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

 ng-model指令可以为应用数据提供状态值(invalid、dirty、touched、error):

AngularJS学习笔记-1_第1张图片

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:

AngularJS学习笔记-1_第2张图片

 

调用指令的方式:
元素名
属性名


类名

注释

 

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

AngularJS学习笔记-1_第3张图片

 

项目实例:

AngularJS学习笔记-1_第4张图片

 

AngularJS学习笔记-1_第5张图片

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

 

 

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

转载于:https://www.cnblogs.com/kakaren/p/8570712.html

你可能感兴趣的:(AngularJS学习笔记-1)