index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

    <script src="./node_modules/angular-ui-router/release/angular-ui-router.js"></script>

    <script src="router.js"></script>

    <title>Document</title>

</head>

<body ng-app="myApp">

    <nav class="navbar navbar-inverse" role="navigation">

        <div class="navbar-header">

            <a class="navbar-brand">AngularUI Router</a>

        </div>

        <ul class="nav navbar-nav">

            <li>

                <a ui-sref="home">Home</a>

            </li>

            <li>

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

            </li>

        </ul>

    </nav>

    <div class="container">

        <div ui-view></div>

    </div>

</body>

</html>

router.js

angular.module('myApp', ['ui.router'])

.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider.state('home', {

        url: '/home',

        templateUrl: 'partial-home.html'

    })

    .state('home.list', {

        url: '/list',

        templateUrl: 'partial-home-list.html',

        controller: function($scope) {

            $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];

        }

    })

    .state('home.paragraph', {

        url: '/paragraph',

        template: 'I could sure use a drink right now.'

    })

    .state('about', {

        url: '/about',

        templateUrl: 'about.html'

    })

})

partial-home.html

<div class="jumbotron text-center">

    <h1>The Homey Page</h1>

    <p>This page demonstrates <span class="text-danger">nested</span> views.</p>

    <a ui-sref=".list" class="btn btn-primary">List</a>

    <a ui-sref=".paragraph" class="btn btn-danger">paragraph</a>

</div>

<div ui-view></div>

about.html

<h2>这是about页面</h2>

partial-home-list.html

<ul>

    <li ng-repeat="dog in dogs">{{ dog }}</li>

</ul>

运行截图





angularjs嵌套路由的更多相关文章

  1. AngularJS ui-router (嵌套路由)

    http://www.oschina.net/translate/angularjs-ui-router-nested-routes AngularJS ui-router (嵌套路由) 英文原文:A ...

  2. Angularjs中的嵌套路由ui-router

    先看看ng-router和ui-router的区别 (1)ng-route的局限性:一个页面无法嵌套多个视图,也就是说一个页面只能有包含一个页面一个控制器的切换.  (2)ui-route的改进:在具 ...

  3. [转]AngularJS ui-router (嵌套路由)

    本文转自:http://www.oschina.net/translate/angularjs-ui-router-nested-routes http://www.codeproject.com/A ...

  4. AngularJS 的嵌套路由 UI-Router

    AngularJS 的嵌套路由 UI-Router 本篇文章翻译自:https://scotch.io/tutorials/angular-routing-using-ui-router 演示网站请查 ...

  5. AngularJS的路由、模块、依赖注入

    AngularJS的路由在实际应用中更多是由另外封装好的angular-ui-router.js实现的! 为什么不用Ajax而要用前端路由?

  6. AngularJs ui-router 路由的介绍

    AngularJs ui-router 路由介绍 野兽之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Ang ...

  7. 使用ui-route实现多层嵌套路由

    一.预期实现效果: https://liyuan-meng.github.io/uiRouter-app/index.html (项目地址:https://github.com/liyuan-meng ...

  8. react-router 嵌套路由 内层route找不到

    今天在做嵌套路由的时候,没有报错,但是页面显示为空,搜索了一下资料,有两个原因: 1.exact精确匹配 <Route component={xxx} path="/" /& ...

  9. React Router 4.0 ---- 嵌套路由和动态路由

    嵌套路由,从广义上来说,分为两种情况:一种是每个路由到的组件都有共有的内容,这时把共有的内容抽离成一个组件,变化的内容也是一个组件,两种组件组合嵌套,形成一个新的组件.另一种是子路由,路由到的组件内部 ...

随机推荐

  1. 我的笔记文档版本控制系统-MediaWiki-回到顶部/链接放大/升级

    为了练习自己的JS.CSS基本功,这些天和MediaWiki干上了!^_^ 下面是我的MediaWiki新添加的功能: 回到顶部 链接放大 MediaWiki升级 回到顶部 回到顶部是很多网站的基本功 ...

  2. iOS开发，使用CocoaSSDP查找设备时按关键字过滤Device

    关于CocoaSSDP的资料有很多,这里就不介绍了. 希望寻找的目标设备,在header中设置了自定义的keyword,虽然通过外围代码也能达到相同目的,但是直接修改CocoaSSDP源码更简便. 导 ...

  3. kingadmin

    kingadmin 是一个模拟 Django admin 开发的后台管理系统,可以用来嵌套在其他的项目中作为单独的 app 程序存在. 执行流程 1.项目启动,开始执行 app_setup.py 文件 ...

  4. jquery 操作表格实例

    案例1:隔行变色,滑动,点击变色以(选中取消效果)(addClass(),removeClass(),toggleClass()) Html: <h4>1.隔行变行</h4> ...

  5. 转：PHP性能：序——谈ab（Apache Bench）压力测试工具

    PHP性能:序——谈ab(Apache Bench)压力测试工具 ab(Apache  Bench)是啥? ab是Apache自带的一个压力测试软件,可以通过ab命令和选项对某个URL进行压力测试.a ...

  6. php5.6安装window7安装memcache.dll库所遇到的误区

    问题: window7 64位,下载的库 memcache.dll 为64位的,且对应php的版本.但是重启后phpstudy查看phpinfo依然没有memcache: 根源: 发现是下载的 mem ...

  7. “FreeTextBox”控件使用——Word编辑器

    前言 在敲牛腩新闻发布系统时,添加新闻修改新闻的时候遇到了Word编辑器控件.它是引用了第三方控件,下面关于怎么引用该控件及其一些简单的使用方法进行分析. 内容 在网上找的该插件"FreeT ...

  8. 关于json_encode和json_decode

    json_encode将数组或者对象编码成字符串json_deode将字符串解码称对象或者数组,第二个参数为true时解码成字符串,否则解码成对象

  9. EIGRP-3-EIGRP的多参数度量

    带宽度量参数本身无法区分10Gbit/s及更高速率的接口.对1Gbit/s接口,默认延迟度量参数已设置为最低值1(10微妙).而且EIGRP承载的是经过换算的参数,每台路由器需要将其换算回再计算新开销 ...

  10. 禁止tableview 像上滑动

    tableView有一个bounces属性.默认YES,所以tableView上下用力拉都会有弹性滑动,如下设置可以禁止,但是这样的话上下弹性都没了 而经常的需求是上方不要弹性,下方要弹性,可以用监听 ...