Angular常用指令小结
2017-03-02 10:55
302 查看
Angular
Angular简介
一款非常优秀的前端高级 JS 框架最早由 Misko Hevery 等人创建
2009 年被 Google 公式收购,用于其多款产品
目前有一个全职的开发团队继续开发和维护这个库
有了这一类框架就可以轻松构建 SPA 应用程序
其核心就是通过指令扩展了 HTML,通过表达式绑定数据到 HTML。
Angular 与 jQuery
jQuery: 库提供了一些已有的方法,我们主动调用它。
$(‘.test’).val()
Angular: 框架
框架提供了一种结构或者模式
我们按照它提供这种结构或者模式去书写代码
框架会帮助我们去剩下的事情
jQuery提高了dom操作的效率
Angular不推崇dom操作
angular.element方法, 使用方式和jquery非常像,最终得到一个jqLite对象
可以把angular.element当作jQuery的$来用,
注意angular.element 要求传入的参数是一个原生的dom对象,而不是选择器
指令
在angular中以ng-开头的html标签属性,称之为指令ng-app: 选择angular去管理哪一部分的html代码, 管理的是ng-app所在
元素的子元素及其本身
ng-click: 也是用来注册点击事件
ng-model: 可以指定一个属性值,这个属性就表示当前文本框的value值
ng-init: 可以对数据进行初始化操作,给一个默认值。
模块
创建模块:var app = angular.module('模块名',[])
注意 如果不依赖其他模块,也需要提供一个空的数组
需要在ng-app指令的属性值上写我们的模块名
控制器
创建控制器:app.controller('控制器的名字',function($scope){})
如果要改变页面{{testName}}的值,就改变$scope.testName值就可以
注意 要显示数据模型的值,就要在它所在标签或者父标签上加上ng-controller指令
ng-controller的值就是我们想要显示的数据模型所在控制器的名字
:ng-controller=”window”
双向数据绑定
数据模型($scope.属性)的改变,会影响内容的显示(文本框的值)我们改变了文本框的值,对应的数据模型发生了改变.
这种相互影响的关系就称之为双向数据绑定.
MVC 思想
M : Model: 存储,获取数据V : View 视图,把数据呈现给用户
C : Controller 做一些控制和调度的操作
Angular开发流程
1.在html中引入angular.js文件2.在html中加上ng-app指令,告诉angular要管理页面哪一部分代码
3.在js中创建模块
angular.module('myApp',[]),给ng-app指令一个值,
这个值就是这个模块的模块名:myApp
4.在js中创建控制器
xxx.controller('控制器名字',function($scope){}),我们需要在页面上加上ng-controller指令,指令的值为控制器的名字
ng-controller="控制器名字"
5.建模:根据页面结构,抽象出具体的js对象.
6.通过$scope做一些初始化操作
$scope.username="小明"
7.通过
ng-model , ng-click , {{}}把$scope的属性在页面展示出来
8.在js写一些具体的逻辑
安全的方式创建控制器
就是为了避免压缩后代码无法运行// 把第二个参数改为一个数组,在数组把我们需要的参数的名字写上 // 回调函数就写在数组的最后一个元素上 // *注意*:数据中传入的元素的顺序,要和function的中顺序一一对应 app.controller('demoController',['$scope','$log',function($scope,$log){ $scope.msg = 'hello World!' $log.log('哈哈哈哈!') }])
指令
ng-bind
可以解决表达式闪烁问题:<p ng-bind="msg"> </p>浏览器不会把标签的属性显示出来!
效果:angular会把ng-bind对应的数据显示到所在标签中间
ng-cloak
可以解决表达闪烁问题:<div class="ng-cloak"><p>{{msg}}</p></div>先隐藏后显示
angular在解析表达式之后会把页面上的ng-cloak样式移除,
这样ng-cloak对应的样式就不生效了,我们就先给ng-cloak设置display:none;
ng-repeat
能够把一组数据直接渲染到页面上,不需要我们拼接字符串我们希望重复的是哪个元素就把ng-repeat指令加在哪个元素上,不一定是li上
ng-repeat=”item in data” , item对应的是遍历data时的每一一条数据,data是我们 要遍历的数据(是一个数组)
<!-- ng-repeat 遍历生成数据,类似for in 循环的语法 --> <li ng-repeat="item in users" > {{item.name}} , {{item.age}} </li>
ng-repeat补充
数据中有完全相等的项时会报错,这时候要用ng-repeat="item in data track by $index"
ng-repeat 在遍历时会提供以下值:
$odd : 为true时,表明当前数据是第[奇]数条
$even: 为true时,表明当前数据是第[偶]数条
$first: 为true时,表明当前数据是第1条
$last: 为true时,表明当前数据是最后一条
$middle: 为true时,表明当前数据是否是中间(非第一和最后)的数据
ng-class
ng-class 可以帮助我们控制元素的class样式,ng-class 可以独立在其他元素上使用,并非一定要和ng-repeat结合
<!-- ng-class,动态的添加class样式, 以对象的形式书写,angular会把属性值为true的属性名当作样式添加到class class="green" --> <li ng-class="{ red : item.age>=20, green : item.age>=10&&item.age<20, blue : item.age<10 }" ng-repeat="item in data"> {{item.name}},{{item.age}} </li>
ng-show/ng-hide
控制元素的显示与否,ng-show与ng-hide作用是相反的(只是设置display:none来隐藏元素)<!-- ng-show,控制元素的显示或隐藏,值为true时显示,为false隐藏--> <p ng-show="isShowing">ng-show值为true时显示</p> <!-- ng-hide 值为true时,隐藏当前元素 --> <p ng-hide="true">ng-hide值为true时隐藏</p>
ng-if
控制元素的显示与否:值为false时,元素会从dom移除<!-- ng-if,也能控制元素的显示或隐藏,为true时显示,为false时【会将当前dom元素移除】 --> <p ng-if="true">这个标签不会被移除</p> <h1>ng-if="false"</h1> <p ng-if="false">这个标签会被移除</p>
ng-switch
当ng-switch-when 对应的值等于ng-switch对应值时,当前dom元素就显示<div ng-switch="name"> <div ng-switch-when="小明"> 我是小明,我在这里! </div> <div ng-switch-when="小红"> 我是小红! </div> </div>
其他常用指令
ng-checked:单选/复选是否选中,(单向数据绑定:界面操作不会影响数据模型的值) ng-model:双向数据绑定
ng-selected:
是否选中
ng-disabled:
是否禁用
ng-readonly:
是否只读
常用事件指令
不同于以上的功能性指令,Angular还定义了一些用于和事件绑定的指令:ng-blur:失去焦点
ng-focus: 获得焦点
ng-change:内容改变
ng-copy:复制
ng-click: 点击
ng-dblclick:双击
ng-submit: form表单提单
指令的其他使用方式
data-xxx,在使用angular指令时,只需要在原先的指令前加上data-前缀。如: data-ng-app,data-ng-click
x-ng-app,x-ng-click
自定义指令
自定义指令无外乎增强了HTML,提供了额外的功能。内部指令基本能满足我们的需求。
少数情况下我们有一些特殊的需要,可以通过自定义指令的方式实现
创建自定义指令
注意: 名字要符合驼峰合法// 1.创建模块对象 var app = angular.module('directiveApp', []) // 2.创建自定义指令 // 第一个参数:是指令的名字,必须是驼峰命名法 // 使用时把大写改成小写,在原来大写前加上- // 第二个参数:和控制器的第二个参数类似! app.directive('myBtn', [function(){ // 在这里直接return 一个对象就可以了 return { // template属性,是封装的ui template:'<div><button>我是按钮</button></div>' } }])
自定义指令中回调里返回的对象的属性
template: 需要提供一个html字符串,最终会被添加到当前页面使用了自定义指令的位置templateUrl:需要提供一个html文件路径,angular会发请求,请求对应的文件,
把文件内容作为模板插入到自定义指令中间
: 也可以提供一个script标签的id, angular会把script标签中的内容作为
模板插入到自定义指令中间,注意 要(必须)改变script标签的type=”text/ng-template”
restrict: 也是需要提供一个字符串,限制自定义指令的使用形式
A : Attribute 表示只能以属性的形式使用
C : Class 表示只能以类样式名的形式使用
E : Element 表示只能以自定义标签的形式使用
M : comments 表示只能以注释的形式使用 <– directive:自定义指令名 –>
ACE : 如果希望多种方式合适,就把对应值组合在一起。
replace:需要提供一个布尔值,为true时,模板会被用来替换自定义指令所在标签,
* 否则是插入到自定义指令中间
transclude: 需要一个布尔值, 为true时会将自定义标签中的内容插入到模板中,
* 拥有ng-transclude 指令的标签中间
scope:需要一个对象: 可以用来获取自定义指令的属性值,
给当前对象添加一个属性(如:tmp),属性值以@开头,后面跟上自定义指令的属性名
然后就可以在模板中使用{{tmp}} 来得到对应的属性值
scope: { tmp:'@mystyle'}{{tmp}}
scope: { mystyle:'@'}{{mystyle}}
link: 需要一个function 这是function在angular解析到相应指令时就会执行一次,参数如下
scope :类似于$scope,只不过scope的属性只能在模板和自定义指令中使用
element : 自定义指令所在标签对应的对象(jqLite)
attributes : 包含了自定义指令所在标签的必有属性
过滤器(filter)
格式化数据过滤数据(filter)
<ul> <!-- 如果指定一个布尔值,或者字符串就是全文匹配 --> <!-- 会到对应的data中寻找,如果当前遍历到的元素有completed属性且值 为true就会被显示出来。(只会到completed属性中寻找) --> <li ng-repeat="item in data | filter : {completed:true} "> {{item.name}},{{item.completed}} </li> </ul>
<!-- 在数据模型后加上| 再加上过滤器的名字 也可以在过滤器名字后指定参数,参数是写在冒号后面的--> <p>{{money | currency : '¥'}}</p> <p>{{myDate | date : 'yyyy年MM月dd日 HH:mm:ss'}}</p>
limitTo
<h1>limitTo</h1> <!-- 第一个参数,表明显示多少个字,第二个参数表示,从第几个字开始显示(索引从0开始) --> <p>{{msg | limitTo : 5 : 2}}...</p>
orderBy 及 json
<h1>json</h1> <!-- 格式化显示json数据,参数指定缩近的长度 --> <pre>{{myJson | json : 8}}</pre> <h1>orderBy</h1> <!-- 对数据进行排序,参数,给+号就按正序排,- 就按倒序排 --> <span ng-repeat="item in arr | orderBy:'-'">{{item }},</span>
在js中使用过滤器
<!-- $filter 需要在控制器的回调中传入 --> // 可以调用不同的过滤器得到相应的结果 // 参数是一个过滤器的名字 // 返回值是一个方法 // : 第一个参数是需要处理的数据 // : 后面的参数是当前过滤器本身需要的参数 $scope.result = $filter('currency')($scope.money,'¥')
相关文章推荐
- angular的入门及常用指令,控制器
- angular---常用指令总结
- Angular 比较常用的指令
- angular.js常用内置指令
- angular常用内置指令
- MySQL 常用指令小结
- Angular 比较常用的指令
- Vue.js常用指令的使用小结
- Angular.JS中指令ng-if的注意事项小结
- AngularJs ng-change事件/指令的用法小结
- git常用指令小结
- [置顶] angularJS 常用指令小结
- angular 常用指令的使用
- Linux常用指令小结
- Angular常用ng指令详解
- angular 常用指令和方法
- angular常用指令
- Angular 常用指令实例总结整理
- 第22篇:Angular 比较常用的指令
- Angularjs+ionic 学习(一):Angularjs常用指令