CODEWITHSUNDEEP
node.jsmeanjs
Manoj Sanjeewa
Manoj Sanjeewa

Reputation: 1079

MEAN js dynamic title

how to add dynamic title for each pages of the MEAN js application. in the layout.server.js has defined the title as follows.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

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

so how can we make dynamic title?

Upvotes: 3

Views: 1130

Answers (3)

wilhelmAHHH
wilhelmAHHH

Reputation: 1

The MEAN.JS page title is already dynamic and can be found at modules/core/client/directives/page-title.client.directive.js:

function listener(event, toState) {
        var applicationCoreTitle = 'MEAN.js',
          separator = ' - ',
          stateTitle = applicationCoreTitle + separator;

Whereas 'MEAN.js' is the default page title and can be changed accordingly.

Upvotes: -1

Luke Kroon
Luke Kroon

Reputation: 1103

To add to the accepted question, in the MeanJS stack you can do the following:

Create a new view in the modules/core/client/views ex. title.client.view.html.

In the file title.client.view.html you can get the title by doing:

<div ng-controller="HeaderController">
   <span>{{$state.current.data.pageTitle}}</span>
</div>

The HeaderController has a $state variable that contains the current state title specified in:

.state('some-state', {
url: '/someurl',
templateUrl: 'some-path-to-view',
data: {
    title: 'My new title',
}})

Then to get the title in the modules/core/server/views/layout.server.view.html file you include title.client.view.html like this:

<div ng-include="'/modules/core/client/views/title.client.view.html'"></div>

This will render the title of a state dynamically as you navigate.

Upvotes: 0

pgrodrigues
pgrodrigues

Reputation: 2078

Some people might be mislead thinking that besides it is already dynamic, it can be changed and it is controlled by angular out of the box because of having an expression with {{ }} but that's not quite true.

In fact {{title}} could mean an expression that should be evaluated against scope.title, however if you take a deeper look at MEAN.js you will see that it is using the swig template engine which also uses {{ }} to define variables. In this case, {{title}} is NOT an angular expression, it is a swig variable which was passed via express/swig and it can be changed in the config/env/default.js (in MEAN.js 0.4.0).

If you want the title to be changed in the frontend (i.e. possible to change it within angular logic) you have to assign a scope variable to the title element or use a custom directive. Even if, at first, the title value is the one defined using express/swig, angular can take control afterwards and change it accordingly to your needs.

One solution could be to define the title in your angular states like this:

.state('some-state', {
    url: '/someurl',
    templateUrl: 'some-path-to-view',
    data: {
        title: 'My new title',
    }
  })

And then listen for the $stateChangeSuccess event to set the title:

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
    console.log(toState.data.title); // Prints the new title to the console
    // Set the title    
});

EDIT: First paragraph rewritten for more coherence.

Upvotes: 5

Related Questions