使用 Ui-Router 并遵循良好的设计模式答案

【问题标题】：Using Ui-Router and adhering to good design patterns使用 Ui-Router 并遵循良好的设计模式
【发布时间】：2018-07-01 19:24:23
【问题描述】：

学习 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（它只是service、template 和controller 的包装器）传递给ui.router？

【问题讨论】：

学习 Angular 1.x 对你来说可能是浪费时间。现在 Angular 的版本是 5，而 Angular 在 1.x 版本之后完全改变了

标签： angularjs angular-ui-router

【解决方案1】：

您提供了一个模块，它需要一个角度组件。

组件：'randomTownGenerator.module'

这里 angular-ui-router 期望生成一个角度组件作为状态“randomTownGenerator”的视图。请参阅有关如何创建组件的 angularjs 文档。 https://code.angularjs.org/1.6.6/docs/guide/component

【讨论】：

【解决方案2】：

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

您应该提供一个组件作为更高版本的视图，以便在需要时加载。

 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 版本创建状态

【讨论】：