Setting page title on route change
Change-Id: I9c23d0215c7967eb3eff3a341ab3f210fb16a47a
diff --git a/src/app/core/index.ts b/src/app/core/index.ts
index 270541b..d93e627 100644
--- a/src/app/core/index.ts
+++ b/src/app/core/index.ts
@@ -6,6 +6,7 @@
import {xosTable} from './table/table';
import {RuntimeStates} from './services/runtime-states';
import {NavigationService} from './services/navigation';
+import {PageTitle} from './services/page-title';
export const xosCore = 'xosCore';
@@ -14,6 +15,7 @@
.config(routesConfig)
.provider('RuntimeStates', RuntimeStates)
.service('NavigationService', NavigationService)
+ .service('PageTitle', PageTitle)
.component('xosHeader', xosHeader)
.component('xosFooter', xosFooter)
.component('xosNav', xosNav)
diff --git a/src/app/core/services/page-title.ts b/src/app/core/services/page-title.ts
new file mode 100644
index 0000000..6f7e0c3
--- /dev/null
+++ b/src/app/core/services/page-title.ts
@@ -0,0 +1,33 @@
+import {StyleConfig} from '../../config/style.config';
+export interface IXosPageTitleService {
+ get(): string;
+ set(title: string): void;
+ formatStateName(stateName: string): string;
+}
+
+export class PageTitle {
+ static $inject = ['$window', '$transitions'];
+ constructor(
+ private $window: angular.IWindowService,
+ private $transitions: any // missing definition
+ ) {
+ console.log('page title');
+ this.$transitions.onSuccess({ to: '**' }, (transtion) => {
+ this.set(this.formatStateName(transtion.$to().name));
+ });
+ }
+
+ get() {
+ return this.$window.document.title;
+ }
+
+ set(title: string) {
+ this.$window.document.title = `${StyleConfig.projectName} - ${title}`;
+ }
+
+ private formatStateName(stateName: string): string {
+ // TODO pluralize and capitalize first letter only
+ return stateName.replace('xos.', '').toUpperCase();
+ }
+}
+
diff --git a/src/index.html b/src/index.html
index 0034022..4cfc84e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,7 +3,7 @@
<head>
<base href="/">
<meta charset="utf-8">
- <title>FountainJS</title>
+ <title>XOS</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/png" href="http://fountainjs.io/assets/imgs/fountain.png" />
diff --git a/src/index.ts b/src/index.ts
index 81a0d43..77955b3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -22,6 +22,7 @@
import {IXosCrudData} from './app/views/crud/crud';
import * as _ from 'lodash';
import {IXosNavigationService} from './app/core/services/navigation';
+import {IXosPageTitleService} from './app/core/services/page-title';
export interface IXosState extends angular.ui.IState {
data: IXosCrudData;
@@ -64,14 +65,13 @@
.factory('CredentialsInterceptor', CredentialsInterceptor)
.factory('NoHyperlinksInterceptor', NoHyperlinksInterceptor)
.component('xos', main)
- .run((ModelDefs: IModeldefsService, RuntimeStates: IRuntimeStatesService, NavigationService: IXosNavigationService) => {
- // Dinamically add a state
- RuntimeStates.addState('test', {
- parent: 'xos',
- url: 'test',
- template: 'Test State'
- });
-
+ .run((
+ ModelDefs: IModeldefsService,
+ RuntimeStates: IRuntimeStatesService,
+ NavigationService: IXosNavigationService,
+ PageTitle: IXosPageTitleService
+ ) => {
+ // Dinamically add a core states
ModelDefs.get()
.then((models: IModeldef[]) => {
_.forEach(models, (m: IModeldef) => {