AngularJS使用ui-route实现多层嵌套路由的示例资源-CSDN下载

74 浏览量 2020-11-27 08:06:52 上传评论收藏 65KB PDF 举报

资源推荐

资源详情

资源评论

AngularJS使用使用ui-route实现多层嵌套路由的示例实现多层嵌套路由的示例

本文介绍了AngularJS使用ui-route实现多层嵌套路由的示例，分享给大家，具体如下：

一、预期实现效果：一、预期实现效果：

https://liyuan-meng.github.io/uiRouter-app/index.html

（项目地址：https://github.com/liyuan-meng/uiRouter-app）

二、分析题目要求，给出依赖关系，构建项目二、分析题目要求，给出依赖关系，构建项目

1. service:

（1）根据条件查询people数据checkPeople.service，不给出条件则查询所有。

（2）得到路由信息getStateParams.service。

2. components:

（1）hello模块：点击button按钮更改内容。

（2）peolpleList模块：显示people列表，点击people显示people详情。依赖于checkPeople.service模块。

（3）peopleDetail模块：显示people详情，依赖于checkPeople.service模块和getStateParams.service模块。

3. 构建项目：

如图所示：component目录用来保存所有服务模块和业务模块，lib目录保存外部引用（我是用的是angular.js1.5.8和ui-

route0.2.18），app.config.js文件用来配置路由，index.html则作为入口文件。

三、实现这个例子三、实现这个例子

1. 首页index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<script src="./lib/angular.js"></script>

<script src="./lib/angular-ui-route.js"></script>

<script src="./app.config.js"></script>

<script src="./components/core/people/checkPeople.service.js"></script>

<script src="./components/core/people/getStateParams.service.js"></script>

<script src="./components/hello/hello.component.js"></script>

<script src="./components/people-list/people-list.component.js"></script>

<script src="./components/people-detail/people-detail.component.js"></script>

</head>

<body ng-app="helloSolarSystem">

<div>

<a ui-sref="helloState">Hello</a>

<a ui-sref="aboutState">About</a>

<a ui-sref="peopleState">People</a>

</div>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38694699

粉丝: 4

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip