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. @Deprecated使用技巧

    本文转自 http://www.cnblogs.com/hzhuxin/p/4645070.html 我们在做项目时,前期写的类中的一些代码可能由于需求变化的原因需要重写,有时重写时方法的传参和返回值 ...

  2. C++中const型数据的小结

    由于与对象又管的const型数据种类较多,形式又有些相似,往往难记,容易混淆,因此总结一下相关用法,具体用法可查看下方链接 C++中对象的常引用 C++中指向对象的常指针和指向常对象的指针 C++中的 ...

  3. 10、RNA-seq for DE analysis training（Mapping to assign reads to genes）

    1.Goal of mapping 1)We want to assign reads to genes they were derived from 2)The result of the mapp ...

  4. web特点

    1.图形化和易于导航的 Web是非常易于导航的,只需要从一个连接跳到另一个连接,就可以在各页各站点之间进行浏览了. 2.与平台无关 这里所说的平台是指软件的运行环境,可以是Windows.Linux等 ...

  5. img src 直接显示图片字符串，微信例子

    <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANS ...

  6. 2016 年排名 Top 100 的 Java 类库

    我们分析了GitHub中47,251个依赖,从中找出了排名前一百的Java类库,让我们看看谁在前面,谁在后面. 我们在漫长的周末的消遣方式就是浏览GitHub并且搜索流行的Java类库.我们决定把其中 ...

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

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

  8. GoWeb开发_Iris框架讲解（二）：Get、Post、Put等请求及数据返回格式

    数据请求方式的分类 所有的项目中使用的请求都遵循HTTP协议标准,HTTP协议经过了1.0和1.1两个版本的发展. HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法. HTTP ...

  9. Yaf + Smarty 整合笔记

    Yaf真的是太简单了,简单到使用mvc的时候在view里面需要手写php脚本.因此考虑整合一下smarty模板引擎.随心所欲也正是yaf的魅力 Yaf 安装 这里简单说一下yaf的安装,已经是非常无脑 ...

  10. 洛谷P2202 [USACO13JAN]方块重叠Square Overlap

    P2202 [USACO13JAN]方块重叠Square Overlap 题目描述 Farmer John is planning to build N (2 <= N <= 50,000 ...