Last active
December 7, 2015 20:03
-
-
Save shantanubhadoria/700d5cb3fb1dd019106a to your computer and use it in GitHub Desktop.
Angular Meteor: Using the pageTitle field inside data from angular-ui-router state params to modify html title tag
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module('module-name') | |
| .config(function($stateProvider) { | |
| $stateProvider | |
| .state('base.location',{ | |
| url: '/location', | |
| templateUrl: 'client/location/location.ng.html', | |
| // This is supposed to update page title when state changes(works in angularjs but doesnt work in angular-meteor) | |
| data: { | |
| 'pageTitle': 'Locations' | |
| }, | |
| resolve: { | |
| currentUser: ["$meteor", function($meteor){ | |
| return $meteor.requireUser(); | |
| }], | |
| loadPlugin: function ($ocLazyLoad) { | |
| return $ocLazyLoad.load([ | |
| ]); | |
| } | |
| } | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module('module-name') | |
| .run(["$rootScope", "$state", function($rootScope, $state) { | |
| $rootScope.$on("$stateChangeSuccess", function(previousRoute, currentRoute){ | |
| document.title = 'App Title | ' + currentRoute.data.pageTitle; | |
| }); | |
| }]) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
When switching from angular to Angular Meteor, one of the problematic issues you will face is updating the <title> tag using state params in angularJs way.
The most common and efficient way to update a page title on state change in angular ui-router is to add a data object in state
definition like so
AngularJs usually takes care of the rest. However this doesn't work in Meteorjs because Meteor doesn't allow you to initialize
your app inside <html> tags.
To handle this you must add three lines of code in your run.js
This will modify your Page title every time the angular state changes, and your old angular syntax of specifying pageTitle in
data object will continue to work like it did before.