Angular - 将脚本放在自己的导入文件中答案

【问题标题】：Angular - Place scripts in its own import fileAngular - 将脚本放在自己的导入文件中
【发布时间】：2015-03-21 09:47:53
【问题描述】：

这个想法是有一个非常薄的 index.html 文件，现在它是一个像这样的开发模式下的脚本标签的文章

<html>
<body>
  <script></script>
  <script></script>
  <script></script>
  <script></script>
  <script></script>
  <script></script>
  <script></script> 
<!-- etc -->
</body>

我认为我可以通过使用来做到这一点

<html>
   <body>
   <link rel="import" href="imports.html"
   </body>

imports.html 看起来像

<script></script>
<script></script>
<script></script>
<script></script>
<script></script>

但是我得到了各种喷油器错误。那么主要问题是这种方法是否可以进行一些调整？

【问题讨论】：

您可以使用动态脚本标签生成加载所有这些 js 文件。否则使用 grunt 提供任务来合并所有脚本文件以生成单个 js 文件。
您应该在生产中使用捆绑器/压缩器。在 dev / staging 中，将所有内容放在原始文件中进行调试会很方便。
我正在使用 Gulp 进行生产。我只是想我会在开发模式下获得更令人愉悦的视图。所以是的，这就是为什么我仍然希望查看原始文件但不是全部在 index.html 中。我很感谢你的意见..谢谢:)
Gulp > 咕噜，不错的选择

标签： angularjs gruntjs gulp browserify

【解决方案1】：

是的，使用 gulp 和 browserify 可以让你像 nodejs 一样使用 require 标签，它会将你的依赖链构建到一个捆绑文件中，然后你可以 uglify 和 gzip 这将大大减少你的加载时间。 Gulp 有很多模块可以帮助解决这个问题。我也推荐浏览器同步。

我将我的负载分成两个文件，一个需要所有角度依赖的depends.js，一个app.js，其中包含我的更轻量级的应用程序代码正在更改。我使用 watchify 来监视我的 browserify 链，当它触发时，它不必更新所有依赖项，它会缓存不变的文件，因此我的实时重新加载速度非常快。这也可以设置为在您的 css 之前从 head 标记异步加载依赖项，这可能会产生重大影响，因为它包含您的大部分有效负载。此外，当使用 browserify 时，您的源代码会更干净，因为它会在构建时为您完成所有匿名函数的包装。

我应该注意，我的 app.js 在物理上从不需要depends.js，因为这会捆绑到 1 个包中，这会减慢实时重新加载构建，并且不允许您执行允许depends.js 保持缓存的巧妙推送在客户端。它只是假设 angular 已经在 window 对象上定义，它保证是（如下所述）。

我在 prod 中使用相同的设置，因为它有利于我的加载时间，chrome 开发工具网络选项卡显示我所有的脚本都是异步加载的。如果您加载异步，您可能需要将您的应用程序代码包装在一个函数中并在依赖代码的末尾执行它，否则您的应用程序将在加载之前尝试调用 angular，因为应用程序代码通常比它的依赖项小得多.

这是代码变得多么干净的示例 - angularjs browserify

【讨论】：

开发模式怎么样，你在那里用什么？只是 index.html 中有很多脚本标签还是你尝试把它分开？
是的，这两个地方都是一样的，2个脚本标签，我在html元素上粘贴了一个wf-inactive类，并有一个内联css样式来隐藏文本以免得到fout，然后我异步加载depends.js 和 app.js 并 make depends 调用我包装 angular 的 app.js 函数，如果 app.js 加载更快，如果 angular 存在，它将自行执行。
我听说过browserify，但从未使用过。我有一些阅读要做。感谢您提供指向 browserify 项目的链接 :)