Node on train trainjs logo

Slightly dynamic pages

Our plan is to edit the Home, Help, and About pages to make page titles that change on each page. This will involve using the <title> tag in our page views.

The (mostly) static pages for the sample app:

URL Base title Variable title

/static_pages/home

"Node On Train Tutorial Sample App"

"Home"

/static_pages/help

"Node On Train Tutorial Sample App"

"Help"

/static_pages/about

"Node On Train Tutorial Sample App"

"About"

Testing titles

We’ll write simple tests for each of the titles

public/test/e2e_test/controllers/static_pages_controller_test.js

describe('staticPagesControllerTest', function() {

	it('should get home', function() {
		var current_url = 'http://localhost:1337/#/static_pages/home';
		browser.get(current_url);
		expect(browser.getCurrentUrl()).toContain('#/static_pages/home');
		expect( element(by.css('body')).getText() ).not.toEqual('');
		expect(browser.getTitle()).toEqual('Home | Node On Train Tutorial Sample App');
	});
	it('should get help', function() {
		var current_url = 'http://localhost:1337/#/static_pages/help';
		browser.get(current_url);
		expect(browser.getCurrentUrl()).toContain('#/static_pages/help');
		expect( element(by.css('body')).getText() ).not.toEqual('');
		expect(browser.getTitle()).toEqual('Help | Node On Train Tutorial Sample App');
	});

	it('should get about', function() {
		var current_url = 'http://localhost:1337/#/static_pages/about';
		browser.get(current_url);
		expect(browser.getCurrentUrl()).toContain('#/static_pages/about');
		expect( element(by.css('body')).getText() ).not.toEqual('');
		expect(browser.getTitle()).toEqual('About | Node On Train Tutorial Sample App');
	});

});

With the tests, you should verify that the test suite is currently failing

~/sample_app $ protractor protractor.conf.js
3 specs, 3 failures

Adding page titles

Using the head directive and state data to dynamically change title

public/app.js

.state('static_pages_help', {
	url: '/static_pages/help',
	templateUrl: 'partials/static_pages/help.html',
	controller: 'StaticPagesHelpCtrl',
	data: {
		title: 'Help'
	}
})
.state('static_pages_home', {
	url: '/static_pages/home',
	templateUrl: 'partials/static_pages/home.html',
	controller: 'StaticPagesHomeCtrl',
	data: {
		title: 'Home'
	}
})
.state('static_pages_about', {
	url: '/static_pages/about',
	templateUrl: 'partials/static_pages/about.html',
	controller: 'StaticPagesAboutCtrl',
	data: {
		title: 'About'
	}
})

public/directives/head.js

var headDirective = angular.module('headDirective', []);

headDirective.directive('head', ['$state', '$rootScope', function($state, $rootScope) {
	return {
		restrict: 'E',
		link: function(scope, elem, attrs) {
			elem.prepend('<link rel="shortcut icon" href="assets/images/favicon.ico">');

			$rootScope.base_title = 'Node On Train Tutorial Sample App';
			$rootScope.title = $rootScope.base_title;

			scope.current_state = $state;
			scope.$watch('current_state.current.name', function(newValue, oldValue) {
				if (newValue) {
					if ($state.current.data && $state.current.data.title) {
						$rootScope.title = $state.current.data.title + ' | ' + $rootScope.base_title;
					} else {
						if ($rootScope.provide_title)
							$rootScope.title = $rootScope.provide_title + ' | ' + $rootScope.base_title;
						else
							$rootScope.title = $rootScope.base_title;
					}
				}
			});
		}
	};
}]);

public/index.html

<title>{{ title }}</title>

We can simply verify that the test suite is still passing

~/sample_app $ protractor protractor.conf.js
3 specs, 0 failures

Setting the root route

Setting the root route to the Home page.

public/app.js

sampleApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
	$urlRouterProvider.otherwise('/static_pages/home');
	$stateProvider
	.state('static_pages_help', {
		url: '/static_pages/help',
		templateUrl: 'partials/static_pages/help.html',
		controller: 'StaticPagesHelpCtrl',
		data: {
			title: 'Help'
		}
	})
	.state('static_pages_home', {
		url: '/static_pages/home',
		templateUrl: 'partials/static_pages/home.html',
		controller: 'StaticPagesHomeCtrl',
		data: {
			title: 'Home'
		}
	})
	.state('static_pages_about', {
		url: '/static_pages/about',
		templateUrl: 'partials/static_pages/about.html',
		controller: 'StaticPagesAboutCtrl',
		data: {
			title: 'About'
		}
	})
}]);