如何在 AngularJS 中将更多 JS 文件合并为一个文件

How to combine more JS files into one file in AngularJS?

本文关键字:文件 合并 一个 JS AngularJS      更新时间:2023-09-26

我有 3 个模块名称 'dashboard.services1',', 'dashboard.services2', "仪表板.服务3" .

angular.module('dashboard.services1', [])
    .service('sublineService', function ()

3个服务是.js(角度)文件。 我想添加的这些文件

应用.js

angular.module('dashboard', ['dashboard.filters', 'dashboard.services1', 
'dashboard.services2', 'dashboard.services3', 'dashboard.directives', 
'dashboard.controllers']).
      config(['$routeProvider', function ($routeProvider, $routeParams) {
          // Dashboard Screens
          $routeProvider.when('/lines', 
{ templateUrl: 'partials/lines.html', controller: 'PlantController' });
          $routeProvider.when('/lineId/:lineId/linename/:linename', 
{ templateUrl: 'partials/line-detail.html', controller: 'LineDetailController' });
          $routeProvider.when('/subline/:lineId/:sublineId', 
{ templateUrl: 'partials/subline-detail.html', controller: 'SublineController' });
          $routeProvider.when('/equipment/:equipmentId', 
{ templateUrl: 'partials/equipment-detail.html', controller: 'EquipmentController' });
     $routeProvider.otherwise({ redirectTo: '/lines' });
      }]);

但我的问题不是所有这 3 个文件都有效。最后一个,即

 'dashboard.services3'

仅工作并从中获取输出。跳过了其他 2 个文件。我不想在这里遇到我的问题。

我的问题是如何添加更多服务文件(即模块名称)/如何将这些模块名称合并到单个.js(角度)文件中,以获取所有想要解决的脚本文件并获得我的输出。

谢谢!

angular.module() 不采用文件名,而是采用模块名称。Angular 不会为您从服务器加载脚本,它希望您在引导应用程序之前已加载脚本文件。

您有以下几种选择:

  • 在 html 中手动包含所有带有标记的脚本
  • 使用无数脚本加载工具中的任何一个,例如require.js,$script.js等...
  • 使用第三方工具将所有 javascript 文件合并到一个文件中,并选择性地最小化/优化。您可以使用以下内容:

    • 谷歌闭包编译器:https://developers.google.com/closure/compiler/
    • 需要JS优化器:http://requirejs.org/docs/optimization.html#wholeproject
    • 雅虎的YUI压缩器:http://yui.github.io/yuicompressor/
    • 哎呀.js :https://github.com/mishoo/UglifyJS

然后,您需要使用 html 中的标记加载由这些工具之一生成的脚本。