Angular 核心概念2

自定义指令

• 指令增强了 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: {
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>

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

官网地址

• https://github.com/angular-ui/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集成

wappalyzer

• https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg