<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script>
<body ng-app="myApp">
<p><a href="#/!">主页</a></p>
<a href="#!london">城市 1</a>
<a href="#!paris">城市 2</a>
<p>点击链接。</p>
<p>注意，每个“视图”都有自己的控制器，每个控制器都为“msg”变量赋值。</p>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);app.config(function($routeProvider) { $routeProvider
.when("/", { templateUrl : "/demo/angular/main.html",
})
.when("/london", { templateUrl : "/demo/angular/london.html",
controller : "londonCtrl"
})
.when("/paris", { templateUrl : "/demo/angular/paris.html",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) { $scope.msg = "我爱伦敦";
});
app.controller("parisCtrl", function ($scope) { $scope.msg = "我爱巴黎";
});
</script>
</body>
</html>