假设我熟悉在jQuery中开发客户端应用程序,但现在我想开始使用AngularJS.你能描述一下必要的范式转变吗？以下是一些可能有助于您确定答案的问题:

• 如何以不同方式构建和设计客户端Web应用程序？最大的区别是什么？
• 我应该停止做什么/使用什么; 我应该开始做什么/使用呢？
• 是否存在任何服务器端注意事项/限制？

我不是在寻找jQuery和之间的详细比较AngularJS.

我已经使用ui-router实现了angularjs单页面应用程序.

最初我使用一个不同的URL来识别每个州,但这是为了不友好的GUID打包网址.

所以我现在将我的网站定义为一个更简单的状态机.状态不是由URL标识的,而是根据需要简单地转换为,如下所示:

定义嵌套状态

angular
.module 'app', ['ui.router']
.config ($stateProvider) ->
    $stateProvider
    .state 'main', 
        templateUrl: 'main.html'
        controller: 'mainCtrl'
        params: ['locationId']

    .state 'folder', 
        templateUrl: 'folder.html'
        parent: 'main'
        controller: 'folderCtrl'
        resolve:
            folder:(apiService) -> apiService.get '#base/folder/#locationId'

过渡到定义的国家

#The ui-sref attrib transitions to the 'folder' state

a(ui-sref="folder({locationId:'{{folder.Id}}'})")
    | {{ folder.Name }}

这个系统工作得很好,我喜欢它干净的语法.但是,由于我没有使用URL,后退按钮不起作用.

如何保持我的整洁的ui-router状态机,但启用后退按钮功能？

有没有必要在asp.net mvc上使用角度js,因为他们都在做同样的事情？使用angular over asp.net mvc + jquery有什么好处？你会选择什么样的场景？如果你在微软环境中选择角度,你会在服务器端运行什么？它会像Web API一样吗？或者使用传统的asp.net mvc还有什么好处？

在编写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问题.

我正在使用$ routeProvider和$ locationProvider在单页面应用程序(SPA)中处理pushstate URLS,如下所示:

angular.module('pets', [])

  .config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.when('/pet/:petId', {
      controller: 'petController'
    });
  })

  .controller('petController', function($scope, petService, $routeParams){
    petService.get('/api/pets/' + $routeParams.petId).success(function(data) {
      $scope.pet = data;
    });
  });

URL用于从服务器提取可能存在或不存在的内容.

如果这是一个普通的多页面网站,对丢失内容的请求将触发来自服务器的404标头响应,并且对移动内容的请求将触发301.这将提醒谷歌丢失或移动的内容.

比方说,我点击了这样一个URL:

http://example.com/pet/123456

并且说数据库中没有这样的宠物,我的SPA如何在该内容上返回404.

如果没有这个,是否有其他方法可以正确地提醒用户或搜索引擎所请求的URL不存在？还有其他一些我不考虑的解决方案吗？

我知道使客户端网站可以抓取所需的步骤:

https://developers.google.com/webmasters/ajax-crawling/docs/getting-started?hl=nl

我只是想知道,为什么谷歌只是在他们的抓取工具中集成无头浏览器来节省我们通过NodeJS和服务器端DOM实现提供HTML快照的痛苦？

我想他们可能是我缺少的技术原因.我只是没有看到它.

这个问题与本课题不重复,该课题提供了有关该主题的重要信息.

我特别想知道,现在,在2014年,如果我不得不担心Angular不会为GoogleBot渲染,或GoogleBot会对加载时间进行惩罚.

谷歌说我不必担心(有点),但我真的不想假设.

具体来说,我有一个相对立即加载的网站然后获取AJAX内容(如facebook的新闻提要),并填补内容的空白.

我知道prerender.io并完全理解缓存页面并将其交付给搜索机器人的概念.我想知道的是 - 这是必要的 - 并且更进一步,这种缓存对SEO有什么样的影响力.

场景1

PHP驱动的页面,需要1500ms来加载所有内容并显示它.

情景2

场景3

使用预渲染(或类似)缓存中间件,并在XXXms中呈现相同的页面.

选项2"安全"吗？对于搜索引擎优化,谷歌将这种风格排名比其他两种更严厉？

如果Googlebot要坐下来等待1000毫秒的内容进行渲染,并为该结果编制索引,我实际上印象非常深刻.我认为,在实践中,这种渲染页面的技术只有在正确完成时才会更加用户友好(并且很容易弄乱它).

开发人员如何确信他们的内容将为自己或最终用户客户端正确呈现？

我想知道是否可以更改显示的网址，并据此更改页面的内容并使网址和页面内容对机器人友好（这意味着机器人实际上可以对它们进行索引）。

我已经尝试过使用AJAX动态加载数据并使用angularjs路由，但它们都不能被机器人索引。

漂亮的网址和查询字符串也不是我想要的，我正在寻找一种理论，可以在着陆时呈现数据并更改路线和点击链接时的内容，而无需刷新页面，我不想写代码两次（一次在服务器端，一次在前端）。

这些是我已经尝试过的事情，任何对解决方案的帮助或指导将不胜感激。

更新

一个适用于所有语言且没有依赖性的无库解决方案/结构将是最准确的答案！