Voici une autre façon de modifier le titre. Peut-être pas aussi évolutif qu'une fonction d'usine (qui pourrait en théorie gérer un nombre illimité de pages) mais il était plus facile pour moi de comprendre:
Dans mon index.html j'ai commencé comme ceci:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title ng-bind-template="{{title}}">Generic Title That You'll Never See</title>
Ensuite, j'ai fait un partiel appelé "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>
Ensuite, je suis retourné à "index.html" et j'ai ajouté le nav.html en utilisant ng-include et la vue ng pour mes partiels:
<body class="ng-cloak" ng-controller="MainCtrl">
<div ng-include="'partials/nav.html'"></div>
<div>
<div ng-view></div>
</div>
Remarquez ce ng-manteau? Cela n'a rien à voir avec cette réponse, mais elle masque la page jusqu'à ce qu'elle soit terminée, une belle touche :) Apprenez comment ici: Angularjs - les éléments ng-cloak / ng-show clignotent
Voici le module de base. Je l'ai mis dans un fichier appelé "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"});
});
}());
Si vous regardez vers la fin du module, vous verrez que j'ai une page de détail de créature basée sur: id. C'est un partiel qui est utilisé à partir de la page Crispy Critters. [Corny, je sais - c'est peut-être un site qui célèbre toutes sortes de pépites de poulet;) Quoi qu'il en soit, vous pouvez mettre à jour le titre lorsqu'un utilisateur clique sur n'importe quel lien, donc dans ma page principale de Crispy Critters qui mène à la page de détail de la créature, c'est là que la mise à jour $ root.title irait, comme vous l'avez vu dans le nav.html ci-dessus:
<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>
Désolé si venteux mais je préfère un article qui donne suffisamment de détails pour le mettre en route. Notez que la page d'exemple dans les documents AngularJS est obsolète et montre une version 0.9 de ng-bind-template. Vous pouvez voir que ce n'est pas si différent.
Après coup: vous le savez, mais il est là pour quelqu'un d'autre; en bas de l'index.html, il faut inclure app.js avec le module:
<!-- APP -->
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>