Angular单页面动态修改title[兼容微信]

Cheriselalala 发布于2019-08-22 11:03 / 604人阅读

摘要：文件定义在通过路由定义标题首页首页通过动态调用标题在里面定义通过监听的变化来动态调用标题首页首页文件在里同过头部里的动态调用首页

js文件 定义module

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

在config通过路由定义标题

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

通过run动态调用标题

在里面定义run ,通过监听 $routeChangeSuccess的变化来动态调用标题

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 动态调用title


    首页

GPU云服务器云服务器单页面单页面应用工单管理页面 aspx单页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91692.html

Angular 2+ 监听路由变化动态设置页面标题

摘要：今天我们实现单页面应用中路由变化设置页面标题，来优化用户的用户体验。在中，解决起来要比容易得多，我们可以通过注入一个，在路由变化事件中使用提供的来动态更新页面标题。现在很多web网站都采用了SPA单页应用，单页面有很多优点：用户体验好、应用响应快、对服务器压力小等等。同时也有一些缺点：首次加载资源太多，不利于SEO，前进、后退、地址栏需要手动管理。今天我们实现Angular单页面应...

entner 2019-08-20 17:37 评论0 收藏0
vue单页面应用中动态修改title

摘要：适用于微信各大浏览器首先执行命令用法之后在全局入口处，引入然后在路由中首页活动项目服务空间发现我的之后在各个组建中随便一个标签中都可写入想要动态的改变值，可以这样写 vue-weachat-title ====================================== 适用于 1.微信 2.webview 3.各大浏览器－－－－－－－－ demo: http://www....

evin2016 2019-08-22 11:18 评论0 收藏0
angular2 + JSSDK的微信分享定制总结

摘要：本篇文章就记录我的做微信分享信息定制的过程和踩坑总结。但是，这就要求在每个组件中都加微信分享代码，会导致维护困难。在微信浏览器内打开任何网页，若不配置分享接口，微信会默认使用如下信息作为分享信息：默认标题：HTML的title 默认连接：当前页面的地址，即location.href 默认图片：会取当前页面body内最前面的一张符合条件的图片（尺寸必须大于300px × 300px...

qylost 2019-08-20 14:51 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

li21 2019-08-23 17:11 评论0 收藏0