缩放angularjs的最佳实践

时间:2014-02-28 08:28:43

标签: javascript angularjs web-applications

我一直在研究AngularJs应用程序,该应用程序可能会在术语内容,视图,模板和控制器中大量增长。我非常喜欢angularjs的灵活性。我可以非常快速地创建新页面。非常稳定和跨浏览器。它真的很强大。但是,由于AngularJs没有延迟加载功能和其他缺点,我面临着使应用程序扩展的挑战。我想在这里分享我的问题并希望,有人可以告诉我解决问题的正确方法:

具有不同样式和控制器的多个模板

我在这里面临的问题是如何有效地管理模板,css,控制器。我很难管理CSS,因为所有这些都需要立即加载。如果我使用服务器端模板(例如php,jsp),我可以选择性地在不同页面上加载不同的CSS。

我想要做的是将我的应用程序与小应用程序分开。因为我的申请没有完全分开,所以我面临着他们之间的路由问题。管理多个index.html文件可能很繁琐,因为index.html结构本身会有相当多的重复(尽管我共享指令和控制器)。

一个很有前途的选择是使用ui-router而不是ng-route,但ui-route仍处于开发阶段,它对CSS和控制器的问题没有帮助。

隐藏特定用户无法访问的应用程序功能

由于所有控制器都需要立即加载,美化缩小的javascript仍然会发出很多信息。如果我希望某些用户可以使用某些功能,用户可能会想到这一点。实际上,明显的例子是,如果我有一个特定日期可用的功能,但我不想在那时部署新的应用程序,我需要发送我修改过的控制器。用户仍然可以看到该功能包含在代码中。

多层HTTP请求

尽管我尽可能地尽可能地使用了解析/异步http请求,但我仍然最终得到了几层(同步)HTTP请求。如果我记得正确,这就是一个例子:

  1. 浏览器加载HTML

  2. 浏览器加载CSS / Javascript /开始下载一些图像

  3. 解决请求(用户检查,查找字段数据,页面数据等)

  4. 请求观看(部分)

  5. 5.1。在视图中,指令是从templateUrl

    加载模板

    5.2。控制器可以发送附加数据请求(特殊情况)

    我的一些复杂页面可能包含其他图像(例如在指令,ng-includes等中),这些图像将在之后加载。

    现在我的第一页加载大约需要1秒钟。 (但是,基准测试不可靠,我确实有相当快的互联网,我的应用程序是从AWS服务的。)

    错误消息(和其他消息)

    我们的应用程序有许多错误消息。我有一个消息文件列表所有错误消息(主要是输入验证错误)。这个文件变大了,所有东西都需要加载。

    我们尝试了后端解决方案(例如我们的资源API返回错误消息)。但是,在许多情况下,API不返回我们想要显示的正确消息,或者消息包含HTML(我可以想到ng-show / ng-hide或ng-html-bind ...)。

    运行时与构建时间配置

    我们有开发,阶段和生产,在每个环境中需要不同的配置。例如,google analytic id,打开和关闭开发模式(例如开发助手)。

    我现在的丑陋解决方案是在服务器启动期间生成配置文件并将其注入index.html。 (现在,如果我打算将应用程序分开,那么我需要将它配置到所有应用程序中......这可能很好......)

    SEO

    我阅读了很多关于SEO的信息。我的应用程序的大多数部分不是用于搜索,但是,我希望第一页和其他成员被抓取。因为我们在服务器端使用Java,所以HtmlUnit很痛苦,我无法正确地呈现页面。现在,我使用grunt-html-snapshot生成静态快照,因为我的内容页面是静态的。但是,我可以看到我们需要支持的动态内容问题。

    我们可能需要使用第三方SEO或添加node.js,以便我可以使用phantom.js动态创建快照。

    我们的应用程序在这里和那里使用一些补丁(我觉得它不是那么美丽)。请分享你的想法。

0 个答案:

没有答案