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. Angular14 Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题、emmet安装

    前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio ...

  2. sell01 环境搭建、编写持久层并进行测试

    1 环境配置 JDK 1.8 MAVEN 3.5 MYSQL 5.7 VirtualBox 5.1 2 搭建MYSQL环境 下载 VM 和 虚拟镜像文件 虚拟镜像文件:点击前往 技巧01:安装完vir ...

  3. Tomcat 如何部署多个应用

    Tomcat 如何部署多个应用 https://blog.csdn.net/tdcqfyl/article/details/51966387

  4. IFrame与window对象(contentWindow)

    ref:http://blog.csdn.net/dongzhiquan/article/details/5851201 var detialIframe=document.all("det ...

  5. jquery 规范

    使用单引号 不推荐 $("div").html("<img src='1.jpg'>"); 推荐 $('div').html('<img sr ...

  6. vue入门(二)----模板与计算属性

    其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. ...

  7. 程序员笔记|常见的Spring异常分析及处理

    一.前言 相信我们每个人在SpringMVC开发中,都遇到这样的问题:当我们的代码正常运行时,返回的数据是我们预期格式,比如json或xml形式,但是一旦出现了异常(比如:NPE或者数组越界等等),返 ...

  8. <你的孤独，虽败犹荣> 很喜欢的句子

    希望未来的工作中能够经常出差,做一个能看到除了湖南之外的世界的人 即使我们一辈子给人打工,也要打自己愿意打的工 正在经历的孤独,我们称之为迷茫,经过的那些孤独,我们称之为成长 青春,是一个容量极其有限 ...

  9. [WIP]JavaScript import, export

    创建: 2019/06/14 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import h ...

  10. AIM Tech Round 5 (rated, Div. 1 + Div. 2) E（思维，构造）

    #include<bits/stdc++.h>using namespace std;long long a[150007];long long ans[150007];int main( ...