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 回答