Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Angularjs routeParams with Example

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 620
    Comment on it

    $routeParams is a service of angularjs that can be used to get the current set of route parameters i.e. URL parameters. ngRoute module is used to work on it.
    The route parameters consist of  $location’s search() and path(). The path parameters will be extracted when the route path is matches.
    When a route change completes, $routeParams are updated. $route.current.params can be used to access the new route's parameters.

    Example:
    In app.js we create an app module and passes the parameters ngRoute and controller name.
     

    var myApp = angular.module(myApp', ['ngRoute,appControllers']);
     
    myApp.config(['$routeProvider', function($routeProvider) {
      $routeProvider.
      when('/list', {
        templateUrl: 'partials/list.html',
        controller: 'ListController'
      }).
      when('/details/:userID', {
        templateUrl: 'partials/details.html',
        controller: detailsController'
      }).
      otherwise({
        redirectTo: '/list'
      });
    }]);

    Next we will define detailsController in a separate file details.html.
     

    var appControllers = angular.module("appControllers", []);
     
    appControllers.controller("ListController", ['$scope','$http',
    function($scope, $http)
    {   
    $http.get('js/data.json').success (function(data){
    $scope.nameVariable = data;
    $scope.ordervalue = 'price';
    });
    }]
    );
     
    appControllers.controller(detailsController", ['$scope','$http','$routeParams',
    function($scope, $http, $routeParams)
    {   
    $http.get('js/data.json').success (function(data){
    $scope.nameVariable = data;
    $scope.whichuser = $routeParams.userID;
    });
    }]
    );

    We have used $routeParams so that we can get userID in URL and in the routed page also. The link will look like this
    sitename.com/index.html#/details/2

    Next, We will make the links clickable on guitar from where user will go to the details.html page. we will add code in list.html page like this:

    <ul>
       <li class="itemHolder" ng-repeat="item in nameVariable | filter:query1 | orderBy:ordervalue:direction">
          <a href="#/details/{{nameVariable.indexOf(item)}}">
    <img ng-src="img/{{item.image}}.jpg">
    <div>
       <h3> {{item.name }}</h3>
       <p class="rightDate">Price Revised on: {{item.dateAdded | date:'MM/yy'}}</p>
               <p class="rightPrice">${{item.price | number:0 }}</p>
       <p> {{item.description}}</p>
       </div>
         </a>
       </li>
    </ul>

    Now, we will create details page i.e details.html inside partials folder as we have given its path in app.js file.

    <div class="details" ng-model="nameVariable">
        <img class="magnifyImg" ng-src="img/{{nameVariable[whichuser].image}}.jpg">
        <div>
            <h2> <strong>{{nameVariable[whichuser].name | lowercase }}</h2>
            <p class="rightDate magnifyDate">Price Revised on: {{nameVariable[whichuser].dateAdded | date:'MM/yy'}}</p>
            <p class="rightPrice magnifyPrice">${{nameVariable[whichuser].price | number:0 }}</p>
            <p> {{nameVariable[whichname].description}}</p>
            <p class="longDescription">{{nameVariable[whichuser].longDescription}}</p>
            <br><hr><br>
            <a href="index.html" class="link"> Go back to Search</a>
        </div>
    </div>

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: