DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body ng-app="app">
<div ng-controller="MainController">
Choose:
<a href="#/Book/Moby">Mobya> |
<a href="Book/Moby/ch/1">Moby: Ch1a> |
<a href="Book/Gatsby">Gatsbya> |
<a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4a> |
<a href="Book/Scarlet">Scarlet Lettera><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>
1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Titletitle>
6 head>
7 <body>
8 <div>
9 <p>{{name}}p>
10 <p>{{$routeParams}}p>
11 <p>{{$routeParams.bookId}}p>
12 div>
13
14 body>
15 html>
京公网安备 11010802041100号