Angular：使用 gulp 将 Angular js 文件连接到单个 js 文件后出错答案

【问题标题】：Angular: Error after concat angular js files into single js file with gulpAngular：使用 gulp 将 Angular js 文件连接到单个 js 文件后出错
【发布时间】：2016-07-01 08:13:43
【问题描述】：

我正在使用 gulp-concat 将所有 Angular js 文件合并为一个，但在运行 gulp task 后，我在运行应用程序的 chrome 控制台中收到此错误：

angular.js:13708Error: [ng:areq] http://errors.angularjs.org/1.5.7/ng/areq?p0=userboxController&p1=not%20a%20function%2C%20got%20undefined

我的吞咽任务：

gulp.task('scripts', function () {
  return gulp.src(['js/app/*.js', 'components/*/*/*.js'])  
    .pipe(concat('appscript.js'))
    .pipe(minify()) 
    .pipe(gulp.dest('./dist/js/'));
});

和gulp-concat 将专用的 Angular js 文件合并到 appscript.js 中，例如：

angular.module('app',[]);     


angular
    .module("app", [])
    .controller("paymentCtrl", ['$scope', '$http', function ($scope, $http) {
        $http.get('data/payments.json').then(function (payments) {
            $scope.payments = payments.data;
        });

        $scope.saveEntity = function () {
            console.info("goog");
        }
    }]); 

angular
    .module("app",[])
    .controller("userboxController", ['$scope', '$http',function ($scope, $http, usersService) {
        usersService.getCurrentUser().then(function (user) {
            $scope.user = user.data;
        });
    }]);


angular
    .module("app",[])
    .controller("usersController",['$scope', '$http','usersService', function ($scope, $http, usersService) {
        usersService.getAll().then(function (users) {
            $scope.users = users.data;
        });
    }]); 


angular
    .module("app", [])
    .directive('usersGrid', function () {
        return {
             templateUrl : 'components/users/template/grid.html'
        }
    });

角度有什么问题？！！

【问题讨论】：

我认为合并的 js 顺序或 Angular 注入有问题！
你为什么不直接使用var app = angular.module('app',[]); 和app.controller("paymentCtrl", ... 呢？
@Arg0n 没关系，我手动编辑了 appscript.js 以使用 var app = angular.module('app',[]); 并且可以工作，但是我的控制器和服务，.. 在专用的 .js 文件中，并且必须将 var app = angular.module('app',[]); 添加到所有其中，如何解决这种冗余？
如果我从除 app.js 之外的所有 JS 文件中删除 var app = angular.module('app',[]); 以避免冗余（我在每个 js 文件中添加 var app = angular.module('app',[]); 时出错）我的问题将得到解决。

标签： javascript angularjs gulp gulp-concat

【解决方案1】：

这不是合并相关的问题。

您每次都在使用

制作应用程序模块

angular.module('app', [])

您只需在一个地方初始化模块，并且每次都将使用相同的模块，并带有 ~ [] 括号。

请找小伙伴here

var myApp = angular.module('app');

myApp.controller("paymentCtrl", ['$scope', '$http', function($scope, $http) {
  $http.get('data/payments.json').then(function(payments) {
    $scope.payments = payments.data;
  });

  $scope.saveEntity = function() {
    console.info("goog");
  }
}]);

myApp.controller("userboxController", ['$scope', '$http',       function($scope, $http, usersService) {
  $scope.user = 'abc';

}]);


myApp.controller("usersController", ['$scope', '$http', 'usersService', function($scope, $http, usersService) {
  usersService.getAll().then(function(users) {
    $scope.users = users.data;
  });
}]);


myApp.directive('usersGrid', function() {
  return {
    templateUrl: 'components/users/template/grid.html'
  }
});

【讨论】：

是的，它有效:)，但我从var myApp = angular.module('app',[]) 中删除[] 时出错。我在var myApp = angular.module('app') 中有[]。我不知道为什么！