如何在一个 html 文件中 "compile" 一个 AngularJS 应用程序并保持所有源内联。（咕噜声）

Question

我开发了一个 AngularJS 应用程序，并希望将所有源代码放在一个 .html 文件中。
我使用 grunt 作为构建系统。
对于我使用的模板 ngtemplates
非 AngularJS 应用程序，可以 "compile" 使用 concat + processhtml grunt 任务。
如果我尝试使用 angular-app 执行此操作，页面会显示一些 js 文件的内容。
是否可以将所有内容都保存在一个 html 文件中？
如果是，请显示一些简单的 AngularApp + Gruntfile.js

示例

Answer 1

你可以试试这个 grunt 模块 https://github.com/ericclemmons/grunt-angular-templates

我以前没用过，但也许能满足你的需求。

Answer 2

我知道有一种方法可以将一堆 js 文件压缩成一个。尽管缩小这些文件真的很容易，但您需要使它们可缩小。这意味着你应该用 $injector 声明函数，这样它将 "readable" 作为一个缩小的文件。

了解一些叫做 gulp..

的东西

angular
.module("module")
.controller("ctrl",[
    "$scope",//This is a standard declaration to make a file minifiable.
    function($scope){}
]);

Answer 3

好的，问题是 angular.js 文件中的注释。 AngularJS 文件有注释和示例，其中包含 <script>..</script> 部分。如果你在html文件内插入这样的例子，在<script>标签里面，注释例子中的结束标签，会关闭原来的脚本标签。
例如

<script> <---- original script tag
/**
 * example comment.
 * use in this way:
 * <script>example()</script> <---- this will close original tag, and broke js in your html
 */
</script>

所以我用uglifyjs删除了所有的评论，并且让js变小了。这 解决了问题 。

我的 grunt 任务是这样的：

grunt.registerTask('onefile', ['ngtemplates', 'useminPrepare', 'concat:generated', 'uglify:generated', 'cssmin:generated', 'usemin', 'processhtml']);

在HTML中的文件是这样注释的：

  <!-- process:css inline -->
  <!-- build:css styles.min.css -->
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="app.css">
  <!-- endbuild -->
  <!-- /process -->

.....

  <!-- process:js inline -->
  <!-- build:js app.min.js -->
  <!-- bower:js -->
  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <!-- endbower -->

  <script src="main-table/main-table.js"></script>
  <script src="app.js"></script>
  <script src="templates.js"></script>
  <!-- endbuild -->
  <!-- /process -->

 用于 processhtml，使所有代码内联。
processhtml 使用默认的 commentMarker build 与 usemin commentmarker 冲突。
要将它与 usemin 一起使用，请在 processhtml 任务中定义 commentMarker，例如：

processhtml: {
  options: {
    commentMarker: 'process'
  }
}

当然，angular 代码应该可以缩小，就像评论的那样。
我用了ngAnnotate。

如何在一个 html 文件中 "compile" 一个 AngularJS 应用程序并保持所有源内联。（咕噜声）

How to "compile" an AngularJS app in one html file and keep all sources inline. (grunt)

html

javascript

build

angularjs

gruntjs

如何在一个 html 文件中 "compile" 一个 AngularJS 应用程序并保持所有源内联。 （咕噜声）

How to "compile" an AngularJS app in one html file and keep all sources inline. (grunt)

html

javascript

build

angularjs

gruntjs

如何在一个 html 文件中 "compile" 一个 AngularJS 应用程序并保持所有源内联。（咕噜声）