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. JNA 传参char[] 和结构体等

    近日项目中需要用java调用c/c++编写的dll库,所有了解到jna这个东东,下面是使用的一些经验: 一.java使用Jna需要两个jar包,eg:jna-3.5.1.jar和platform-3. ...

  2. Ubuntu 使用 heirloom-mail 调用外部邮箱 SMTP 服务器发送邮件

    使用本地服务发邮件,经常被过滤掉而且占用资源,发送成功率不高.所以使用外部SMTP服务器发送邮件成为了需求. SMTP认证的目的是为了使用户避免受到垃圾邮件的侵扰,简单地说就是要求必须在提供了账户名和 ...

  3. C#中的new修饰符说明

    new修饰符主要是用来隐藏从基类继承的成员. 这句话怎么理解呢,就是说有一个类,它有一个继承类,继承类中存在和基类中一样名称的成员(属性,方法等). 对继承类中的该成员使用new修饰符时,调用时将会隐 ...

  4. 【Qt官方例程学习笔记】Application Example（构成界面/QAction/退出时询问保存/用户偏好载入和保存/文本文件的载入和保存/QCommandLineParser解析运行参数）

    The Application example shows how to implement a standard GUI application with menus, toolbars, and ...

  5. Windows10安装node.js，vue.js以及创建第一个vue.js项目

    [工具官网] Node.js : http://nodejs.cn/ 淘宝NPM: https://npm.taobao.org/ 一.安装环境 1.本机系统:Windows 10 Pro(64位)2 ...

  6. matlab求定积分和不定积分

    matlab求定积分与不定积分 创建于2018-03-21 22:42 求定积分与不定积分是一件比较繁琐的事,但是我们可以借助matlab,下面与大家分享解决方法 材料/工具 matlab 求不定积分 ...

  7. D. Beautiful Array

    题目:http://codeforces.com/contest/1155/problem/D 给你n,x,一个n个数的序列,你可以选择一段区间,区间的数都乘以x,然后求出最大字段和 竟然是很简单的d ...

  8. this android sdk requires android developer toolkit version

    this android sdk requires android developer toolkit version 10.0.0 or above. current version is 8.0. ...

  9. JS事件冒泡机制和兼容性添加事件

    本篇文章主要来讲讲 事件的冒泡机制 和 添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段 捕获阶段是指从父层往子层找.比如 <body> ...

  10. UVa 10652（旋转、凸包、多边形面积）

    要点 凸包显然 长方形旋转较好的处理方式就是用中点的Vector加上旋转的Vector,然后每个点都扔到凸包里 多边形面积板子求凸包面积即可 #include <cstdio> #incl ...