这是更改标题的另一种方法。也许不像工厂功能那样可扩展(可以想象处理无限的页面),但是对我来说更容易理解:
在我的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和ng-view添加了nav.html:
<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元素闪烁
这是基本模块。我把它放在一个名为“ 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的生物详细页面。这是Crispy Critters页面中使用的部分。[Corny,我知道-也许这是一个庆祝各种各样的鸡块的网站;这就是$ 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>