index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body ng-app="app">

<div ng-controller="MainController">

    Choose:

    <a href="#/Book/Moby">Moby</a> |

    <a href="Book/Moby/ch/1">Moby: Ch1</a> |

    <a href="Book/Gatsby">Gatsby</a> |

    <a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |

    <a href="Book/Scarlet">Scarlet Letter</a><br/>

    <div ng-view></div>

    <hr />

    <pre>$location.path() = {{$location.path()}}</pre>

    <pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre>

    <pre>$route.current.params = {{$route.current.params}}</pre>

    <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>

    <pre>$routeParams = {{$routeParams}}</pre>

</div>

<script src="bower_components/angular/angular.js"></script>

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

<script>

    var app = angular.module('app',['ngRoute']);

    //注册控制器

    app.controller('MainController',['$scope','$route','$routeParams','$location',

        function ($scope,$route,$routeParams,$location) {

            $scope.$route=$route;

            $scope.$routeParams=$routeParams;

            $scope.$location=$location;

        }

    ]).controller('BookController',['$scope','$routeParams',function ($scope,$routeParams) {

        $scope.name= 'BookController';

        $scope.$routeParams= $routeParams;

    }]).config(['$routeProvider','$locationProvider',function ($routeProvider, $locationProvider) {

        //这是因为Angular 1.6 版本更新后 对路由做的处理，这样才可以和以前版本一样正常使用

        $locationProvider.hashPrefix('');

        $routeProvider.when('/Book/:bookId',{//:bookId作为路由参数使用

            templateUrl:'app/templates/book.html',

            controller:'BookController'//该路由匹配后使用的默认控制器，页面上就不用单独再配置

        });

    }]);

</script>

</body>

</html>

book.html:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <div>

         <p>{{name}}</p>

         <p>{{$routeParams}}</p>

         <p>{{$routeParams.bookId}}</p>

     </div>

 </body>

 </html>

　　注意：

 $locationProvider.hashPrefix('');  //这是因为Angular 1.6 版本更新后 对路由做的处理，这样才可以和以前版本一样正常使用

Angular-1.6 路由 简单使用的更多相关文章

  1. Angular routing生成路由和路由的跳转

    Angular routing生成路由和路由的跳转 什么是路由 路由的目的是可以让根组件按照不同的需求动态加载不同的组件. 根据不同地址,加载不同组件,实现单页面应用. Angular 命令创建一个配 ...

  2. Angular学习笔记—路由（转载）

    创建路由 1.首先安装 Angular Router.你可以通过运行以下任一操作来执行此操作: yarn add @angular/router # OR npm i --save @angular/ ...

  3. angular.js的路由和模板在asp.net mvc 中的使用

    angular.js的路由和模板在asp.net mvc 中的使用 我们知道angular.js是基于mvc 的一款优秀js框架,它也有一套自己的路由机制,和asp.net mvc 路由不太一样.as ...

  4. Angular 监听路由变化

    var app = angular.module('Mywind',['ui.router']) //Angular 监听路由变化 function run($ionicPlatform, $loca ...

  5. Python Flask框架路由简单实现

    Python Flask框架路由的简单实现 也许你听说过Flask框架.也许你也使用过,也使用的非常好.但是当你在浏览器上输入一串路由地址,跳转至你所写的页面,在Flask中是怎样实现的,你是否感到好 ...

  6. Angular.js路由 简单小案例

    代码案例: <html> <head> <meta charset="utf-8"> <title>AngularJS 路由实例&l ...

  7. angular实现了一个简单demo，angular-weibo-favorites

    前面必须说一段 帮客户做了一个过渡期的项目,唯一的要求就是速度,我只是会点儿基础的php,于是就用tp帮客户做了这个项目.最近和客户架构沟通,后期想把项目重新做一下,就用现在最流行的技术,暂时想的使用 ...

  8. angular.js之路由的选择

    在一个单页面中,我们可以添加多个模块,使得网页只在需要的时候加载这个模块.模块的切换大致上可以代替网页的切换,于是,我们便可以通过模块的切换实现网页的切换,这个切换是按需加载的. 乍一看非常普通的东西 ...

  9. angular.js中 路由 用法及概念

    在开讲之前,首先谈谈APP应用.平时我们用的app总是多页面,如果用原生安卓或者苹果,那当然很流畅啦.但是当我们用一般的html页面做移动端,简单时候我们可以用<a href="&qu ...

  10. angular 强制刷新路由，重新加载路由

    angular js ui-route 在使用时默认不是不会刷新路由的,所有有些时候我们需要主动刷新路由. 主动刷新方法是: <a ui-sref="profitManage" ...

随机推荐

  1. Font Awesome 4.0.3 提供了369个网页常用的矢量字体图标，新浪、人人 的矢量图标也到其中哟

    要求 必备知识 本文要求基本了解html与css前端代码. 运行环境 普通浏览器,兼容IE7 源码下载 下载地址 Font Awesome 为您提供了一套可缩放的字体矢量图标,可以快速自定义图标的大小 ...

  2. VS和Eclipse的调试功能哪个更强大？

    以前一直用VS 2012来调试C/C++代码,F5.F10.F11用起来甚是顺手,前面也写过一篇关于VS最好用的快捷键:Visual Studio最好用的快捷键(你最喜欢哪个), 所以对于调试C/C+ ...

  3. springboot-31-springboot静态注入

    springboot中 使用 @Autowired 注入时, 是可以为静态变量进行注入的 package com.iwhere.footmark.tools; import org.springfra ...

  4. Docker快速入门（一）

    Docker是Go语言开发实现的容器.2013年发布至今,备受推崇.相关文档.学习资料十分详尽.近期公司docker项目要推进,得重新学习一下.博客以笔记. 1 容器诞生背景及优势 (1)软件开发和运 ...

  5. 利用latex制作个人简历

    转自: http://www.cnblogs.com/panpei/ 前些日子,有点无聊,就在网上逛逛技术大牛的blogs,发现很多大牛都喜欢用pdf版式的简历,发现这种版式的简历排版非常漂亮简洁.深 ...

  6. layer插件学习——icon样式

    本文是自己整理的关于layer插件的icon样式结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuer ...

  7. [Angularjs]处理页面闪烁的方法

    摘要 在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染页面都需要消耗一定的时间,这个间隔可能很小,甚至让 ...

  8. C#快速读写文件

    一.写入 //在应用程序当前目录下的File1.txt文件中追加文件内容,如果文件不存在就创建,默认编码 File.AppendAllText("File1.txt", " ...

  9. Win10 注册IIs4.0的解决方案

    随着Win10的出现,越来越多的人装上了Win10,尤其是程序员,由于Win10是一个新的操作系统,但现有软件的兼容性等各方面都是未知,难免会存在很多坑,就拿IIS来说,我刚装完win10系统,然后装 ...

  10. 求解方程A5+B5+C5+D5+E5=F5

    方程A5+B5+C5+D5+E5=F5刚好有一个满足0<A≤B≤C≤D≤E≤F≤75的整数解.请编写一个求出该解的程序: using System; namespace ReverseTheEx ...