Merge pull request #1186 from itelo/ImproveSEO

feat (title): Dynamic Title: Improve SEO

modules/articles/client/config/articles.client.routes.js

@@ -18,7 +18,10 @@
         url: '',
         templateUrl: 'modules/articles/client/views/list-articles.client.view.html',
         controller: 'ArticlesListController',
-        controllerAs: 'vm'
+        controllerAs: 'vm',
+        data: {
+          pageTitle: 'Articles List'
+        }
       })
       .state('articles.create', {
         url: '/create',
@@ -29,7 +32,8 @@
           articleResolve: newArticle
         },
         data: {
-          roles: ['user', 'admin']
+          roles: ['user', 'admin'],
+          pageTitle : 'Articles Create'
         }
       })
       .state('articles.edit', {
@@ -41,7 +45,8 @@
           articleResolve: getArticle
         },
         data: {
-          roles: ['user', 'admin']
+          roles: ['user', 'admin'],
+          pageTitle: 'Edit Article {{ articleResolve.title }}'
         }
       })
       .state('articles.view', {
@@ -51,6 +56,9 @@
         controllerAs: 'vm',
         resolve: {
           articleResolve: getArticle
+        },
+        data:{
+          pageTitle: 'Article {{ articleResolve.title }}'
         }
       });
   }

modules/chat/client/config/chat.client.routes.js

@@ -15,7 +15,8 @@
         controller: 'ChatController',
         controllerAs: 'vm',
         data: {
-          roles: ['user', 'admin']
+          roles: ['user', 'admin'],
+          pageTitle: 'Chat'
         }
       });
   }

modules/core/client/config/core.client.routes.js

@@ -13,30 +13,33 @@ angular.module('core').config(['$stateProvider', '$urlRouterProvider',
 
     // Home state routing
     $stateProvider
-    .state('home', {
-      url: '/',
-      templateUrl: 'modules/core/client/views/home.client.view.html'
-    })
-    .state('not-found', {
-      url: '/not-found',
-      templateUrl: 'modules/core/client/views/404.client.view.html',
-      data: {
-        ignoreState: true
-      }
-    })
-    .state('bad-request', {
-      url: '/bad-request',
-      templateUrl: 'modules/core/client/views/400.client.view.html',
-      data: {
-        ignoreState: true
-      }
-    })
-    .state('forbidden', {
-      url: '/forbidden',
-      templateUrl: 'modules/core/client/views/403.client.view.html',
-      data: {
-        ignoreState: true
-      }
-    });
+      .state('home', {
+        url: '/',
+        templateUrl: 'modules/core/client/views/home.client.view.html'
+      })
+      .state('not-found', {
+        url: '/not-found',
+        templateUrl: 'modules/core/client/views/404.client.view.html',
+        data: {
+          ignoreState: true,
+          pageTitle: 'Not-Found'
+        }
+      })
+      .state('bad-request', {
+        url: '/bad-request',
+        templateUrl: 'modules/core/client/views/400.client.view.html',
+        data: {
+          ignoreState: true,
+          pageTitle: 'Bad-Request'
+        }
+      })
+      .state('forbidden', {
+        url: '/forbidden',
+        templateUrl: 'modules/core/client/views/403.client.view.html',
+        data: {
+          ignoreState: true,
+          pageTitle: 'Forbidden'
+        }
+      });
   }
 ]);

modules/core/client/directives/page-title.client.directives.js

@@ -0,0 +1,40 @@
+(function () {
+  'use strict';
+
+  angular.module('core')
+    .directive('pageTitle', pageTitle);
+
+  pageTitle.$inject = ['$rootScope', '$timeout', '$interpolate', '$state'];
+
+  function pageTitle($rootScope, $timeout, $interpolate, $state) {
+    var directive = {
+      retrict: 'A',
+      link: link
+    };
+
+    return directive;
+
+    function link(scope, element) {
+      $rootScope.$on('$stateChangeSuccess', listener);
+
+      function listener(event, toState) {
+        var title = (getTitle($state.$current));
+        $timeout(function () {
+          element.text(title);
+        }, 0, false);
+      }
+
+      function getTitle(currentState) {
+        var applicationCoreTitle = 'MEAN.js';
+        var workingState = currentState;
+        if (currentState.data) {
+          workingState = (typeof workingState.locals !== 'undefined') ? workingState.locals.globals : workingState;
+          var stateTitle = $interpolate(currentState.data.pageTitle)(workingState);
+          return applicationCoreTitle + ' - ' + stateTitle;
+        } else {
+          return applicationCoreTitle;
+        }
+      }
+    }
+  }
+})();

modules/core/server/views/layout.server.view.html

@@ -5,7 +5,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
   <base href="/">
-  <title>{{title}}</title>
+  <title page-title></title>
   <meta name="description" content="{{description}}">
   <meta name="fragment" content="!">
 

modules/users/client/config/users-admin.client.routes.js

@@ -7,7 +7,10 @@ angular.module('users.admin.routes').config(['$stateProvider',
       .state('admin.users', {
         url: '/users',
         templateUrl: 'modules/users/client/views/admin/list-users.client.view.html',
-        controller: 'UserListController'
+        controller: 'UserListController',
+        data: {
+          pageTitle: 'Users List'
+        }
       })
       .state('admin.user', {
         url: '/users/:userId',
@@ -19,6 +22,9 @@ angular.module('users.admin.routes').config(['$stateProvider',
               userId: $stateParams.userId
             });
           }]
+        },
+        data: {
+          pageTitle: 'Edit {{ userResolve.displayName }}'
         }
       })
       .state('admin.user-edit', {
@@ -31,6 +37,9 @@ angular.module('users.admin.routes').config(['$stateProvider',
               userId: $stateParams.userId
             });
           }]
+        },
+        data: {
+          pageTitle: 'Edit User {{ userResolve.displayName }}'
         }
       });
   }

modules/users/client/config/users.client.routes.js

@@ -15,19 +15,31 @@ angular.module('users').config(['$stateProvider',
       })
       .state('settings.profile', {
         url: '/profile',
-        templateUrl: 'modules/users/client/views/settings/edit-profile.client.view.html'
+        templateUrl: 'modules/users/client/views/settings/edit-profile.client.view.html',
+        data: {
+          pageTitle: 'Settings'
+        }
       })
       .state('settings.password', {
         url: '/password',
-        templateUrl: 'modules/users/client/views/settings/change-password.client.view.html'
+        templateUrl: 'modules/users/client/views/settings/change-password.client.view.html',
+        data: {
+          pageTitle: 'Settings password'
+        }
       })
       .state('settings.accounts', {
         url: '/accounts',
-        templateUrl: 'modules/users/client/views/settings/manage-social-accounts.client.view.html'
+        templateUrl: 'modules/users/client/views/settings/manage-social-accounts.client.view.html',
+        data: {
+          pageTitle: 'Settings accounts'
+        }
       })
       .state('settings.picture', {
         url: '/picture',
-        templateUrl: 'modules/users/client/views/settings/change-profile-picture.client.view.html'
+        templateUrl: 'modules/users/client/views/settings/change-profile-picture.client.view.html',
+        data: {
+          pageTitle: 'Settings picture'
+        }
       })
       .state('authentication', {
         abstract: true,
@@ -36,11 +48,17 @@ angular.module('users').config(['$stateProvider',
       })
       .state('authentication.signup', {
         url: '/signup',
-        templateUrl: 'modules/users/client/views/authentication/signup.client.view.html'
+        templateUrl: 'modules/users/client/views/authentication/signup.client.view.html',
+        data: {
+          pageTitle: 'Signup'
+        }
       })
       .state('authentication.signin', {
         url: '/signin?err',
-        templateUrl: 'modules/users/client/views/authentication/signin.client.view.html'
+        templateUrl: 'modules/users/client/views/authentication/signin.client.view.html',
+        data: {
+          pageTitle: 'Signin'
+        }
       })
       .state('password', {
         abstract: true,
@@ -49,7 +67,10 @@ angular.module('users').config(['$stateProvider',
       })
       .state('password.forgot', {
         url: '/forgot',
-        templateUrl: 'modules/users/client/views/password/forgot-password.client.view.html'
+        templateUrl: 'modules/users/client/views/password/forgot-password.client.view.html',
+        data: {
+          pageTitle: 'Password forgot'
+        }
       })
       .state('password.reset', {
         abstract: true,
@@ -58,15 +79,24 @@ angular.module('users').config(['$stateProvider',
       })
       .state('password.reset.invalid', {
         url: '/invalid',
-        templateUrl: 'modules/users/client/views/password/reset-password-invalid.client.view.html'
+        templateUrl: 'modules/users/client/views/password/reset-password-invalid.client.view.html',
+        data: {
+          pageTitle: 'Password reset invalid'
+        }
       })
       .state('password.reset.success', {
         url: '/success',
-        templateUrl: 'modules/users/client/views/password/reset-password-success.client.view.html'
+        templateUrl: 'modules/users/client/views/password/reset-password-success.client.view.html',
+        data: {
+          pageTitle: 'Password reset success'
+        }
       })
       .state('password.reset.form', {
         url: '/:token',
-        templateUrl: 'modules/users/client/views/password/reset-password.client.view.html'
+        templateUrl: 'modules/users/client/views/password/reset-password.client.view.html',
+        data: {
+          pageTitle: 'Password reset form'
+        }
       });
   }
 ]);