使用 Gulp（和 Browserify）包括 Angular 依赖项答案

【问题标题】：Including Angular dependencies using Gulp (and Browserify)使用 Gulp（和 Browserify）包括 Angular 依赖项
【发布时间】：2016-03-12 04:07:34
【问题描述】：

我想在我的新 Angular 应用中使用 Gulp 和 Browserify。

问题：如何在app.js 中包含角度依赖项，这样它就不会引发依赖项错误？

我什至无法在没有依赖项的情况下加载它，而只能在配置中使用$stateProvider：

require('angular');  // It works with a basic declaration, but still gives an error in the browser console - *wierd*
var app = angular
  .module('myApp', [
   // 'ui-router' I want these to be included as well
  ])
  .config(function ($stateProvider) {
    // This will error and say $stateProvider unknown provider
  });

我想包括角度服务/提供者，例如 $stateProvider 和 $urlRouterProvider，然后还包括新的依赖项，例如 'ui.router','ngAnimate','ngResource',...

我知道我必须包含该文件（对于 Bower，它们都在 index.html 中，因为脚本包含到 bower 位置）。我是否链接到 node_modules?，将其包含在 Gulp 中？，两者都？没有？，另一个带有npm install ...的节点模块？

我的结构：

|- app
  |- _css
  |- _js
    |- controllers    *for angular*
    |- directives     *for angular*
    |- factories      *for angular*
    app.js            *main angular js file*
  |- _img 
  |- _css           
  |- views
    |- directiveViews *html specifically for directives*
    |- partials       *html snippets*
|- node_modules       *for npm/node*
...
server.js             *for node to launch*
gulpfile.js           *for gulp*

其他相关说明：

最终尝试启动 Angular Ui Router 应用程序。
我正在尝试不使用 bower，因为它似乎即将淘汰，我想使用 Gulp 学习 browserify。
我不知道 config.js（我认为是 gulp）的作用或是否需要。
我正在尝试遵循this 教程。

【问题讨论】：

在实例化 app 模块时，您需要在依赖关系数组中添加 ui.router，以便知道 $stateProvider。
@HuguesStefanski 然后我得到... Failed to instantiate module ui.router due to: Error: [$injector:nomod] Module 'ui.router' is not available! You either ... 如何让数组引用适当的文件？我还认为 $stateprovider 默认包含在 angular 中，但这可能是我的错误，因为我从一开始就使用 ui-router....
我想我错过了模块加载部分，请看下面的答案，我认为它会解决你的问题

标签： javascript angularjs node.js gulp

【解决方案1】：

除了使用npm install angular-ui-router 安装angular-ui-router 节点模块之外，您还需要像使用angular 一样需要此依赖项。所以你的应用可能看起来像这样：

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

var app = angular
  .module('myApp', ['ui.router'])
  .config(function ($stateProvider) {
  // $stateProvider will be properly injected here
});

browserify 和 webpack 都根据 require 调用（或在 ES6 的情况下导入）确定要放入包中的内容。

【讨论】：