Question

我被告知在AngularJS中，您应该在一个文件中执行所有路由。现在，我觉得这是一个根本问题。如果您有一个大型Web应用程序，那么将每条路径发送给用户似乎没有意义。这意味着，您的主JavaScript文件最终可能会显示类似path/:to/a/part/:of/my/application的路由。

我习惯了不同的路由方式，主路由器有某些路由（例如/admin，/blog，/about）。博客的所有逻辑（例如进一步路由）都在（例如）blog.js中处理。在blog.js内，有/latest等路由，最终路由为/blog/latest。

如何在Angular中正确地做到这一点？或者我完全忽略了Angular的观点？

Answer 1

您无需在一个文件中执行所有路由，也无需在app.js中执行此操作。它只需要在配置块中完成。由于你的Angular应用程序应该在全局命名空间中定义，你可以有一个单独的文件，如下所示：

yourAngularApp.config([
    '$routeProvider',
    '$locationProvider',
    function ($routeProvider, $locationProvider) {
        // Your routing code
]);

因此，您可以随意分离路由代码。

在标题“模块加载和依赖关系”和“配置块：”https://docs.angularjs.org/guide/module

下查看更多anout配置块

我想要达到的目的只是暴露/blog/latest 一旦您请求页面/blog，路由就知道了如果您对/blog/latest不感兴趣，则存在/blog。

如果导航到/blog导致页面刷新，则此目标不难实现。您可以通过

方式构建应用程序

您的主要路线在单个文件中定义，然后
您的其他/blog相关路由位于单独的文件中，只有当您位于该应用程序的该区域时才会下载。

但是，如果您的应用程序是一个完整的SPA，并且在请求/blog页面时Angular没有再次启动，则此方法将不起作用。我读过一个更复杂的方法，涉及保存对routeProvider的引用以供以后使用：

yourAngularApp.config([
    '$routeProvider',
    '$locationProvider',
    function ($routeProvider, $locationProvider) {
        // Your routing code
        yourAngularApp.routeProvider = $routeProvider;
]);

然后，您可以稍后使用yourAngularApp.routeProvider（例如在控制器中）进一步配置路由。

我发现了比这更清晰的解决方案解决方案：

Deferring Route Configuration Using Decorators And Route Resolution In AngularJS

该方法的要点是您可以在配置阶段创建$ route装饰器，并使用它来公开$ routeProvider功能。

为完整起见，以下是该代码的主要部分。首先你定义装饰器在配置阶段修改$ route，暴露你喜欢的$ routeProvider的任何功能（我的例子只显示.when()）：

yourAngularApp.config([
    '$routeProvider',
    '$locationProvider',
    function ($routeProvider, $locationProvider) {

        $provide.decorator( "$route", routeDecorator );

        function routeDecorator( $delegate ) {
            var $route = $delegate;

            $route.when = function( path, route ) {
                $routeProvider.when( path, route );
                return( this );
            };

            return( $route );
        }
]);

然后你可以将$ route注入其他领域，比如控制器和服务：

yourAngularApp.controller(
    "YourController",
    function($scope, $route) {
        // code that modifies routing here
        // ...
        $route.reload();
    }
);

定义app.js之外的路由

1 个答案: