AngularJS、Browserify 和模块加载

Question

好吧，我不知道。我在互联网上搜索了大约 3 天，但找不到任何关于如何将 Browserify 与 AngularJS 和 Gulp 结合使用的示例。是的，有一些例子，但它们都表明 'hello world' 简单的应用程序结构最终没有人会使用。他们都在 app.js 主文件中编写他们的小控制器。没有模块化设置。我发现的模块化设置，好吧..它们将所有文件手动包含在 index.html 文件中..叹息（对不起我的语气）。

我试图实现的是自动加载我所有的应用程序文件，但它不起作用。我需要做什么来包含我的控制器文件？这不是 browserify 的用途吗？为什么它不起作用？

第一个答案可能是：您需要 require() 文件。但是怎么办？我尝试了 require('myApp.mainController'); 和 require('src/features/main/main-controller.js')，结果是：

Error: No Module found.

如果有人能指出我正确的方向，请帮助我！ :). 提前致谢！必要的信息在行下方。

项目结构

|project
|-builds
| |-development
| |-production
|-src
| |-components
| |-features
| | |-main
| | | |-main-ctrl.js
| | | |-main.html
| | |-dashboard
| | | |-dashboard-ctrl.js
| | | |-dashboard.html
| |-app.js
| |-app.scss
| |-index.html

app.js

require('angular');
require('angular-ui-router');

var app = angular.module('myApp', [
  'ui.router',
  'myApp.mainController'
]).config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/');

  $stateProvider
    .state('main', {
      url: '/',
      templateUrl: 'src/features/main/main.html',
      controller: 'mainController'
    })
    .state('dashboard', {
      url: '/dashboard',
      templateUrl: 'src/features/dashboard/dashboard.html',
      controller: 'dashboardController'
    })
}]);

主要-ctrl.js

angular.module('myApp.mainController', [])

  .controller('mainController', ['$scope', 'Main', function($scope, Main) {
    $scope.message = Main.message;
}]);

gulpfile.js

gulp.task('js', function() {
  return browserify({
    entries: 'src/app.js',
    debug: true
  })
    .bundle()
    .pipe(gulp.dest('builds/development'))
    .pipe(connect.reload());

});

Answer 1

我就是这样解决这个问题的。

我在我创建的每个 'module' 中放了一个 index.js 文件。该文件显然被视为一个模块。
从这里我 require 控制器，factories/services 并将它们添加到我的 AngularJS 应用程序。

AngularJS、Browserify 和模块加载

AngularJS, Browserify and module loading

javascript

angularjs

gulp

browserify

项目结构

app.js

主要-ctrl.js

gulpfile.js