这是进行标题更改的另一种方法。也许不像工厂函数那样可扩展（可以想象它可以处理无限的页面），但我更容易理解：
在我的 index.html 中，我是这样开始的：
<!DOCTYPE html>
<html ng-app="app">
<head>
<title ng-bind-template="{{title}}">Generic Title That You'll Never See</title>
然后我做了一个名为“nav.html”的部分：
<div ng-init="$root.title = 'Welcome'">
<ul class="unstyled">
<li><a href="#/login" ng-click="$root.title = 'Login'">Login</a></li>
<li><a href="#/home" ng-click="$root.title = 'Home'">Home</a></li>
<li><a href="#/admin" ng-click="$root.title = 'Admin'">Admin</a></li>
<li><a href="#/critters" ng-click="$root.title = 'Crispy'">Critters</a></li>
</ul>
</div>
然后我回到“index.html”并使用 ng-include 添加了 nav.html，并为我的部分添加了 ng-view：
<body class="ng-cloak" ng-controller="MainCtrl">
<div ng-include="'partials/nav.html'"></div>
<div>
<div ng-view></div>
</div>
注意到那个 ng-cloak 了吗？它与这个答案没有任何关系，但它会隐藏页面直到它完成加载，一个很好的接触:) 在此处了解如何：Angularjs - ng-cloak/ng-show elements blink
这是基本模块。我把它放在一个名为“app.js”的文件中：
(function () {
'use strict';
var app = angular.module("app", ["ngResource"]);
app.config(function ($routeProvider) {
// configure routes
$routeProvider.when("/", {
templateUrl: "partials/home.html",
controller:"MainCtrl"
})
.when("/home", {
templateUrl: "partials/home.html",
controller:"MainCtrl"
})
.when("/login", {
templateUrl:"partials/login.html",
controller:"LoginCtrl"
})
.when("/admin", {
templateUrl:"partials/admin.html",
controller:"AdminCtrl"
})
.when("/critters", {
templateUrl:"partials/critters.html",
controller:"CritterCtrl"
})
.when("/critters/:id", {
templateUrl:"partials/critter-detail.html",
controller:"CritterDetailCtrl"
})
.otherwise({redirectTo:"/home"});
});
}());
如果您看向模块的末尾，您会看到我有一个基于 :id 的 critter-detail 页面。这是 Crispy Critters 页面中使用的部分内容。[Corny，我知道 - 也许它是一个庆祝各种鸡块的网站；）无论如何，您可以在用户点击任何链接时更新标题，所以在我的 Crispy Critters 主页面中，该页面通向 critter-detail 页面，这就是 $root.title 更新的地方，就像你在上面的 nav.html 中看到的那样：
<a href="#/critters/1" ng-click="$root.title = 'Critter 1'">Critter 1</a>
<a href="#/critters/2" ng-click="$root.title = 'Critter 2'">Critter 2</a>
<a href="#/critters/3" ng-click="$root.title = 'Critter 3'">Critter 3</a>
抱歉，风太大了，但我更喜欢一个能提供足够详细信息的帖子来启动和运行。请注意，AngularJS 文档中的示例页面已经过时，并且显示了 0.9 版本的 ng-bind-template。你可以看到它并没有太大的不同。
事后思考：你知道这一点，但它是为其他人准备的；在 index.html 的底部，必须在模块中包含 app.js：
<!-- APP -->
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>