Javascript Laravel mix和AngularJs

我正在尝试使用运行webpack的，将angular应用程序编译成一个文件。我得到一个错误：

未捕获引用错误：未定义应用程序

我的

webpack.mix.js

：

const { mix } = require('laravel-mix');

mix.js('resources/assets/js/dependencies.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

var app = angular.module('app', ['ui.router']);

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {

$urlRouterProvider.otherwise('/home');

$stateProvider
    .state('home', {
        url: '/home',
        templateUrl: 'app/View/homeView.html',
        controller: 'homeController'
    })
    ...
}]);


app.run(['$state', '$rootScope', function ($state, $rootScope) {
    //APP RUN
}]);

app.controller("aboutController", ['$scope', '$rootScope', '$http', function ($scope, $rootScope, $http) {....}

my

bundle.js

：

//load angular
require('angular');

//Load Angular's plugins
require('angular-ui-router');

//Init Angular app
require('./app/app');

//Load angular controllers
require('./app/Controller/aboutController');
....

//Load angular directive
require('./app/Directive/directive');

//Load angular services
require('./app/Services/AccountService');
....

我的

app/app.js

：

const { mix } = require('laravel-mix');

mix.js('resources/assets/js/dependencies.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

var app = angular.module('app', ['ui.router']);

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {

$urlRouterProvider.otherwise('/home');

$stateProvider
    .state('home', {
        url: '/home',
        templateUrl: 'app/View/homeView.html',
        controller: 'homeController'
    })
    ...
}]);


app.run(['$state', '$rootScope', function ($state, $rootScope) {
    //APP RUN
}]);

app.controller("aboutController", ['$scope', '$rootScope', '$http', function ($scope, $rootScope, $http) {....}

当我调用

app.controller（）

时，我得到了

uncaughtreferenceerror:app未定义

，例如

app/controller/aboutController.js

：

const { mix } = require('laravel-mix');

mix.js('resources/assets/js/dependencies.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

var app = angular.module('app', ['ui.router']);

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {

$urlRouterProvider.otherwise('/home');

$stateProvider
    .state('home', {
        url: '/home',
        templateUrl: 'app/View/homeView.html',
        controller: 'homeController'
    })
    ...
}]);


app.run(['$state', '$rootScope', function ($state, $rootScope) {
    //APP RUN
}]);

app.controller("aboutController", ['$scope', '$rootScope', '$http', function ($scope, $rootScope, $http) {....}

---

我错过什么了吗？如果我使用

html

逐个加载所有文件，效果很好。

如果在单独的文件中定义应用程序的控制器，则无法直接使用应用程序，因为没有参考。您首先必须参考模块

angular.module('app')
  .controller('aboutController'....

---

让我知道这是否适合您。

对于那些希望在下一个Laravel项目中以更自动化的方式完成这项工作的人，我创建了一个。在角度版本4-7和Laravel版本5.4-5.8上测试。我希望有帮助