Angular routing parameters

Setting up an Angularjs SPA with routing parameters:

var myApp = angular.module('myApp', ['ngRoute']); 
//setting up a SPA
myApp.config (function($routeProvider)  {
        templateUrl: 'pages/main.html',
        controller: 'mainController'
    .when('/second',{             // :default for second when there is no param
        templateUrl: 'pages/second.html',
        controller: 'secondController'
    .when('/second/:num',{             // :num is parameter that can change
        templateUrl: 'pages/second.html',
        controller: 'secondController'

In the controller we have to accept the parameters:

myApp.controller('secondController',['$scope', '$log', '$routeParams', function($scope,$log,$routeParams){

    $scope.num = $routeParams.num || '0';
    $scope.pageName = 'Second';

In the html of second.html we can show the value that is being passed in:


<div>Scope route value = {{num}}.</div>

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s