- jqLite的使用
-<li ng-repeat="(key,value) in obj" ng-bind-template="{{key}} {{value}}"> </li>
这行代码 在webstorm 编辑器里面会报错 用sublim 不会报错 是这样写不规范 还是只是编辑器自身解析问题呢?页面执行结果没有问题 - 预习资料
- 推荐看官方文档
1.Angular’s jqLite
- 需求:angular虽然不推崇DOM操作 但是谁也保证不了 一点DOM操作都没有
- 方案:angular提供了一个简化版本的jq,叫做jqLite.看文档说下面的事情
- 提供了一些和jquery名字一样的方法
- 但都是些简化的方法 不拥有完全的功能
- 用法上大多一样 不一样的地方官方文档上会有说明
- 语法:
- 通过例子说明如何通过angular.element()将元素转换为jqLite对象
- 讲解如何通过jqLite对象使用官方提供的方法
2.自定义指令
- 需求:angular官方只提供了常用的指令 在实际工作中不够用 所以需要自己定义一些指令实现一些需求 (轮播图 回到顶部 吸顶导航等等)
- 方案:通过自定义指令的方式写我们自己的DOM操作
- 概念:angular提供给我们的操作DOM的方式
语法:
如何定义一个最基本的自定义指令
模块对象.directive('指令名称',[function(){ return { // 指令的具体配置 } }])
指令在HTML中的使用
<!-- 指令名称:myBtn --> <div my-btn></div>
指令的配置参数介绍
- restrict 自定义指令分类
- 属性指令 A attribute
- 元素指令 E element
- 样式指令 C class
- 注释指令 M comment
- 默认值是:’AE’
- template和templateUrl使用方法
- template 模板字符串
- templateUrl 定义angular模板
- link函数的作用及参数说明
- 作用:写DOM操作的地方
- 有三个参数 scope element attributes
- scope:类似于$scope 作用范围不同 只针对当前指令生效
- element:当前指令所要操作的元素
- attributes:当前指令所在标签的属性结合 对象类型
- replace的作用
- 将当前指令所在的标签替换掉
- 布尔类型的值 默认是是false 不替换
- transclude的作用
- 如果指令所在标签内部有内容 会将内容保存到ng-transclude中
- 然后在模板内将ng-transclude保存的内容写在想要显示的位置即可
- 默认值是false 不保存原有内容 也就是直接用模板内容替换原有内容
- restrict 自定义指令分类
- 自定义指令的简写形式
- 当定义的指令全部使用默认参数 仅需要一个写DOM操作的地方
javascript
模块对象.directive('指令名称',[function(){
return function(){
// 此处写具体的DOM操作
}
}])
- 当定义的指令全部使用默认参数 仅需要一个写DOM操作的地方
应用:通过例子练习自定义指令的使用(回到顶部)
- 自定义指令详解
3.Angular中请求数据的方式
- angular中提供了一些方法,我们可以用这些方法向后台发送请求,获取数据
- 语法:
- 标准的请求方式(通过例子说明)
- $http()
- 简化的请求方式(通过例子说明)
- $http.get()
- $http.post()
- 标准的请求方式(通过例子说明)
- ng-bind-html
- angular中没有类似于jquery中beforeSend这样的方法
- angular中不能将请求设置为同步
4.Angular中的过滤器
- 我们从后台请求的数据 有时候不是我们想要的格式
- 比如货币数字从后台获取过来就是一堆纯数字
- 但是货币数字通常是 按照规则用逗号分开并且数字前面有标识当前是哪种货币
- 过滤器的概念:angular为我们提供的处理数据格式的方式
- 过滤器的作用:将数据格式化我们想要的格式
- 过滤器的分类:内置过滤器 自定义过滤器
- 使用过滤器的语法:
- {{ 数据模型 | 过滤器的名字:过滤器的参数:多个参数以冒号隔开 }}
- 内置过滤器介绍
- currency 货币过滤器
- date 日期过滤器
- filter 将数据按照某种规则进行过滤
- 模糊过滤
- 精确过滤
- limitTo 限制
- 第一个参数:limit 限制的数量,可以为负数,从后往前开始限制
- 第二个参数:begin 从第几个开始限制
- orderBy 排序
5.自定义过滤器
- angular自身只是提供了一些常用的过滤器,在实际项目中,我们往往会遇到一些比较具体的需求,比如电话号码中间加*、单词首字母大写等等比较个性化的数据格式需求
语法:
- 如何定义自定义过滤器
模块对象.filter('自定义过滤器名字',[function(){ return function(要处理的数据,滤过器参数1,滤过器参数2,...){ // 具体处理数据的代码 return 处理后的数据; } }])
- 如何定义自定义过滤器
- 通过例子演示自定义过滤器的使用(首字母大写、电话号码加*)
6.创建服务
- 服务也是模块下的方法,要创建服务,先创建模块
- 在模块对象下面有一个service方法
- 第一个参数是服务名称
- 第二参数以数组的形式存在,和控制器的使用方法一样
angular.module('myService',[]).service('serviceName',[function(){}])
- 将服务对应的JS文件在页面中用script标签引入
- 将服务模块作为主模块的依赖模块
- 在控制器中将服务引入
<body ng-app="myApp">
<div ng-controller="ctrlA"></div>
<div ng-controller="ctrlB"></div>
<script src="node_modules/angular/angular.min.js"></script>
<script src="js/service.js"></script>
<script>
angular.module('myApp',['myService'])
/*
在两个控制器中依赖的serviceName服务 是同一个对象
所以在A控制器中修改了服务的值 在控制器B中也会得到体现
*/
.controller('ctrlA',['$scope','serviceName',function($scope,serviceName){
serviceName.name = '123';
}])
.controller('ctrlB',['$scope','serviceName',function($scope,serviceName){
console.log(serviceName);
}])
</script>
</body>
angular.module('myService',[])
/* angular会帮我们new 这个函数 */
.service('serviceName',[function(){
this.name = '服务里面的数据';
}])
7.服务的作用
- 可以在相关控制器中共享数据
- 可以在服务中写一些公用的代码
8.知识点补充
- scope. watch
- scope. apply