一、定义路由


ng-view

  - AngularJS 支持通过在单页面上的多个视图的单页应用

  - ng-view 标记只是简单地创建一个占位符

  - 使用

AngularJS之基础-5 路由(定义路由、使用路由)、自定义指令(Directive)_第1张图片


ng-template

  - 创建使用script标签的HTML视图

  - 使用

      - 定义类型作为主模块中 ng-template 的脚本块

AngularJS之基础-5 路由(定义路由、使用路由)、自定义指令(Directive)_第2张图片


$routeProvider

  - 映射相应的HTML页面或ng-template

  - 附加一个控制器使用相同键的服务

wKioL1cE7LrQn4UdAAARuIAkpVc675.png  - 注意:

      - 需要angular-route.js脚本文件的引用

AngularJS之基础-5 路由(定义路由、使用路由)、自定义指令(Directive)_第3张图片


二、使用路由


锚点链接

  - 定义锚点

    wKioL1cE7Uvh97CGAACKpmm0trE793.png

  - 定义 ng-template

    AngularJS之基础-5 路由(定义路由、使用路由)、自定义指令(Directive)_第4张图片

  - 定义控制器

AngularJS之基础-5 路由(定义路由、使用路由)、自定义指令(Directive)_第5张图片


路由参数

  - 声明参数

    wKioL1cE7bXixZ38AABDWykmXC8893.png

  - 接受参数

    wKiom1cE7R2CR6-JAAA5hy0fV5o729.png

  - 显示参数

    wKioL1cE7eDDRDH0AAAP6INKaYY925.png



三、自定义指令-Directive


元素

  - 自定义指令中使用 AngularJS 扩展 HTML 的功能

  - 下列元素的类型来创建自定义指令

      - Element directives - 指令遇到时激活一个匹配的元素

      - Attribute - 指令遇到时激活一个匹配的属性

      - CSS - 指令遇到时激活匹配 CSS 样式

      - Comment - 指令遇到时激活匹配的注释


directive

AngularJS之基础-5 路由(定义路由、使用路由)、自定义指令(Directive)_第6张图片


使用自定义指令wKiom1cE7Z3QTBc9AABkU79KylA875.png



总结：本章内容主要介绍了 AngularJS 路由(定义路由、使用路由)、自定义指令(Directive)