使用 Ui-Router 并坚持良好的设计模式

Question

学习Angular。使用 1.6.6.

尝试使用 ui.router，运行遇到注入组件的问题。

我一直在使用以下资源来构建我的项目： AngularJS: Understanding design pattern https://github.com/angular-app/angular-app

这两个资源都建议使用 module 作为其下代码的容器。例如来自我自己的项目：

angular.
    module('randomTownGenerator.module', [
        'randomTown.service',
        'randomTown.controller'
    ]);

这些依赖项中的每一个都在其自己的文件中定义。当我将上述 module 指定为路由的组件时：

var randomTownGenerator = {
            name: 'randomTownGenerator',
            url: '/random-town',
            component: 'randomTownGenerator.module'
        }

我得到：

Error: [$injector:unpr] Unknown provider: randomTownGenerator.moduleDirectiveProvider <- randomTownGenerator.moduleDirective

如何将 randomTownGenerator.module 传递给 ui.router，它只是 service、template 和 controller 的包装？

Answer 1

您提供了一个需要 angular 组件的模块。

component: 'randomTownGenerator.module'

此处 angular-ui-router 期望 angular 组件生成为状态 'randomTownGenerator' 的视图。请参阅 angularjs 文档了解如何创建组件。 https://code.angularjs.org/1.6.6/docs/guide/component

Answer 2

您正在尝试混淆 angularjs 注入模块的早期版本和注入模块的新方法。

您应该提供一个组件作为更高版本的视图，以便在请求ui红色时加载。

 var States = {
        "app": {
            path: "",
            routing: null,
            definition: {
                name: "app",
                url: "",
                onEnter: function () {

                    console.info("App state entered.");
                },
                params: {
                    //
                },
                resolve: {
                    //
                },
                views: {
                    "app@": {
                        component: "appComponent"
                    }
                },
                abstract: true
            }
        }
    };

其中组件应该是组件而不是模块。这是 complete example 如何使用 ui-router 和 angularjs 1.6 version

创建状态

使用 Ui-Router 并坚持良好的设计模式

Using Ui-Router and adhering to good design patterns

angularjs

angular-ui-router