ngRoute不支持嵌套路由

用法如下：

 <!DOCTYPE html>

 <html lang="en" ng-app="myApp">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />

     <title>angular 路由</title>

 </head>

 <style>

     ul li{

         list-style: none;

         float: left;

         padding: 10px;

     }

 </style>

 <body>

     <ul>

         <li><a href="#page1">page1</a></li>

         <li><a href="#page2">page2</a></li>

         <li><a href="#page3">page3</a></li>

     </ul>

     <div ng-view></div>

 </body>

 <script src="./script/libs/angularjs.1.4.6.min.js"></script>

 <script src="./script/libs/angular-route.js"></script>

 <script>

     angular.module('myApp',['ngRoute'])

     .config(function($routeProvider){

         $routeProvider.when("/page1",{

             template:"this is page1"

         }).when("/page2",{

             template:"this is page2"

         }).when("/page3",{

             template:"this is page3"

         }).otherwise({

             redirectTo:"/page1"   //默认路由

         })

     });

 </script>

 </html>

uiRouter支持嵌套路由

用法如下：

 <!DOCTYPE html>

 <html lang="en" ng-app="myApp">

 <head>

     <meta charset="UTF-8">

     <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />

     <title>angular路由</title>

 </head>

 <style>

     ul li{

         list-style: none;

         float: left;

         padding: 10px;

     }

 </style>

 <body>

     <ul>

         <li><a href="#page1">page1</a></li>

         <li><a href="#page2">page2</a></li>

         <li><a href="#page3">page3</a></li>

     </ul>

     <div ui-view></div>

 </body>

 <script src="./script/libs/angularjs.1.4.6.min.js"></script>

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

 <script>

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

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

         $stateProvider.state('page1',{

             url:"/page1",

             template:"this is p1"

         }).state('page2',{

             url:"/page2",

             template:"this is p2"

         }).state('page3',{

             url:"/page3",

             template:"this is p3"

         });

         $urlRouterProvider.otherwise('page1');

     });

 </script>

 </html>

Angular之ngRoute与uiRoute的更多相关文章

  1. ui-router详解(二)ngRoute工具区别

    我们了解 angular.js 是一种富客户端单页面应用,所以要在一个页面呈现不同的视图,路由起到了至关重要的作用. angular.js 为我们封装好了一个路由工具 ngRoute ,它是一种靠ur ...

  2. angular service provider

    关于  angular service factory  provider 方面有很多,我也来写一篇加深下印象 provider 是一切方法的基础,所以功能也最强,provider 用来定义一个可以被 ...

  3. [Angular Tutorial] 9 -Routing & Multiple Views

    在这一步中,您将学到如何创建一个布局模板,并且学习怎样使用一个叫做ngRoute的Angular模块来构建一个具有多重视图的应用. ·当您现在访问/index.html,您将被重定向到/index.h ...

  4. mean(bootstrap,angular,express,node,mongodb)通用后台框架

    学习node,我这个毫无美感的程序员在bootstrap与node的感染下,向着“全栈工程师”迈进,呵呵! 最终选择如题的技术方案,这些东东都算比较新的,网上的资料比较少,参考了不少github程序及 ...

  5. Promise的前世今生和妙用技巧

    浏览器事件模型和回调机制 JavaScript作为单线程运行于浏览器之中,这是每本JavaScript教科书中都会被提到的.同时出于对UI线程操作的安全性考虑,JavaScript和UI线程也处于同一 ...

  6. AngularJS 的嵌套路由 UI-Router

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

  7. AngulerJS学习（五）按需动态载入文件

    在此之前我么年首先要先了解几个东西: $q 简单介绍: $q:主要解决的是异步编程的问题,是指描写叙述通过一个承诺行为与对象代表的异步运行的行动结果的交互.可能会也可能不会再不论什么时候完毕. 我们通 ...

  8. 摆脱DOM操作，从TodoMVC看angularJS

    取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...

  9. AngularJs 动态加载模块和依赖

    最近项目比较忙额,白天要上班,晚上回来还需要做Angular知识点的ppt给同事,毕竟年底要辞职了,项目的后续开发还是需要有人接手的,所以就占用了晚上学习的时间.本来一直不打算写这些第三方插件的学习笔 ...

随机推荐

  1. .NET HttpClient的缺陷

    using (HttpClient client = new HttpClient()){} 每次发起http请求每次new httpClient,它会打开许多套接字,比你实际的需求多许多,这极大地增 ...

  2. 【vue系列之三】从一个vue-pdf-shower，说说vue组件和npm包

    前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...

  3. Git学习随笔

    前期准备事项: 1.注册GitHub账号,注册地址:https://github.com 2.下载Git for Windows工具,下载地址:http://gitforwindows.org,软件安 ...

  4. Haproxy原理(1)

    一.四层和七层负载均衡的区别 所谓的四层就是ISO参考模型中的第四层.四层负载均衡也称为四层交换机,它主要是通过分析IP层及TCP/UDP层的流量实现的基于IP加端口的负载均衡.常见的基于四层的负载均 ...

  5. 使用JSON JavaScriptSerializer 进行序列化或反序列化时出错。字符串的长度超过了为 maxJsonLength属性

    "/"应用程序中的服务器错误.使用 JSON JavaScriptSerializer 进行序列化或反序列化时出错.字符串的长度超过了为 maxJsonLength 属性设置的值. ...

  6. 从头开始基于Maven搭建SpringMVC+Mybatis项目(1)

    技术发展日新月异,许多曾经拥有霸主地位的流行技术短短几年间已被新兴技术所取代. 在Java的世界中,框架之争可能比语言本身的改变更让人关注.近几年,SpringMVC凭借简单轻便.开发效率高.与spr ...

  7. deeplearning.ai 构建机器学习项目 Week 2 机器学习策略 II 听课笔记

    1. 误差分析(Error analysis) 误差分析的目的是找到不同误差源的比重,从而指引我们接下来往哪个方向努力改进.NG建议手工统计随机100个错误的误差源,比如对于猫分类器,错误的照片可能是 ...

  8. reduce 方法 (Array) (JavaScript)

    对数组中的所有元素调用指定的回调函数.该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供. 语法         array1.reduce(callbackfn[, in ...

  9. ACM_高次同余方程

    /*poj 3243 *解决高次同余方程的应用,已知 X^Y = K mod Z, 及X,Z,K的值,求 Y 的值 */ #include<cstdio> #include<cstr ...

  10. Spark学习笔记1（初始spark

    1.什么是spark? spark是一个基于内存的,分布式的,大数据的计算框架,可以解决各种大数据领域的计算问题,提供了一站式的服务 Spark2009年诞生于伯克利大学的AMPLab实验室 2010 ...