Angular 核心概念2_angular_前端技术

自定义指令

指令增强了 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属性可以定义指令的使用类型
1. E：Element（元素）
2. A：Attribute（属性）
3. C：Class（类名）
4. 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

官网地址

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集成
3001的端口地址是管理平台

wappalyzer

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

查看更多关于【angular】的文章