DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • Rediscovering Angular: Modern Advantages and Technical Stack
  • Angular Input/Output Signals: The New Component Communication
  • Azure Deployment Using FileZilla
  • Angular RxJS Unleashed: Supercharge Your App With Reactive Operators

Trending

  • Grafana Loki Fundamentals and Architecture
  • My LLM Journey as a Software Engineer Exploring a New Domain
  • Endpoint Security Controls: Designing a Secure Endpoint Architecture, Part 2
  • The Full-Stack Developer's Blind Spot: Why Data Cleansing Shouldn't Be an Afterthought
  1. DZone
  2. Coding
  3. Frameworks
  4. Change Page Titles Dynamically Using AngularJS

Change Page Titles Dynamically Using AngularJS

In this article, we are going to see how we can change the title of a page dynamically using AngularJS. Read on and see how it's done.

By 
Sibeesh Venu user avatar
Sibeesh Venu
·
Mar. 09, 16 · Tutorial
Likes (3)
Comment
Save
Tweet
Share
17.0K Views

Join the DZone community and get the full member experience.

Join For Free

in this article, we are going to see how we can change the title of a page dynamically using angularjs. we will be showing random titles which we have already set in an array to the user whenever a user reloads the same page. to implement this, we are creating an angularjs controller and service, and we are treating the html tag of our page as our angularjs app module and controller.

you can always download the source code here: change the page title dynamically

background

for the past few days, i have been experimenting with angularjs. if you want to see my latest articles related to angular js, they are here: angular js latest articles . in this post, we are going to change the page title dynamically with each user action.

importance of title tag

  • a title tag adds the title in a browser toolbar
  • it also provides a title for the page when added to favorites
  • you can also positively affect your page ranking in google search by displaying title for the page in search result
  • now we will start coding.

    create an empty website in visual studio

    click file-> new-> web site.

    image title

    empty website in visual studio

    install angularjs from nuget packages

    once your application is opened, please install angularjs first, since we are going to do all of our coding using angularjs.

    image title

    install angular js from nuget packages

    using the code

    before starting, we need to add the necessary references to our page.

    <script src="scripts/angular.min.js"></script>
        <script src="scripts/angular-aria.min.js"></script>
        <script src="scripts/angular-route.min.js"></script>
        <script src="scripts/myscripts.js"></script>

    here " myscripts.js" is our javascript file where we are going to write out angular js scripts. once you add the reference, we will make some changes in our page as follows.

    <!doctype html>
    <html ng-app="titapp" ng-controller="titctrl as t">
    <head>
        <title>{{t.title}} - sibeesh passion</title>
    
        <meta charset="utf-8" />
        <script src="scripts/angular.min.js"></script>
        <script src="scripts/angular-aria.min.js"></script>
        <script src="scripts/angular-route.min.js"></script>
        <script src="scripts/myscripts.js"></script>
    </head>
    <body>
        <h1>{{t.title}}</h1>
    </body>
    </html>

    as you can see, titapp is our angular js app name and titctrl is our controller name, now we will start writing the scripts.

    add angular js app

    you can add an angular js app as follows.

    (function () {
        var app;
        app = angular.module('titapp', []);
    })();

    now we will create our controller.

    add angular js controller

    below is our angular js controller scripts.

    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.');
            }
        });

    here myfactory is our angularjs service name, and as you can see we have set an array with possible titles. we are generating one random number between 1 and 6 and take the appropriate value from the array by index. you can always load the data from a database instead. here we use two functions settitle and gettitle, to set the title and get the title. now we will see our angular js service scripts.

    add angular js service

    app.service('myfactory', function () {
            var vartitle = 'change title dynamically demo';
            this.gettitle = function () {
                return vartitle;
            };
            this.settitle = function (tit) {
                vartitle = tit;
            };
        });

    now, let's see the complete angular js scripts .

    complete scripts

    (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;
            };
        });
    })();

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

    output

    chnage_page_title_dynamically_using_angular_js_output


    change_page_title_dynamically_using_angular_js_output


    chnage_page_title_dynamically_using_angular_js_output


    change_page_title_dynamically_using_angular_js_output


    happy coding!

    AngularJS

    Published at DZone with permission of Sibeesh Venu, DZone MVB. See the original article here.

    Opinions expressed by DZone contributors are their own.

    Related

    • Rediscovering Angular: Modern Advantages and Technical Stack
    • Angular Input/Output Signals: The New Component Communication
    • Azure Deployment Using FileZilla
    • Angular RxJS Unleashed: Supercharge Your App With Reactive Operators

    Partner Resources

    ×

    Comments
    Oops! Something Went Wrong

    The likes didn't load as expected. Please refresh the page and try again.

    ABOUT US

    • About DZone
    • Support and feedback
    • Community research
    • Sitemap

    ADVERTISE

    • Advertise with DZone

    CONTRIBUTE ON DZONE

    • Article Submission Guidelines
    • Become a Contributor
    • Core Program
    • Visit the Writers' Zone

    LEGAL

    • Terms of Service
    • Privacy Policy

    CONTACT US

    • 3343 Perimeter Hill Drive
    • Suite 100
    • Nashville, TN 37211
    • support@dzone.com

    Let's be friends:

    Likes
    There are no likes...yet! 👀
    Be the first to like this post!
    It looks like you're not logged in.
    Sign in to see who liked this post!