Angular單頁面動(dòng)態(tài)修改title[兼容微信]

Cheriselalala 發(fā)布于2019-08-22 11:03 / 605人閱讀

摘要：文件定義在通過路由定義標(biāo)題首頁首頁通過動(dòng)態(tài)調(diào)用標(biāo)題在里面定義通過監(jiān)聽的變化來動(dòng)態(tài)調(diào)用標(biāo)題首頁首頁文件在里同過頭部里的動(dòng)態(tài)調(diào)用首頁

js文件 定義module

var app = angular.module("app", ["ngRoute"]);

在config通過路由定義標(biāo)題

 app.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
        $routeProvider
            .when("/index", {templateUrl: "../tpls/home.html", title: "首頁"})
            .otherwise({redirectTo: "/index", title: "首頁"});
    }]);

通過run動(dòng)態(tài)調(diào)用標(biāo)題

在里面定義run ,通過監(jiān)聽 $routeChangeSuccess的變化來動(dòng)態(tài)調(diào)用標(biāo)題

app.run(["$rootScope",  function ($rootScope) {
       
        $rootScope.$on("$routeChangeSuccess", function (event, current, previous) {
            $rootScope.title = current.$$route.title || "首頁";
            document.title = current.$$route.title || "首頁";
            var $body = angular.element("body");
            var $iframe = $("").on("load", function () {
                $timeout(function () {
                    $iframe.off("load").remove();
                }, 0);
            }).appendTo($body);

        });

HTML 文件

在html里同過頭部head里的title 動(dòng)態(tài)調(diào)用title


    首頁

云服務(wù)器 GPU云服務(wù)器單頁面單頁面應(yīng)用工單管理頁面 aspx單頁面

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/91692.html

相關(guān)文章

Angular 2+ 監(jiān)聽路由變化動(dòng)態(tài)設(shè)置頁面標(biāo)題

摘要：今天我們實(shí)現(xiàn)單頁面應(yīng)用中路由變化設(shè)置頁面標(biāo)題，來優(yōu)化用戶的用戶體驗(yàn)。在中，解決起來要比容易得多，我們可以通過注入一個(gè)，在路由變化事件中使用提供的來動(dòng)態(tài)更新頁面標(biāo)題。現(xiàn)在很多web網(wǎng)站都采用了SPA單頁應(yīng)用，單頁面有很多優(yōu)點(diǎn)：用戶體驗(yàn)好、應(yīng)用響應(yīng)快、對(duì)服務(wù)器壓力小等等。同時(shí)也有一些缺點(diǎn)：首次加載資源太多，不利于SEO，前進(jìn)、后退、地址欄需要手動(dòng)管理。今天我們實(shí)現(xiàn)Angular單頁面應(yīng)...

entner 2019-08-20 17:37 評(píng)論0 收藏0
vue單頁面應(yīng)用中動(dòng)態(tài)修改title

摘要：適用于微信各大瀏覽器首先執(zhí)行命令用法之后在全局入口處，引入然后在路由中首頁活動(dòng)項(xiàng)目服務(wù)空間發(fā)現(xiàn)我的之后在各個(gè)組建中隨便一個(gè)標(biāo)簽中都可寫入想要?jiǎng)討B(tài)的改變值，可以這樣寫 vue-weachat-title ====================================== 適用于 1.微信 2.webview 3.各大瀏覽器－－－－－－－－ demo: http://www....

evin2016 2019-08-22 11:18 評(píng)論0 收藏0
angular2 + JSSDK的微信分享定制總結(jié)

摘要：本篇文章就記錄我的做微信分享信息定制的過程和踩坑總結(jié)。但是，這就要求在每個(gè)組件中都加微信分享代碼，會(huì)導(dǎo)致維護(hù)困難。在微信瀏覽器內(nèi)打開任何網(wǎng)頁，若不配置分享接口，微信會(huì)默認(rèn)使用如下信息作為分享信息：默認(rèn)標(biāo)題：HTML的title 默認(rèn)連接：當(dāng)前頁面的地址，即location.href 默認(rèn)圖片：會(huì)取當(dāng)前頁面body內(nèi)最前面的一張符合條件的圖片（尺寸必須大于300px × 300px...

qylost 2019-08-20 14:51 評(píng)論0 收藏0
前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快速搭建項(xiàng)目。本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快...

li21 2019-08-23 17:11 評(píng)論0 收藏0