Angular JS路由——SPA内部的链接

Angular JS Routing - Links inside SPA

本文关键字：链接 内部 SPA 路由 Angular JS      更新时间：2023-09-26

我已经创建了一个项目index.html与某些链接到其他页面。我的路由按预期工作，但我想知道当涉及到其他页面上的链接时，最好的方法是什么。

说明:

我的index.html页面有路由:

饲料Bblog市场招聘广告

现在我想知道的是如何在这些页面中路由链接。

例如，我的博客页面有我想在同一页面中打开的选项卡。例如，每当我点击某个选项卡链接时，它就会将我重定向到index.html，因为我的。else路由设置为/.

不确定路由使用的是什么引擎或库。尽管不久之前我也面临同样的要求。

我们使用ui-router进行路由。它和angular的路由非常相似。

路由表中的一个片段包含类似的内容。

$stateProvider
            .state('home', {
                url: '/',
                templateUrl: '/views/index',
            })
            .state('orders', {
                url: '/orders',
                templateUrl: '/views/orders',
            })
            .state('orderdetail', {
                url: '/orders/detail/:id',
                templateUrl: '/views/orderdetail',
            })
            .state('orderdetail.address', {
                url: '/:addressId',
                templateUrl: '/views/orderdetail',
            })

本质上是使用。dot符号来分隔嵌套视图。所以orderdetail.address嵌套在orderdetail

中

这意味着上面的路由将允许您查看/orders/detail/myOrderId的订单详细信息的概述，并通过访问/orders/detail/myOrderId/myaddressId

进一步深入到地址。

如果你正在使用ui-router，那么你将在这个链接

上获得更多关于嵌套视图的信息

如果你使用的是angular ngRoute，那么[ngRoute][3]文档和支持的plunker会演示如何堆叠路由。

So (from plunker) - 

.config(function($routeProvider, $locationProvider) {
    $routeProvider
     .when('/Book/:bookId', {
      templateUrl: 'book.html',
      controller: 'BookController',
      resolve: {
        // I will cause a 1 second delay
        delay: function($q, $timeout) {
          var delay = $q.defer();
          $timeout(delay.resolve, 1000);
          return delay.promise;
        }
      }
    })
    .when('/Book/:bookId/ch/:chapterId', {
      templateUrl: 'chapter.html',
      controller: 'ChapterController'
    });

这将给你/book/myBookId和/book/myBoodId/ch/myChapterId

相关文章：