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.