title: Angular
tags:
- Angular
- JS
Angular
简介
- 一款非常优秀的前端高级 JS 框架
- 最早由Misko Hevery等人创建
- 09被Google收购
- 可以轻松构建 SPA 应用程序
- 其核心就是通过指令扩展HTML,通过表达式绑定数据到HTML
SPA
- single page application 单页应用程序
//根据url中锚点值的变化，动态的请求不同的数据
window.addEventListener("hashchange",function(){
//hashchange监听url中锚点值变化的事件
var hash= location.hash;
//location.hash, location.href
switch(hash){
case '#find':
$.get('find.json',function(data){
console.log(data);
},'json');
break;
case:...;
}
})
指令
- 指令:在angular中以ng-开头的html标签属性
- ng-app: 选择angular去管理哪一部分的html代码, 管理的是ng-app所在元素的子元素及其本身
- ng-model: 指定一个属性值，这个属性就表示当前的value值,只能用在input中和select中
- ng-init: 可以对数据进行初始化操作，给一个默认值
- ng-click: 注册点击事件
{{val}}
模块
- 创建模块
var app = angular.module('模块名',[]) - 如果不依赖其他模块，也需要提供一个空的数组
- 需要在ng-app指令的属性值上写我们的模块名
- 模块的划分方式
- 按照项目的功能去划分模块
- 按照项目中文件的类型去划分模块
控制器
- 创建控制器
app.controller('控制器的名字',function($scope){}) - 要在它所在标签或者父标签上加上ng-controller指令,ng-controller的值就是我们想要显示的数据模型所在控制器的名字
双向数据绑定
- 数据模型($scope.属性)的改变，会影响内容的显示(文本框的值)
- 改变文本框的值，对应的数据模型发生了改变
{{name}}
MVC 思想
- M : Model: 存储，获取数据
- V : View 视图，把数据呈现给用户
- C : Controller 做一些控制和调度的操作
- MVC只是一种思想，只是约定了我们代码应该如何去组织,让我们代码的每一部分都有一个明确的职责,用利于后期的维护性
用户名: 密码: 用户类型:
注册协议: {{msg}}
Angular开发流程回顾
- 1.引包:引入angular.js文件
- 2.约定:加上ng-app指令，告诉angular要管理页面哪一部分代码
- 3.创建模块:在js中创建模块,给页面中的ng-app指令一个值，这个值就是这个模块的模块名
- 4.创建控制器:在js中创建控制器,需要在页面上加上ng-controller指令，指令的值为控制器的名字
- 5.建模,(数据模型,行为模型)根据页面结构，抽象出具体的js对象.
- 6.初始化,通过$scope做一些初始化操作
- 7.通过
ng-model , ng-click , 插值表达式把$scope的属性在页面展示出来 - 8.在js写一些具体的逻辑
augular.element (不推崇)
- (jqLite对象) 类似于jq,但是要求传入的参数是一个原生的dom对象，而不是选择器
$scope
- 视图和控制器之间的数据桥梁,用于在视图和控制器之间传递数据,用来暴露数据模型（数据，行为）
正是因为$scope在Angular中大量使用甚至盖过了C（控制器）的概念，所以很多人把Angular称之为MVVM框架,$scope 实际上就是MVVM中所谓的VM（视图模型）
控制器
传统的方式创建控制器
// 创建控制器(1.2.x版本)
// angular会把全局的函数当作控制器
function demoController($scope){
$scope.name = '小明'
}
面向对象的方式创建控制器
{{myname}}
{{obj.name}}
var app = angular.module('myApp', [])
// angular会把这二个参数当作构造函数使用
app.controller('demoController', function($scope){
$scope.myname='小红'
this.name = '小明'
})
安全的方式创建控制器
- 为了避免压缩后代码无法运行
// 把第二个参数改为一个数组,在数组把我们需要的参数的名字写上
// 回调函数就写在数组的最后一个元素上
// 数据中传入的元素的顺序,要和function的中顺序一一对应
app.controller('demoController',['$scope','$log',function($scope,$log){
$scope.msg = 'hello World!'
$log.log('哈哈哈哈！')
//注意$log.log()
}])
// 注意是'$scope'
指令
ng-bind
解决表达式闪烁问题,浏览器不会把标签的属性显示出来,angular会把ng-bind对应的数据显示到所在标签中间
ng-cloak
- {{msg}}
也可以解决表达闪烁问题,注意ng-cloak是样式,我们要先给ng-cloak设置display:none,angular在解析表达式之后会把页面上的ng-cloak样式移除,这样ng-cloak对应的样式就不生效了
ng-repeat
- 能够把一组数据直接渲染到页面上,不需要我们拼接字符串
- ng-repeat="item in users",item对应是遍历users时的每一条数据,users是我们要遍历的数据(是一个数组)
-
{{item.name}} {{item.age}}
-
{{item.name}} {{item.age}}
-
{{item}} {{$index}}
- ng-repeat 在遍历时会提供以下值:
- $odd : 为true时，表明当前数据是否是第[奇]数条
- $even: 为true时，表明当前数据是否是第[偶]数条
- $first: 为true时，表明当前数据是否是第1条
- $last: 为true时，表明当前数据是否是最后一条
- $middle: 为true时，表明当前数据是否是中间的数据
{{item.name}},{{item.age}}
ng-class
- 动态的添加class样式,以对象的形式书写，angular会把属性值为true的属性名当作样式添加到class
{{item.name}},{{item.age}}
ng-show/ng-hide
- ng-show,控制元素的显示或隐藏,值为true时显示，为false隐藏,ng-hide作用是相反的(只是设置display:none来隐藏元素)
hello
ng-if
- 与ng-show用法一致,注意当值为false时,会将当前dom元素移除
ng-switch
- 当ng-switch-when对应的值等于ng-switch对应值时，当前dom元素就显示
我是小明
其他常用指令
- ng-model:双向数据绑定
- ng-checked：单选/复选是否选中(单向数据绑定,界面操作不会影响数据模型的值)
- ng-selected：是否选中(单向数据绑定)
- ng-disabled：是否禁用
- ng-readonly：是否只读
常用事件指令
- ng-blur：失去焦点
- ng-focus：获得焦点
- ng-change：内容改变
- ng-copy：复制
- ng-click: 单击
- ng-dblclick：双击
- ng-submit：form表单提单
指令的其他使用方式
- 兼容H5,在使用angular指令时,只需要在原先的指令前加上data-或x-,如:data-ng-app,x-ng-click
todomvc案例
todomvc功能分析
- 任务的展示
- 添加任务
- 删除任务
- 修改任务内容
- 切换任务完成与否的状态
- 批量切换任务完成与否的状态
- 显示未完成的任务数
- 清除所有已完成任务
- 注意： 在循环删除数组长度，会导致循环条件改变，也会导致元素原来的索引改变
- 切换显示不同状态的任务
过滤器(filter)
- 格式化数据
- 过滤数据(filter)
- currency,date
{{money | currency : '￥'}}
{{myDate | date : 'yyyy年MM月dd日 HH:mm:ss'}}
- lowercase 转换成小写,uppercase 转换成大写,number 四舍五入
- limitTo
{{msg | limitTo : 5 : 2}}...
- orderBy 及 json
{{myJson | json : 8}}
{{item}},
- 在js中使用过滤器
app.controller('filterController', ['$scope','$filter',function($scope,$filter){// $filter 需要在控制器的回调中传入
$scope.money = 9998;
// 可以调用不同的过滤器得到相应的结果
// 参数是一个过滤器的名字
// 返回值是一个方法
// 后面括号里的第一个参数是需要处理的数据
// 后面括号里的的第二个参数是当前过滤器本身需要的参数
// $filter('过滤器名称')(需要过滤的数据,filter 参数)
$scope.result = $filter('currency')($scope.money,'￥')
}])
- filter
数据模型 | filter : {key:value}
-
{{item.name}},{{item.completed}}
$watch 监视数据模型的变化
自定义属性
咦
自定义指令中回调里返回的对象的属性
template: 需要提供一个html字符串,会被添加到当前页面使用了自定义指令的位置
-
templateUrl:
- 需要提供一个html文件路径，angular会发请求，请求对应的文件，把文件内容作为模板插入到自定义指令中间
- 提供一个script标签的id, angular会把script标签中的内容作为模板插入到自定义指令中间,注意要改变script标签的type="text/ng-template"
-
restrict: 需要提供一个字符串，限制自定义指令的使用形式
- A : Attribute 表示只能以属性的形式使用
- C : Class 表示只能以类样式名的形式使用
- E : Element 表示只能以自定义标签的形式使用
- ACE : 如果希望多种方式合适，就把对应值组合在一起
replace：需要提供一个布尔值，为true时，模板会被用来替换自定义指令所在标签，否则是插入到自定义指令中间
transclude: 需要一个布尔值, 为true时会将自定义标签中的内容插入到模板中拥有ng-transclude指令的标签中间
-
scope：需要一个对象: 可以用来获取自定义指令的属性值,
- 给当前对象添加一个属性(如:tmp),属性值以@开头，后面跟上自定义指令的属性名
然后就可以在模板中使用{{tmp}} 来得到对应的属性值,注意''-
scope: { tmp:'@mystyle'}{{tmp}} -
scope: { mystyle:'@'}{{mystyle}}
-
- 给当前对象添加一个属性(如:tmp),属性值以@开头，后面跟上自定义指令的属性名
-
link: 需要一个function 这是function在angular解析到相应指令时就会执行一次,
- scope ：类似于$scope,只不过scope的属性 只能在模板中使用
- element : 自定义指令所在标签对应的对象(jqLite),指向模板最外层的对象,如果replace为treu,指向的就是自定义指令所在标签
- attributes : 包含了自定义指令所在标签的必有属性
服务
- 创建服务
var app = angular.module('service',[])
// 第一个参数：服务的名字
// 第二个参数里的function:
// angular会把这个function当作构建函数，angular会帮助我们new这个构建函数，然后得到一个对象
app.service('MyService', [function(){
this.name = '小明'
}])
- 使用服务
var app = angular.module('todosApp', ['service'])
app.controller('todosController',['MyService',function(MyService){
// 这个MyService就是，对应的'MyService'时的回调函数new出的对象
console.log(MyService)
}])
路由
- 根据url中不同的锚点值，在页面显示不同的内容
路由使用
路由参数