AngularJS - Routing - "ui-router" - "$stateParams"

This is the continuation of the previous post.

The $routeParams is used for passing the parameters to the web service from the URL.

Lets say now you need to get the department details from the each department from the departments.html page.

Make department as clickable links in the departments.html page and  create a new page for department details. 

Partial view : departments.html

<ul>

    <li ng-repeat ="department in departments">

        <li>

              <a ui-sref ="departmentDetilas({id: department.id})>

                   {{department.name}}

              </a>

       <li>

    </li>

</ul>

Define Routes:

var myApp = angular.module('myApp', ["ui-router"])

                                     .config( function ($stateProvider){

                                          $stateProvider

                                                .state("home",  {
                                                        url: "/home",

                                                        templateUrl: "Partial/home.html",

                                                        controller: "homeController"

                                                })

                                                .state("courses",  {
                                                        url: "/courses",

                                                        templateUrl: "Partial/courses.html",

                                                        controller: "coursesController"

                                                })

                                                .state("departments",  {
                                                        url: "/departments",

                                                        templateUrl: "Partial/departments.html",

                                                        controller: "departmentsController"

                                                })

                                                .state("departmentDetails",  {
                                                        url: "/departments/:id",
                                                        templateUrl: "Partial/departmentDetails.html",
                                                        controller: "departmentDetailsController"
                                                }) 

                                          });

You can use any name for the parameter in state configuration, as long as you are retrieving the parameter with the same name using $stateParams service. In current example we have used parameter name as "id".  

Define Controllers:

var myApp = angular.module('myApp', ["ngRoute"])

                                     .controllers("homeController",  function ($scope){

                                          $scope.message = "Home";
                                     })   

                                     .controllers("coursesController",  function ($scope){

                                           $http({
                                                         method: "get",
                                                         url: "CoursesService.asmx/GellAllCourses"
                                           })
                                               .then(
                                                function(response) {
                                                      $scope.departments = response.data;
                                                 }, 
                                                 function(reason) {
                                                      $scope.error = reason.data;
                                                 });                                          
                                     })                                             

                                     .controllers("departmentController",  function ($scope, $http){

                                           $http({
                                                         method: "get",
                                                         url: "DepartmentService.asmx/GellAllDepartment"
                                           })
                                               .then(
                                                function(response) {
                                                      $scope.departments = response.data;
                                                 }, 
                                                 function(reason) {
                                                      $scope.error = reason.data;
                                                 });

                                     })

                                     .controllers("departmentDetailsController",  function ($scope, $http, $stateParams){

                                           $http({
                                                         method: "get",
                                                         url: "DepartmentService.asmx/GetDepartment",
                                                         params: { id: $stateParams.id }
                                           })
                                               .then(
                                                function(response) {
                                                      $scope.department = response.data;
                                                 }, 
                                                 function(reason) {
                                                      $scope.error = reason.data;
                                                 });

                                     });                                    

                                   

Use $statePatams service to read the parameters from the url. Note that the parameter name "id" is same in both route configuration as well as in $stateParams.id.