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. 【总结整理】javascript的函数在if中调用时是否加括号---与.net的不同之处

    javascript的函数调用时是否加括号 if(event.preventDefault){ event.preventDefault(); if判断条件里面不要加括号,不加括号是应该以属性形式,i ...

  2. Learning Python 001 第一个程序

    Python 第一个程序 我使用的开发工具是PyCharm软件.我们使用的是Python3.5 for windows . 如果你还没有安装PyCharm软件 和 Python3.5,请到这里来看如果 ...

  3. 6.5 系统打开缓慢，怎么办？---更新Ubuntu系统

    早早的来公司打开电脑,希望看到Ubuntu能启动成功.可是,当我重启后,使用Ubuntu系统,打开界面速度非常慢,当时,又怀疑自己安装出错了.而且,6.2日Ubuntu系统的工作日志又没了.无奈,我把 ...

  4. 使用Realsense D400 camera系列跑rgbdslamv2

    Ubuntu16.04,kinetic 在之前写的博文<如何使用ROS查找rgbdslam代码包框架的输入>中提到,一开始不知道整体框架,只用感性认识去跑rgbdslamv2的包,是一个天 ...

  5. mysql中数据库与数据表编码格式的查看、创建及修改

    一.查看数据库编码格式 ? 1 mysql> show variables like 'character_set_database'; 二.查看数据表的编码格式 ? 1 mysql> s ...

  6. Codeforces Round #507 (Div. 2）C（贪心，逆向遍历，构造）

    #include<bits/stdc++.h>using namespace std;int order[300007];long long t[300007],ans[300007];i ...

  7. 《OD学spark》20161022

    一.Spark Core 1. 什么是Spark Shuffle Wide Dependencies *ByKey: groupByKey,reduceByKey 关联操作:join,cogroup ...

  8. Hadoop3.0 DataNode启动不成功——java.net.BindException: Port in use: localhost:0 Caused by: java.net.BindException: Cannot assign requested address解决办法

    一.问题出现的原因 启动Hadoop分布式环境时出现主节点的namenode.secondarynamenode启动成功,但是Worker节点datenode启动不成功. hadoop@master$ ...

  9. 开源库SRT编译指南

    SRT(Secure,Reliable,Transport)是Haivision公司开发的一套开源媒体传输协议,用于在不稳定的网络环境下,优化媒体数据的传输性能.  SRT的码流加密基于开源库open ...

  10. codeforces C. Vasya And The Mushrooms (思维+模拟）

    题意:给定一个2*n的矩形方格,每个格子有一个权值,从(0,0)开始出发,要求遍历完整个网格(不能重复走一个格子),求最大权值和,(权值和是按照step*w累加,step步数从0开始). 转载: 题解 ...