From b0b054bfdffd528d2ce9b102db9205d527cf02b3 Mon Sep 17 00:00:00 2001 From: Kieran Boyle Date: Mon, 25 Sep 2017 13:27:37 -0700 Subject: [PATCH 1/3] control page meta changes inside route change success Adds a `name` property to each route and uses a static dictionary for page metadata lookups v. having the code spread throughout the controllers. --- public/app.js | 100 +++++++++++++++++++++++--------------------------- 1 file changed, 46 insertions(+), 54 deletions(-) diff --git a/public/app.js b/public/app.js index 300db72..3461f81 100644 --- a/public/app.js +++ b/public/app.js @@ -1,55 +1,47 @@ -var app = angular.module('prerender-tutorial', ['ngRoute']) - .config(function($routeProvider, $locationProvider){ - $routeProvider.when('/', { - templateUrl : 'views/homeView.html', - controller: 'homeController' - }) - - $routeProvider.when('/about', { - templateUrl : '/views/aboutView.html', - controller: 'aboutController' - }) - - $routeProvider.when('/features', { - templateUrl : '/views/featuresView.html', - controller : 'featuresController' - }) - - $routeProvider.otherwise({ - redirectTo : '/' - }); - - $locationProvider.html5Mode(true); - $locationProvider.hashPrefix('!'); +angular + .module('prerender-tutorial', ['ngRoute']) + .config(function($routeProvider, $locationProvider){ + $routeProvider + .when('/', { + name: 'base', + templateUrl: 'views/homeView.html' + }) + .when('/about', { + name: 'about', + templateUrl: '/views/aboutView.html' + }) + .when('/features', { + name: 'features', + templateUrl: '/views/featuresView.html' + }) + .otherwise({ + redirectTo: '/' + }); + + $locationProvider.html5Mode(true); + $locationProvider.hashPrefix('!'); + }) + .run(function($rootScope){ + const pageMeta = { + base: { + pageTitle : 'AngularJS SEO Tutorial', + pageDescripton: 'Welcome to our tutorial on getting your AngularJS websites and apps indexed by Google.' + }, + about: { + pageTitle : 'About', + pageDescripton: 'We are a content heavy website so we need to be indexed.' + }, + features: { + pageTitle : 'Features', + pageDescripton: 'Check out some of our awesome features!' + } + }; + + $rootScope.$on('$routeChangeSuccess', function(event, current, previous){ + const route = current.$$route.name || 'base'; + const pageInfo = pageMeta[route]; + + $rootScope.pageTitle = pageInfo.pageTitle; + $rootScope.pageDescription = pageInfo.pageDescription; + }); }); - -function mainController($scope) { - // We will create an seo variable on the scope and decide which fields we want to populate - $scope.seo = { - pageTitle : '', - pageDescription : '' - }; -} - -function homeController($scope) { - // For this tutorial, we will simply access the $scope.seo variable from the main controller and fill it with content. - // Additionally you can create a service to update the SEO variables - but that's for another tutorial. - $scope.$parent.seo = { - pageTitle : 'AngularJS SEO Tutorial', - pageDescripton: 'Welcome to our tutorial on getting your AngularJS websites and apps indexed by Google.' - }; -} - -function aboutController($scope) { - $scope.$parent.seo = { - pageTitle : 'About', - pageDescripton: 'We are a content heavy website so we need to be indexed.' - }; -} - -function featuresController($scope) { - $scope.$parent.seo = { - pageTitle : 'Features', - pageDescripton: 'Check out some of our awesome features!' - }; -} From 3f0b27bcd051a54d9e107dda12d9a1afeefa4c03 Mon Sep 17 00:00:00 2001 From: Kieran Boyle Date: Mon, 25 Sep 2017 13:30:21 -0700 Subject: [PATCH 2/3] update index to use $root --- public/index.html | 73 +++++++++++++++++++++++------------------------ 1 file changed, 35 insertions(+), 38 deletions(-) diff --git a/public/index.html b/public/index.html index c5b7e1d..0f26fa8 100644 --- a/public/index.html +++ b/public/index.html @@ -1,49 +1,46 @@ - + - - + + - - Scotch Tutorial | {{ seo.pageTitle }} - + + Scotch Tutorial | {{ $root.pageTitle }} + - - - + + + - - - - - + + + + + -
+
- -
- +
-

Welcome to the Angular SEO Prerender Tutorial

- -
- -
+

Welcome to the Angular SEO Prerender Tutorial

+ +
+
From d3d2f81f2a3ab7346a4d9a245c3bada82adec930 Mon Sep 17 00:00:00 2001 From: Kieran Boyle Date: Thu, 5 Oct 2017 19:50:08 -0700 Subject: [PATCH 3/3] default to base metadata if route metadata has not been defined --- public/app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/app.js b/public/app.js index 3461f81..645c196 100644 --- a/public/app.js +++ b/public/app.js @@ -38,8 +38,8 @@ angular }; $rootScope.$on('$routeChangeSuccess', function(event, current, previous){ - const route = current.$$route.name || 'base'; - const pageInfo = pageMeta[route]; + const route = current.$$route.name; + const pageInfo = pageMeta[route] || pageMeta.base; $rootScope.pageTitle = pageInfo.pageTitle; $rootScope.pageDescription = pageInfo.pageDescription;