Вот другой способ изменить заголовок. Может быть, не такой масштабируемый, как фабричная функция (которая могла бы обрабатывать неограниченное количество страниц), но мне было легче понять:
В моем 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 и добавил nav.html, используя ng-include и ng-view для моих частичных файлов:
<body class="ng-cloak" ng-controller="MainCtrl">
<div ng-include="'partials/nav.html'"></div>
<div>
<div ng-view></div>
</div>
Обратите внимание на этот нг-плащ? Это не имеет ничего общего с этим ответом, но он скрывает страницу до тех пор, пока она не загрузится, приятное прикосновение :) Узнайте, как здесь: 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. [Корни, я знаю - может быть, это сайт, посвященный всем видам куриных наггетсов;) В любом случае, вы можете обновить заголовок, когда пользователь нажимает на любую ссылку, поэтому на моей главной странице Crispy Critters, которая ведет на страницу с подробностями о животных, вот куда пойдет обновление $ 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>
person
noogrub
schedule
21.09.2012
