2

我似乎无法让 Webpack 或 Browserify 与 UI-Router 一起使用。有人可以帮忙吗？

这是我的模块文件：

"use strict";

require("angular");

angular
    .module("app", [require("angular-ui-router")])
    .config(require("./app.routes"));

还有我的路线文件：

"use strict";

module.exports = function($urlRouteProvider, $stateProvider) {
    $urlRouteProvider.otherwise("/state1");

    $stateProvider
        .state("state1", {
            url: "/state1",
            templateUrl: "partials/state1.html"
        })
        .state("state2", {
            url: "/state2",
            templateUrl: "partials/state2.html"
        });
}
4

2 回答 2

1

可悲的是，当您将 bower 和 angularjs 依赖注入系统结合使用时，组件经常不会使用与 angular 模块名称相同的 bower 包名称。这完全令人讨厌和令人沮丧，但遗憾的是它很常见。在这种情况下，名为“angular-ui-router”的 bower 组件使用 angular 模块名称“ui.router”声明自己，这也是它在 commonjs 中导出的内容。所以：

在您的package.json“浏览器”部分中，像这样配置它：

"ui.router": "./bower_components/angular-ui-router/release/angular-ui-router.js",

然后在您的浏览器代码中，您可以同时使用require它（因此 browserify 将其包含在您的捆绑包中）并同时将其注入您的 Angular 应用程序（这有点高级/令人困惑，但它恰好受此特定模块的支持，而 Bower 中的大多数 Angular js 附加组件都不支持内置的 commonjs）。

angular.module("app", [require("ui.router")]);
于 2014-12-15T01:49:00.787 回答
-1

如果你想在 webpack 中使用 bower，你需要这样一行：https ://github.com/jeffling/angular-webpack-example/blob/master/template/webpack.config.coffee#L83

这将教会 webpack 读取文件中的main属性bower.json。这适用于 angular-ui-router - 我在我们的项目中使用它。

于 2014-12-18T11:02:35.807 回答