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 and a good point to start here. — D.Evangelista
– D.Evangelista, Commented Dec 20, 2013 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
– RachelD, Commented Dec 20, 2013 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
– NicolasMoise, Commented Dec 20, 2013 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
– RachelD, Commented Dec 20, 2013 at 17:55

NicolasMoise · Accepted Answer · 2013-12-20 17:21:19Z

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, 2013 at 17:21

answered Dec 20, 2013 at 17:16

NicolasMoise

7,27910 gold badges47 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RachelD Over a year ago

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.

Ian Mercer · Accepted Answer · 2013-12-20 17:29:44Z

1

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.

answered Dec 20, 2013 at 17:29

Ian Mercer

39.4k8 gold badges103 silver badges139 bronze badges

Collectives™ on Stack Overflow

Route Parameters in AngularJS

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related