Angular（3）

来源：互联网发布：阿里云ecs使用教程编辑：程序博客网时间：2024/06/16 22:06

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中的使用
```
<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 不保存原有内容也就是直接用模板内容替换原有内容
- 自定义指令的简写形式
  - 当定义的指令全部使用默认参数仅需要一个写DOM操作的地方
    javascript 模块对象.directive('指令名称',[function(){ return function(){ // 此处写具体的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

9.扩展

阅读全文

0 0