Question

我正在开发一个Angular.js应用程序。它有7个“页面”组成一个关于反向链接的报告。主网址看起来像http://www.site.com/report/#，因此“/”下面的第一条路线指向该网址。

我的问题是我想在网址中提供报告ID。所以这样的事情。 http://www.site.com/report/#/:reportId或http://www.site.com/report/#/99DF82A023FCE3515BE9A18F00908939F5A29D14。

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

我确定这是一件简单的事情，但我是一个Angular 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: '/'});
}]);

Answer 1

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

正如其他人所指出的那样，将ID保存在所有页面的网址中是一个好主意 - 没有人们不能将页面加入书签并直接返回查看同一视图中的相同项目。

Answer 2

那么你真的希望其他网址（例如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', ...)

AngularJS中的路由参数

2 个答案: