Learn How to Pass Parameter through Routing in AngularJS

In this article you will learn how to Pass Parameter through Routing in AngularJS.

Now in this article we will discuss how to pass parameter in angularjs when we used $stateProvider service for routing.

For this I created 3 html pages

1. Index.html
2. Home.html
3. AboutUs.html

I want to use index.html page as a layout page where all page (Home.html and AboutUs.html) will display.

We also used angular-ui-router.js file. You can download it from Google.com.

So let’s start

Step 1

Take reference of angular.js, angular-ui-router.js and your script file where you write all angular code in your Index.html page,



Step 2 - Create angular module and inject ui-router in this module.



Step 3 

Create controller for Index.html page where I kept pages name and some value that I want to pass through url from Index page to respective pages.



Step 4

Now used myApp and myCtrl in Index page and generate dynamic menu with help of ng-repeat directive and use ui-sref to relative state path.



In this step I used code like {{date.pageName}} is used to redirect to respective page userId:’{{data.userId}}’ is used to pass userId through url username:’{{data.userName}}’ is used to pass username through url and {{data.pageName}} display page name

Step 5

Created routing and used all child pages in templateUrl and in url we mention the name by which url parameter passess.



Step 6

Now create respected child pages controller and used $stateParams by which we receive url parameter and bind to message scope.



Step 7 - Now used child controller in child pages like this,

Home.html



AboutUs.html



Step 8

When we run page and click in Home or AboutUs button and see in url all data will pass through url with key.