Route Parameters in AngularJS

Question

I'm working on an Angular.js application. It has 7 "pages" that make up a report about backlinks. The main url looks like http://www.site.com/report/# so the first route below '/' points to that URL.

My problem is I want to have the report ID in the url. So something like this. http://www.site.com/report/#/:reportId or http://www.site.com/report/#/99DF82A023FCE3515BE9A18F00908939F5A29D14.

I need to access that ID and store it somehow for each page. So on http://www.site.com/report/#/live I still need access to reportID.

Im sure this is a simple thing but Im an Angular noob. Can someone point me towards a tutorial for this? Here's what I have so far.

'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: '/'});
}]);

Use `$rootScope`. You can see the docs [here](http://docs.angularjs.org/api/ng.$rootScope) and a good point to start [here](http://stackoverflow.com/questions/18880737/how-do-i-use-rootscope-in-angular-to-store-variables). — Beterraba, Dec 20 '13 at 16:47
That is great! I had not read about the run function and rootScope yet. This is going to save me a huge headache, thank you! — RachelD, Dec 20 '13 at 16:56
You want to stay away from $rootScope in general because you don't want to overpopulate it with your own stuff. Better to make an Angular service instead to store such values. Angular services are global singletons and are perfect in this case. — NicolasMoise, Dec 20 '13 at 17:06
@NicolasMoise Thank you for the tip. I am failure with the singleton pattern but haven't yet used services in Angular. I will head to the docs now. — RachelD, Dec 20 '13 at 17:55

NicolasMoise · Accepted Answer · 2013-12-20T17:21:19.490

1

So do you really want the other urls (e.g. http://www.site.com/report/#/live) to not have the report id in them? It would be a lot easier/shorter if you had the parameters in each adress (e.g. http://www.site.com/report/#/12334223287/live).

Nonetheless, I would create my own service ('ReportID') that just stores the report ID. And then include both $routeParams and ReportID (your service) as dependencies in your controller.

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

and set up your route as such

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

edited Dec 20 '13 at 17:21

answered Dec 20 '13 at 17:16

NicolasMoise

7,261
10
44
65

It doesn't matter to me if it has the id in each URL or not. While I was looking into solutions I realized it would be a bit easier to always have it present. I will just have to add it to the menu links so that when the user clicks on live or dead its in the link. – RachelD Dec 20 '13 at 17:58

score 1 · Answer 2 · answered Dec 20 '13 at 17:29

Angular ui-router is a great extension to Angular.js that makes it easy to handle route parameters, nested views etc.

As others have pointed out, keeping the ID in the url for all pages is a good idea - without that people cannot bookmark the page and go straight back to viewing the same item in the same view.

Route Parameters in AngularJS

2 Answers2