加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

AngularJS之基础-5 路由(定义路由、使用路由)、自定义指令(Direc

发布时间:2020-12-17 10:13:41 所属栏目:安全 来源:网络整理
导读:一、定义路由 ng-view - AngularJS 支持通过在单页面上的多个视图的单页应用 -ng-view 标记只是简单地创建一个占位符 - 使用 650) this.width=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="web.png" alt="wKiom1cE6zCDCowSAAA2rpsVcQQ91

一、定义路由


ng-view

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

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

- 使用

wKiom1cE6zCDCowSAAA2rpsVcQQ917.png


ng-template

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

- 使用

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

wKiom1cE66_SnPAhAABZG_GVQhw435.png


$routeProvider

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

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

wKioL1cE7LrQn4UdAAARuIAkpVc675.png

- 注意:

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

wKiom1cE7FDAJBoyAAGdXDpCUF8953.png


二、使用路由


锚点链接

- 定义锚点

wKioL1cE7Uvh97CGAACKpmm0trE793.png

- 定义 ng-template

wKioL1cE7WLwLGejAAEbWybXx0k445.png

- 定义控制器

wKiom1cE7NmwS8RgAAET51NWGjU368.png


路由参数

- 声明参数

wKioL1cE7bXixZ38AABDWykmXC8893.png

- 接受参数

wKiom1cE7R2CR6-JAAA5hy0fV5o729.png

- 显示参数

wKioL1cE7eDDRDH0AAAP6INKaYY925.png



三、自定义指令-Directive


元素

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

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

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

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

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

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


directive

wKioL1cE7migHT0mAAIpuHOjRHU305.png


使用自定义指令

wKiom1cE7Z3QTBc9AABkU79KylA875.png



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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读