تغییر عنوان صفحه به صورت داینامیک با استفاده از AngularJS

در این مقاله خواهیم دید چگونه می توان عنوان یک صفحه را به صورت داینامیک با استفاده از AngularJS تغییر داد. عناوینی را در یک آرایه جمع آوری کرده و هنگامی که کاربر صفحه مشابه را درخواست مینماید یک عنوان به صورت تصادفی نمایش خواهیم داد.

برای پیاده سازی آن به یک کنترلر AngularJS و یک سرویس احتیاج داریم. و از تگ html صفحه به عنوان ماژول برنامه angular خود استفاده خواهیم کرد.

اهمیت تگ Title به شرح زیر است:

یک Title ، عنوان را به نوار ابزار مرورگر اضافه میکند.

همچنین هنگامی که صفحه ای را به favorites اضافه میکنیم، عنوانی برای آن فراهم می شود.

با نمایش عنوان صفحه در نتایج جستجو ، تاثیر مثبتی بر امتیاز صفحه شما در Google search دارد.

برای شروع یک Empty Web site ایجاد میکنیم.

Angular JS را از NuGet نصب میکنیم تا بتوانیم از امکانات آن استفاده کنیم.

اکنون یک صفحه جدید به برنامه اضافه میکنیم. با کلیک راست بر روی نام پروژه و از قسمت add گزینه HTML 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="myScripts.js"></script>

myScript.js فایل جاوااسکریپت ما است که اسکریپتهای Angular JS در آن نوشته می شوند. بعد از اضافه کردن منابع تغییراتی را در صفحه خود به صورت زیر اعمال میکنیم.

<!DOCTYPE html>
<html ng-app="titApp" ng-controller="titCtrl as t">
<head>
    <title>{{t.title}} - برنامه نویسان</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="myScripts.js"></script>
</head>
<body >
    <form>
        <h3><a href="http://barnamenevisan.org">مرجع تخصصی برنامه نویسان</a></h3>

        <h1>{{t.title}}</h1>
    </form>

</body>
</html>

همانطور که میبینید titApp نام برنامه Angular JS ما و titCtrl نام کنترلر ماست. به سراغ نوشتن اسکریپت خود می رویم. برنامه AnguarJS را به صورت زیر می توانید اضافه کنید.

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

اکنون کنترلر Angular JS را به صورت زیر ایجاد میکنیم.

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

در اینجا myFactory نام سرویس AngularJS ما است. و همانطور که میبینید آرایه ای با عناوین مختلف در آن قرار داده شده است. یک عدد تصادفی بین 1 تا 6 را تولید کرده و مقدار متناسب از آرایه را توسط ایندکس به آن نسبت می دهیم. همچنین بجای آرایه می توان این داده ها را در دیتابیس ذخیره و از آن واکشی کرد. در این قسمت از دو تابع setTiltle و getTitle برای تنظیم و دریافت عنوان استفاده شده است. در آخر کدهای سرویس را به صورت زیر اضافه خواهیم کرد.

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

کد تکمیل شده اسکریپت ما به صورت زیر خواهد بود.

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

برنامه را اجرا کرده و نتیجه به صورت زیر ظاهر می شود.

با هر بار refresh عنوان صفحه تغییر خواهد کرد:

آموزش angular

فایل های ضمیمه

4848_WebApplication13.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

تغییر عنوان صفحه به صورت داینامیک با استفاده از AngularJS

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید