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)  {
    
    
    $routeProvider
    .when('/',{
        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:

<h1>{{pageName}}</h1>

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

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

w

Connecting to %s