自定义指令
- 指令增强了 HTML，提供额外的功能
- 内置的指令基本上已经可以满足我们的绝大多数需要了
- 少数情况下我们有一些特殊的需要，可以通过自定义指令的方式实现
普通指令
- 语法
<div hello-world></div>
<hello-world></hello-world>
angular.module('myModule', [])
.controller('HelloController', ['$scope', function($scope) {
$scope.customer = {
name: '张伟',
address: '五棵松下一站'
};
}])
.directive('helloWorld', ['$log', function($log) {
// 此处为指令工厂 工厂应该返回指令对象
return {
template: 'Name: {{customer.name}} Address: {{customer.address}}'
};
}])
- 请参照资料-备课代码-01-custom-directive.html理解
内容转置
- 把页面指令中的内容转置到指令中template中有ng-transclude指令的innerhtml中
- transclude属性：bool
- replace属性：bool 是否替换指令的dom元素
- 请参照资料-备课代码-02-custom-directive.html理解
模板抽取
- template属性是不支持html代码段换行的，所以把大量的html写在里面结构会很不清晰，我们可以借助templateUrl属性抽离模板页面
- templateUrl属性就是以异步请求的方式去请求模板
- 请参照资料-备课代码-02-custom-directive.html理解
指令的独立作用域
- 每个模块中的$scope都有自己的独立作用域
- 请参照资料-备课代码-04-scope.html理解
- scope属性：object,可以实现指令的独立作用域
- 请参照资料-备课代码-03-custom-directive.html理解
作用域的属性传递
- 语法
scope: {
title: '@',
type: '@'
},
<div class="row">
<div class="col-md-4">
<bs-panel type="default" title="panel1">
lsdjfklsdjfklsajdflsdaj
</bs-panel>
</div>
<div class="col-md-4">
<bs-panel type="default" title="panel2">
lsdjfklsdjfklsajdflsdaj
</bs-panel>
</div>
</div>
- @ 指的是当前属性在执行时会去取指令作用到的DOM元素的title
- 请参照资料-备课代码-03-custom-directive.html理解
自定义指令的类型
-
restrict属性可以定义指令的使用类型
- E：Element（元素）
- A：Attribute（属性）
- C：Class（类名）
- M：Comment（注释）
-
注意：在定义指令应该使用驼峰命名法，使用指令时应该使用的是全小写字母中划线分割的方式,注释的方式没有办法使用转置等功能
- 请参照资料-备课代码-03-custom-directive1.html理解
指令中的dom操作
- link属性是指令中可以操作dom元素的地方（css，属性，innerHtml）
- 请参照资料-备课代码-05-link-directive.html理解
- 语法
link: function($scope, element, attributes) {
// Scope是指令的scope,element是指令作用的dom元素，attributes是属性
// 我们经常说的dom操作指的是css，属性，innerhtml这些操作
element.on('mouseenter', function() {
element.css('backgroundColor', 'red');
}).on('mouseleave', () => {
element.css('backgroundColor', 'transparent');
});
}
过滤器
- 过滤器的主要用途就是一个格式化/筛选数据的小工具
- 一般用于服务端存储的数据转换为用户界面可以理解的数据
- 请参照资料-备课代码-06-filter.html理解
内置过滤器
- 语法
- 不同的过滤器语法不同
// 1: 需要过滤的数据，2: 过滤器的类型，3: 之后都是参数
{{ currency_expression | currency : symbol : fractionSize}}
- 也可以引入语言包，然后直接给过滤器类型即可
- 过滤器既可以在html中使用也可以在js中使用
常用的内置过滤器
currency
- 定义本位币类型
date
- 定义日期结构
json
- 输出有格式的对象，配合pre标签用于调试
lowercase
- 把大写字母变为小写字母
uppercase
- 把小写字母变为大写字母
number
- 定义小数点
limitTo
- 截取字符串操作
filter
- 模糊匹配对象中所有属性的值，和展示没有关系
- 如果传入一个对象的话，会根据特定的属性检索
- 请参照资料-备课代码-07-filter2.html理解
orderBy
- 按照指定的对象属性排序
- 请参照资料-备课代码-08-filter3.html理解
自定义过滤器
- 根据自己的需求定义需要的过滤器
- 请参照资料-备课代码-09-filter4.html理解
服务
内置服务
$http
- 请求连接服务
自定义服务
factory
service
provider
路由
控制页面跳转的第三方插件
ng-route
ng-route使用步骤
- npm install angular-route -save
- 引入这个包
- 在自己的模块中添加 ngRoute模块依赖
- 路由配置（配置路由规则）
- 规则指的就是 什么样的请求 找什么控制器
- [{url:'/sdf',controller:'MainController'}]
- 编写对应的控制器和视图
主要方法
- when()：配置路径和参数;
- otherwise：配置其他的路径跳转，可以想成default。
- controller：对应路径的控制器函数，或者名称
- template：对应路径的页面模板，会出现在ng-view处,比如"
xxxx
"
- templateUrl：对应模板的路径，比如"src/xxx.html"
- redirectTo：重定向地址
ui-router
官网地址
ui-router使用步骤
- 安装或者下载ui-router的包
- 引入这个包
- 在自己的模块中添加 ui-view模块依赖
- 路由配置（配置路由规则）
- 规则指的就是 什么样的请求 找什么控制器
- [{url:'/sdf',controller:'MainController'}]
- 编写对应的控制器和视图
ng-route和ui-router的区别
- ng-route在一个页面中只能有一个坑
- ui-router在页面中可以有多个坑
- ui-router封装了ng-route
扩展
browser-sync
- 安装
npm install browser-sync -g - browser-sync start --server --files=".，*.html"
作用
- 多浏览器同时浏览
- 代码热更新
其他
- 官网 https://www.browsersync.io/docs/command-line
- api
- 和gulp集成
- 3001的端口地址是管理平台