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属性：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