如何在没有 templateUrl 的情况下进行路由？

Posted 2023-02-25

【中文标题】如何在没有 templateUrl 的情况下进行路由？

【英文标题】：How to route without a templateUrl?

【发布时间】：2013-01-02 22:04:42

【问题描述】：

好的。我有一个 url 设置来注销用户。在服务器上，没有 html。服务器上的会话简单地被破坏，然后用户被重定向到一个地址。

这适用于纯 html，但对于 Angular，我遇到了问题。我一直在使用$routeProvider.when('/foo', templateUrl: '/foo.html', controller: 'Ctrl') 路由所有主要路由，这对于普通的模板化路由来说效果很好。但是，如果没有模板，它将无法工作。

那么，在没有 html 模板的情况下，我如何以与上述相同的方式支持路由 /logout？

【参考方案1】：

一种解决方法是使用template 而不是templateUrl。来自Angular docs：

template - string= - html 模板作为字符串，应该使用 通过 ngView 或 ngInclude 指令。此属性优先于 模板网址。

可以这样使用：

$routeProvider.when("/foo", template: " ", controller: "Ctrl");

注意：您必须使用 " " 而不是空字符串 ""，因为 Angular 在触发控制器之前会使用 if (template) 检查，并且空字符串的计算结果为 false。

-- 编辑--

更好的方法是使用resolve 映射。见Angular Docs：

resolve - Object.= - 可选映射 应该注入控制器的依赖项。

可以这样使用：

$routeProvider.when('/foo', resolve: redirect: 'RedirectService');

注意：我已将其从“Ctrl”更改为“RedirectService”，因为您在问题中描述的并不是 Angular 意义上的“控制器”。它没有设置视图的范围。相反，它更像是一种服务，最终会重定向。

【讨论】：

PS 我为此在 GitHub 上创建了an issue。

在讨论了 GitHub 问题后，我在最后用更好的解决方案更新了我的答案。

第二个例子，$routeProvider.when('/foo', resolve: controller: 'Ctrl')，让 Angular 寻找一个“CtrlProvider”而不是一个名为“Ctrl”的真正的控制器。你有控制器设置的例子吗？

jsfiddle.net/j6j2P 您需要使用“工厂”而不是“控制器”。确实，应该更新答案以表明“Ctrl”实际上并不是 Angular 意义上的“控制器”。它没有设置任何范围。

我更喜欢在$routeProvider.when() 中添加自定义属性并在$routeChangeSuccess 上收听以查看$route.current.customProp。见bennadel.com/blog/…

【参考方案2】：

我正在根据已经接受的答案和它的 cmets 中提到的 github 问题编写解决方案。

---

我使用的方法是$routeProvider 中的resolve 参数。就我而言，当用户转到 /logout 时，我试图在我的应用程序中为 logout 创建一个很好的解决方案。

$routeProvider的示例代码：

app.config(['$routeProvider', function ($routeProvider) 
    $routeProvider.
        ...
        when('/logout', 
            resolve: 
                logout: ['logoutService', function (logoutService) 
                    logoutService();
                ]
            ,
        ).
        ...
]);

在解析部分，您通过名称指定服务（工厂），然后您必须调用它。它仍然是最好的解决方案。

为了使示例完整，我提出了我的logoutService：

angular.module('xxx').factory('logoutService', function ($location, Auth) 
    return function () 
       Auth.setUser(undefined);
       $location.path('/');
    
);

效果很好！