当前位置: 首页 > 面试题库 >

如何推迟Angular.js中的路由定义?

常嘉平
2023-03-14
问题内容

我已经配置了一些基本路由,可供所有用户登录后使用:

App.config(function ($routeProvider) {
    $routeProvider.
        when('/login', { templateUrl: 'views/login.html', controller: PageStartCtrl.Controller }).
        otherwise({ redirectTo: '/login' });
});

因此,用户唯一可以做的就是登录。用户登录后,我想注册其他路由,如下所示:

$http
  .post('api/Users/Login', {   User: userName, Password: userPassword })
  .success(function (response : any) {
    App.config(function ($routeProvider) {
      $routeProvider
        .when('/dashboard', 
              { templateUrl: 'part/dashboard.html', 
              controller: DashboardCtrl.Controller });
  });

但是,我想我应该只调用一次.config方法,因为$ routeProvider是全新的实例,对/
login路由一无所知。进一步的调试显示,在解决视图更改时会使用$ resourceProvider的第一个实例。

问:有没有办法以后注册路线?

从动态添加路由和模板到$
routeProvider的
解决方案可能有效,但是非常难看(涉及全局变量nastyGlobalReferenceToRouteProvider)。


问题答案:

由于路由是在提供者级别定义的,因此通常只能在配置块中定义新的路由。问题在于,在配置块中,所有重要服务仍未定义(最值得注意的是$http)。因此,表面上看起来w无法动态定义路由。

现在,事实证明, 实际上在应用程序生命周期的任何时候添加/删除路由都非常容易! 查看$route
源代码,我们可以看到所有路由定义都被简单地保存在$route.routes哈希中,可以在任何时间点对其进行修改(简化示例):

myApp.controller('MyCtrl', function($scope, $route) {    
    $scope.defineRoute = function() {
        $route.routes['/dynamic'] = {templateUrl: 'dynamic.tpl.html'};
    };
});

这是演示此操作的jsFiddle:http :
//jsfiddle.net/4zwdf/6/

实际上,如果我们想接近AngularJS所做的事情,则路由定义逻辑应该稍微复杂一点,因为AngularJS还在定义重定向路由以正确处理最后的路由/(使其有效地为可选)。

因此,尽管上述技术可行,但我们需要注意以下几点:

  • 此技术取决于内部实现,如果AngularJS团队决定更改定义/匹配路由的方式,则该技术可能会中断
  • 也可以定义otherwise使用的路由$route.routes是默认路由存储在相同的散列的下null


 类似资料:
  • 英文原文: http://emberjs.com/guides/routing/defining-your-routes/ 当启动你的应用时,路由器会负责展示模板,载入数据,以及设置应用状态等任务。 这些都是通过将当前的URL与你定义的路由进行匹配来实现的。 1 2 3 4 App.Router.map(function() { this.route("about", { path: "/a

  • 我正在尝试这样的东西 但是,当没有子路由的路由可以完美工作时,这段代码不起作用 我如何解决第一段代码?

  • 我希望有一个图像控制器,并允许单endpoint,例如: /图像/上载 这是我目前的做法,但这是正确的做法吗?是否存在某种:none关键字来禁用默认路由?或者我不应该使用资源,用其他的方法去做?

  • 例如:产品详细信息页面可能有一个标签式导航部分,默认显示产品概述。 当用户单击“技术规格”选项卡时,该部分将显示规格。 如果用户点击ID为3的产品,我们要显示产品详细信息页面,其中包含概述: 当用户点击 “Technical Specs”: localhost:3000/product-details/3/specs overview 和 specs 作为 product-details/:id的

  • 问题内容: 我一直在构建一个简单的应用程序来学习angular.js。到目前为止,我已经将MEAN堆栈中的所有内容连接在一起,并且能够从Mongo中保存和检索数据。 该应用程序本质上是一个待办事项列表。用户可以创建一个项目,并在项目内部创建带有“待办事项”的“卡片”,然后可以从一个州转移到另一个州(“积压”,“进行中”,“完成”等)。 我希望能够将通知推送给所有已连接的人员,以告知其应用程序需要刷

  • 假设在route 中给了我一个< code>item-list数组。item-list.component.html看起来像这样: 我试图做的是将对象从数组推送到下一页(或路由) 目前,我有它的方式建立与2资源 我意识到有一个不必要的API调用 我将如何处理这个问题? 注意:在Ionic3中可以这样做:< code>navCtrl.push('ItemPage ',{ item:item });