Angular 常见内置指令
2017-04-26 21:03
549 查看
指令:就是扩展了HTML的基本功能,通过额外的标签、属性来增强HTML功能
Angular的指令在页面中体现出来就是一个标签\属性\class名称\注释等等
常见指令,按照指令的功能,划分为五大类
1.控制指令,用于ANGULAR应用程序加载流程控制
2.渲染指令,用于ANGULAR将数据在网页中进行展示/隐藏处理
3.节点指令,用于ANGULAR对标签、属性、样式、内容进行处理的指令、
4.事件指令,用于处理常规事件操作的指令
5.其他指令....
控制指令:
> ng-app
用于定义Angular应用入口的指令,用于[自动引导]Angular程序的运行
在定义应用程序运行入口的同时,可以绑定一个DOM元素
DOM元素的开始标签和结束标签之间~就可以认为是模块的作用范围
Angular通过ng-app指令,实现自动引导程序运行,底层是通过
bootstrap()进行模块DOM元素加载,开始运行!
ng-controller
模块中,可以给模块挂载一个或者多个控制器
挂载好的控制器在当前模块范围内,可以通过ng-controller指令来指定控制器的
作用范围
目前常规控制器的做法:
先声明模块
模块下挂载控制器>>> 控制器的作用范围仅限于当前模块!>>>局部控制器
渲染指令:
指令的作用就是将数据,渲染展示到页面上【底层是封装了DOM操作】
* ng-repeat 循环渲染指令
* ng-bind 变量渲染指令,mustache语法的替代写法
ng-repeat循环渲染指令
属性直接写在要循环的标签上!
u in users u和users就会被Angular解释成变量,获取变量中的值进行处理
节点指令:主要用于标签、样式、属性、内容的操作
ng-show
ng-hide
ng-class
ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-
show指令的值为false时元素 会被隐藏,值为true时元素会显示。ng-hide功
能类似,使用方式相反。
ng-style样式,主要用于自定义指令的时候进行样式的处理
常规使用方式和行内样式没有什么大区别
事件指令:Angular封装的用于操作事件的指令
通常是ng-[event]来命名指令,如ng-click表示单击事件
Angular中的事件处理,需要将处理函数挂载到对应控制器的$scope上
Angular的指令在页面中体现出来就是一个标签\属性\class名称\注释等等
常见指令,按照指令的功能,划分为五大类
1.控制指令,用于ANGULAR应用程序加载流程控制
2.渲染指令,用于ANGULAR将数据在网页中进行展示/隐藏处理
3.节点指令,用于ANGULAR对标签、属性、样式、内容进行处理的指令、
4.事件指令,用于处理常规事件操作的指令
5.其他指令....
控制指令:
> ng-app
用于定义Angular应用入口的指令,用于[自动引导]Angular程序的运行
在定义应用程序运行入口的同时,可以绑定一个DOM元素
DOM元素的开始标签和结束标签之间~就可以认为是模块的作用范围
Angular通过ng-app指令,实现自动引导程序运行,底层是通过
bootstrap()进行模块DOM元素加载,开始运行!
ng-controller
模块中,可以给模块挂载一个或者多个控制器
挂载好的控制器在当前模块范围内,可以通过ng-controller指令来指定控制器的
作用范围
目前常规控制器的做法:
先声明模块
模块下挂载控制器>>> 控制器的作用范围仅限于当前模块!>>>局部控制器
渲染指令:
指令的作用就是将数据,渲染展示到页面上【底层是封装了DOM操作】
* ng-repeat 循环渲染指令
* ng-bind 变量渲染指令,mustache语法的替代写法
ng-repeat循环渲染指令
属性直接写在要循环的标签上!
u in users u和users就会被Angular解释成变量,获取变量中的值进行处理
节点指令:主要用于标签、样式、属性、内容的操作
ng-show
ng-hide
ng-class
ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-
show指令的值为false时元素 会被隐藏,值为true时元素会显示。ng-hide功
能类似,使用方式相反。
ng-style样式,主要用于自定义指令的时候进行样式的处理
常规使用方式和行内样式没有什么大区别
事件指令:Angular封装的用于操作事件的指令
通常是ng-[event]来命名指令,如ng-click表示单击事件
Angular中的事件处理,需要将处理函数挂载到对应控制器的$scope上
相关文章推荐
- angular常见内置指令
- Angular入门、Angular控制器、Angular常见内置指令总结
- Angular入门 Angular控制器 常见内置指令
- Angular的内置指令
- Angular中的内置指令和自定义指令
- angular内置指令---以form为例
- angular常见指令之ng-switch应用
- Angular内置指令
- Angular 内置属性型指令
- AngularJS入门 AngularJS控制器 AngularJS常见内置指令
- AngularJS常见内置指令以及控制器
- Angular中的内置指令和自定义指令
- 关于angular中内置指令的介绍
- angular.js常用内置指令
- Angular--内置指令
- angular常用内置指令
- Angular:内置指令
- Angular 内置结构型指令
- Angular 中间部分 2.1 内置指令和表单
- Angular中的内置指令