AngularJS service does not work correctly
I want to create dynamic page title in my webapp. I've created service
which should helps me, but it does not work. PageTitleService.getTitle()
always returns undefined. Is there someting wrong? What should be corected
to run this code? Here is the code:
app.js
var app = angular.module('app', ['restangular'])
.config(function ($routeProvider) {
$routeProvider.when('/index', {
templateUrl: 'views/main/index.html',
controller: 'PageController'
});
$routeProvider.when('/pages/:name', {
templateUrl: 'views/page/show.html',
controller: 'PageController'
});
$routeProvider.otherwise({
redirectTo: '/index'
});
});
app.defaultPageName = 'home';
app.name = 'Custom name';
PageTitleService.js:
app.factory('PageTitleService',
function() {
var title;
return {
setTitle : function(t) {
title = t;
},
getTitle : function() {
return title + ' - ' + app.name;
}
}
});
AppController.js
app.controller('AppController', ['$scope', 'PageTitleService',
function($scope, PageTitleService) {
$scope.pageTitle = PageTitleService.getTitle();
}]);
PageContorller.js
app.controller('PageController',
['$location', '$routeParams', '$scope', 'PageService', 'PageTitleService',
function($location, $routeParams, $scope, PageService,
PageTitleService) {
var pageName = $routeParams.name !== undefined ? $routeParams.name
: app.defaultPageName;
var page = PageService.getPage(pageName);
PageTitleService.setTitle(page.title); //page.title is always a
string
$scope.title = page.title;
$scope.content = page.content;
}
]);
index.html (begin):
<!DOCTYPE html>
<html lang="en" data-ng-app="app" data-ng-controller="AppController">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta name="description" content="">
<title>{{ pageTitle }}</title>
</head>
No comments:
Post a Comment