<!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="#!banana">香蕉</a>
<a href="#!tomato">番茄</a>
<p>点击链接可更改内容。</p>
<p>ng-view 指令中显示的 HTML 写在 $routeProvider.when 方法的 template 属性中。</p>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);app.config(function($routeProvider) { $routeProvider
.when("/", { template : "<h1>主页</h1><p>点击链接以更改此内容</p>"
})
.when("/banana", { template : "<h1>香蕉</h1><p>香蕉含有约75%的水分。</p>"
})
.when("/tomato", { template : "<h1>番茄</h1><p>番茄含有约95%的水分。</p>"
});
});
</script>
</body>
</html>