Change The Page Title Dynamically Using AngularJS

<em>
    app.controller('titCtrl', function ($scope, myFactory) {
        var num = Math.floor(Math.random() * 6) + 1;
        var newTit = ['Change Page Layout Dynamically Using jQuery Layout Plug in',
                      'February 2016 Month Winner In C-Sharp Corner',
                      'Custom Deferred Grid Using MVC Web API And Angular JS',
                      'TagIt Control With Data From Database Using Angular JS In MVC Web API',
                      'jQuery Datatable With Server Side Data',
                      'Programmatically Extract or Unzip Zip,Rar Files And Check'];
        myFactory.setTitle(newTit[num]);
        var tt = myFactory.getTitle();
        if (tt != undefined) {
            this.title = tt;
        } else {
            console.log('Oops! Something went wrong while fetching the data.');
        }
    });
</em>

Here myFactory is our Angular JS service name, and as you can see we have set an array with possible tiles in it already. We generate one random number between 1 to 6 and take the appropriate value from the array by index. You can always load these data from a database instead. Here we use two functions setTitle andgetTitle, to set the title and get the title. Now we will see our Angular JS service scripts.

Add Angular JS Service

<em>
    app.service('myFactory', function () {
        var varTitle = 'Change Title Dynamically Demo';
        this.getTitle = function () {
            return varTitle;
        };
        this.setTitle = function (tit) {
            varTitle = tit;
        };
    });
</em>

Now let us see the complete Angular JS scripts.

Complete Scripts

<em>
    (function () {
        var app;
        app = angular.module('titApp', []);
        app.controller('titCtrl', function ($scope, myFactory) {
            var num = Math.floor(Math.random() * 6) + 1;
            var newTit = ['Change Page Layout Dynamically Using jQuery Layout Plug in',
                          'February 2016 Month Winner In C-Sharp Corner',
                          'Custom Deferred Grid Using MVC Web API And Angular JS',
                          'TagIt Control With Data From Database Using Angular JS In MVC Web API',
                          'jQuery Datatable With Server Side Data',
                          'Programmatically Extract or Unzip Zip,Rar Files And Check'];
            myFactory.setTitle(newTit[num]);
            var tt = myFactory.getTitle();
            if (tt != undefined) {
                this.title = tt;
            } else {
                console.log('Oops! Something went wrong while fetching the data.');
            }
        });
        app.service('myFactory', function () {
            var varTitle = 'Change Title Dynamically Demo';
            this.getTitle = function () {
                return varTitle;
            };
            this.setTitle = function (tit) {
                varTitle = tit;
            };
        });
    })();
</em>

We have done everything needed, now it is time to see the output.

Output

Chnage_Page_Title_Dynamically_Using_Angular_JS_Output

Chnage_Page_Title_Dynamically_Using_Angular_JS_Output

Happy coding.

Conclusion

Did I miss anything that you may think is needed? Have you ever wanted to do this requirement? Did you find this post useful? I hope you liked this article. Please share with me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, or Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Please see this article in my blog here.