AngularJS中的路由参数

我正在使用Angular.js应用程序。它有7个“页面”，组成关于反向链接的报告。主要的url看起来像http://www.site.com/report/#，所以'/'下面的第一条路线指向那个URL。AngularJS中的路由参数

我的问题是我想要在URL中的报告ID。所以像这样的东西。 http://www.site.com/report/#/:reportId或http://www.site.com/report/#/99DF82A023FCE3515BE9A18F00908939F5A29D14。

我需要访问该ID并以某种方式为每个页面进行存储。所以在http://www.site.com/report/#/live我仍然需要访问reportID。

我确定这是一件简单的事情，但我是一个角度的noob。有人可以指点我的教程吗？这是迄今为止我所拥有的。

'use strict'; 

// Declare app level module which depends on filters, and services 
var ultModule = angular.module('ultimate-report', ['ngRoute', 'ngCookies', 'ngTable', 'ultimate.filters','ultimate.services','ultimate.directives','myApp.controllers', 'ultimate.config']); 

ultModule.config(['$routeProvider', function($routeProvider, $routeParams) { 
    $routeProvider 
     .when('/',   {templateUrl: '../partials/report/about.html', controller: 'CtrlReport'}) 
     .when('/live',  {templateUrl: '../partials/report/links-live.html', controller: 'CtrlLinksLive'}) 
     .when('/dead',  {templateUrl: '../partials/report/links-dead.html', controller: 'CtrlReport'}) 
     .when('/selected', {templateUrl: '../partials/report/links-selected.html', controller: 'CtrlReport'}) 
     .when('/patterns', {templateUrl: '../partials/report/patterns.html', controller: 'CtrlReport'}) 
     .when('/exports', {templateUrl: '../partials/report/export.html', controller: 'CtrlReport'}) 
     .when('/help',  {templateUrl: '../partials/report/help.html', controller: 'CtrlReport'}) 
     .otherwise({redirectTo: '/'}); 
}]);

来源

2013-12-20 RachelC

使用'$ rootScope'。你可以看到文档[这里]（http://docs.angularjs.org/api/ng.$rootScope）和一个好点的开始[这里]（http://stackoverflow.com/questions/18880737/how-做-I-使用-rootscope合角度到存储变量）。 – Beterraba

太棒了！我还没有读过run函数和rootScope。这将为我节省一大笔头痛，谢谢！ – RachelC

您希望远离$ rootScope，因为您不想过度使用自己的东西。更好的做一个Angular服务来存储这些值。角度服务是全球单身人士，在这种情况下是完美的。 – NicolasMoise

那么你真的想让其他网址（例如http://www.site.com/report/#/live）没有报告ID吗？如果您在每个地址中都有参数（例如http://www.site.com/report/#/12334223287/live），则会更容易/更短。

尽管如此，我会创建我自己的服务（'ReportID'），只存储报告ID。然后在您的控制器中包含$routeParams和ReportID（您的服务）作为依赖关系。

app.controller('CtrlReport', ['$routeParams', 'ReportID', '$scope'], 
    function($routeParams, ReportID, $scope){ 
     ReportID.id = $routeParams.reportID; 
})

，并设置为这种

.when('/report/:reportID', ...)

来源

2013-12-20 17:16:16 NicolasMoise

如果它在每个网址中都有id，那对我无关紧要。当我正在研究解决方案时，我意识到要始终保持它的存在会更容易一些。我只需要将它添加到菜单链接，以便当用户点击链接中的现场或死亡。 – RachelC

角ui-router是一个伟大的扩展Angular.js，可以很容易处理路由参数，嵌套视图等

正如其他路线已经指出，将ID保存在所有页面的url中是一个好主意 - 不要让人们无法将页面加书签并直接回到查看同一视图中的相同项目。

来源

2013-12-20 17:29:44

AngularJS中的路由参数

回答

相关问题