标签: single-page-application

我在我的角应用程序中使用UI路由器.我正在尝试整合state change事件,但他们没有解决状态变化问题.其他一切工作正常,控制台没有错误.我遇到了类似的问题,但没有一个解决方案对我有用:

使用ui-router(AngularJS)时,$ rootScope.$ on("$ routeChangeSuccess"或$ rootScope.$ on("$ stateChangeSuccess")不起作用

angular + ui-router:$ stateChangeSuccess在状态b上触发,但不在ab上触发

以下是我的Angular代码:

(function() {

    angular.module("bootdemo", [
        "ngResource",       
        "ui.router",
        "bootdemo.core",
        "bootdemo.index"        
    ])
    .run(function ($rootScope, $location, $state, $stateParams) {

        $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ 
            alert("root change success");
        })

        $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams, options){ 
            alert("root change start");
        })

        $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){ 
            alert("root change error");
        })
    })
    .config(function($stateProvider, $urlRouterProvider){
        $urlRouterProvider.otherwise('/');
        $stateProvider
            .state('index', {
                url: "/",
                templateUrl: '/index/templates/welcome.html',
                controller: 'IndexController as vm' …

我正在开展一个大型项目,显然我们需要一种延迟加载脚本的方法.

我之前使用过require.js非常好,但问题是在我们连接和缩小文件之后,我们得到了一个1.5M的js文件.

所以我刚刚遇到OcLazyload,它看起来很有前途,但我在网上看到很多使用require和ocLazyLoad的例子,我有点困惑为什么你想要同时使用它们.他们俩都做同样的事吗？

嗨,我正在寻找一个非常简单的单页面Web应用程序示例,纯粹的javascript/jquery.不想使用角形骨架等.

我在firebase上托管SPA,几乎所有路径都被重写index.html.我正在使用基于webpack hash的缓存清除,所以我想总是阻止缓存我的index.html而不是任何其他文件.我发现这样做非常困难.具体来说,我的文件布局如下所示

/
??? index.html
??? login.html
??? js
?   ??? login.ba22ef2579d744b26c65.bundle.js
?   ??? main.6d0ef60e45ae7a11063c.bundle.js
??? public
    ??? favicon-16x16.ico

"sources": "index.html"在从文档中读到这个引用之前,我开始天真.

无论使用glob表示法的任何重写规则如何,每个定义都必须具有与原始请求路径匹配的源键.

好的,所以不是一个简单的glob指定我想要这些头文件的文件,我想我需要一个路径.由于大多数路径重定向到index.html,我需要一个glob,它排除了我不想放置这些头的所有路径.

作为参考,我的firebase.json托管部分如下所示:

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "cleanUrls": true,
    "trailingSlash": false,
    "headers": [
      {
        "source": <<<WHAT-GOES-HERE?>>>,
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          },
          {
            "key": "Pragma",
            "value": "no-cache"
          },
          {
            "key": "Expires",
            "value": "0"
          }
        ]
      } …

我在我的单页应用程序中使用knockout(应用程序只有一个入口点,应用程序的视图通过进行ajax调用和修改页面而改变).

我的应用程序,我希望人们利用通过fb,twitter,g +共享页面.在标准应用程序中,我会做这样的事情:

<meta property="og:title" content="page title" />
.. other things like url, image ..

在fb上分享页面的人会得到一个很好的页面标题.但是在SPA中,我的标题是在开始时创建的,然而我正在用JS修改它:$('meta[name="og:title"]').attr('content', 'new title');所有社交网络都采用旧内容(这是预期的并且它是用这些 资源编写的).

我的应用程序正在使用JS路由,因此每个不同的页面都有自己的特定地址,如下所示:http://domain.com/#!route/123.阅读两个类似的问题我得到了相互矛盾的答案

• 这是不可能的
• 这可以通过实现特定的服务器端逻辑来实现,该逻辑基于跟踪FB用户代理.

当然第二个只适用于FB.

我的问题是:2014年引擎解析开放图形信息的方式是否有任何改进,是否可以在单页面应用程序中正确使用它.特别是我有兴趣在FB,Twitter,G +上很好地展示共享内容.

在编写Progressive Web App(PWA)时,我正试图在我的head部分处理元数据html.通过元数据,我的意思是:

• title&descriptionmeta标签
• Atom供稿链接URL元标记
• OpenSearch元标记
• Google结构化数据
• Facebook OpenGraph
• Twitter卡片

单页App Shell

上面的所有元数据对于应用中的每个页面都是不同的.使用单个html应用程序shell将丢失以上所有内容.可能有一些迹象表明我在这里错了,搜索引擎现在执行JavaScript.如果是这样,这是如何工作的？我会在每次客户端导航时使用AJAX检索HTML头吗？这适用于所有搜索引擎吗？有什么缺点？

服务器端渲染

使用此选项,每个页面都在服务器上呈现,并具有自己的自定义head元数据.您可以使用"网络优先"或"最快速率"缓存策略.这种方法的缺点是你会失去一些性能,因为你的app shell没有缓存在客户端,也没有立即加载,让用户可以立即查看.

题？

两种选择似乎都相互对立.您可以拥有性能或良好的元数据,以提升您的SEO和页面共享体验.什么是快乐的中间地带？这两种世界的方法都是最好的吗？

更新

我从谷歌灯塔项目中发现了这个相关的GitHub问题.

我使用 React 和 React Router 构建了我的网站，它托管在 Github Pages 上。当我在不是我的主页的页面上刷新网站或按住 ctrl+单击在新选项卡中打开页面时，会导致 404 错误。我知道这是因为 Github 页面无法访问前端路由，一种解决方案是添加一个重定向回 index.html 的 404.html 文件。

我尝试按照两者的说明进行操作

1. https://github.com/websemantics/gh-pages-spa
2. https://github.com/rafgraph/spa-github-pages

但两者都不适合我。我想我错过了一些东西，但我不知道出了什么问题，因为我对 React Router 不太熟悉。有人可以帮忙吗？（注意：我知道解决方案是使用 HashRouter，但我不希望我的 URL 看起来很难看）

我的代码可以在 GitHub 上查看： https: //github.com/christinexlin/portfolio

我们正在开始一个新的Angular2 SPA,我正在研究是否使用Angular快速入门教程(https://angular.io/guide/quickstart)或Webpack(https://angular.io/docs/ts)中所述的SystemJS /latest/guide/webpack.html).

在线研究,人们似乎正在从SystemJS转向Webpack.例如,Google的"Angular CLI"项目:http://react-etc.net/entry/angular-2-cli-moves-from-systemjs-to-webpack

Webpack不仅处理模块,还提供了打包应用程序的方法(concat文件,minify/uglify文件,......).新版本还提供"树摇动"(从最终版本中删除死/未使用的模块).

使用SystemJS,我们仍然需要使用gulp(或其他东西)来构建应用程序.

如果您开始使用新的Angular 2应用程序,您会使用哪一个？

我Pageview在Google跟踪代码管理器中有跟踪SPA网页浏览量的标记,与本指南中描述的相同.基本上,它是具有链接的Google Analytics ID的通用分析,它是在历史记录更改时All Pages触发的(在某些时候,触发器也被添加但没有成功).

在我当前的应用程序中,GTM会Pageview在没有异步解析器的所有路由上的初始页面浏览量上跳过标记.通常路由有时会触发标记(5次中的1次),这可能会有所不同,具体取决于条件(缓存与未缓存,本地主机与生产).

在具有长持续时间(> 1s)的解析程序的路径上,Pageview始终在初始网页浏览中触发标记(5次中的5次).

Pageview应用初始化(pushState)后,在所有路由上正常触发标记.

GTM调试控制台和GA实时监控确认了此行为.

设置似乎是推荐的,GTM代码段被加载<head>,Angular 2应用程序在末尾加载<body>.

<html>
  <head>
    <script>/* Google Tag Manager snippet */</script>
    ...
  </head>

  <body my-app>
    ...
    <script src="my-app-bundle.js"></script>
  </body>
</html>

Angular 2像往常一样被引导:

platformBrowserDynamic().bootstrapModule(MyAppModule);

我试图在前后移动GTM代码段my-app-bundle.js,甚至用同步代替它:

<script>
  window.dataLayer = ...
</script>
<script src="https://www.googletagmanager.com/gtm.js?id=..."></script>

默认代码段没有区别.

我通过反复试验发现,Pageviews如果应用程序以相当大的延迟,200-1000毫秒进行自举,则开始在初始页面浏览量上正常工作(起初DOMContentLoaded似乎有诀窍,但延迟还不够):

setTimeout(() => {
  platformBrowserDynamic().bootstrapModule(MyAppModule);
}, 1000);

我希望这个问题对于使用SPA/Angular 2应用程序完成GTM的专家来说很熟悉. …

我有一个在Vue.js中创建的单页面应用程序,它利用HTML5历史模式进行路由,并且html文件与Django一起提供.

django 的urls.py是这样的:

urlpatterns = [
    url(r'^$', views.home),
    url(r'^admin/', admin.site.urls),
    url(r'^api-token-auth/', obtain_jwt_token),
]

和views.home:

def home(request):
    return render(request, 'index.html')

请考虑以下情形:

1. 用户访问主页(即/)

因为,主页响应单页Vuejs应用程序所需的index.html,它的工作方式与它应该的一样.

2. 从那里用户导航到about页面(即,/username/12).

它仍然正常工作,因为它与Vue路由器导航.

3. 现在,用户刷新页面.

由于没有/username/12在urls.py模式,它会显示找不到网页(404) .

现在,我可以在urls.py中提供另一个模式来捕获最后一个顺序中的所有模式:

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^api-token-auth/', obtain_jwt_token),
    url(r'^.*$', views.home),
]

但是像媒体或静态网址这样的其他网址也会指向所有模式正则表达式.我怎么解决这个问题？