w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home AngularJS Tutorials

Passing State Parameters

Veerappan Vairavan by Veerappan Vairavan
December 17, 2020
in AngularJS Tutorials

In the last tutorial we have seen a new State but it just navigated us to a new Page with text “More”. So in this tutorial we are going to see how we are going to display the “More” page with bigger image of the car and the description of the car and as well a “Back Button” for going back to home page. Well, I am going to break the above work in three steps.

  • Define State Params and Controllers during the State initialization.
  • Refine the “more.html” in to a meaningful page.
  • Pass the params during the State transition.

Define State Params and Controllers during the State initialization.

If you remember in our previous tutorials we have initialized various states in the config block of mainController.js. Technically this config block is outside the mainController but just inside the mainController.js file. So for this step we are going to alter our config block a little like the below.

You might also like

Creating the page navigation using states

December 17, 2020

Removing # Tag in the AngularJs Project url

December 17, 2020

mainController.js

app.config(function($stateProvider,$urlRouterProvider,$locationProvider){     $locationProvider.html5Mode(true);     $urlRouterProvider.otherwise('/index.html');    $stateProvider         .state('home',{             url:'/index.html',             templateUrl: '/templates/home.html'         })    .state('more',{         url:'/more',        	params:{data:""},         templateUrl:'templates/more.html',         controller: function($scope, $stateParams,$state) {             $scope.car = $stateParams.data; 	}     }); });

So in the above code I have added params attribute for the more state, which is equated to an object, and that object has a predefined attribute called “data”. This is the data, which we are going to get from our home page on click of “More” button, which we created in the last tutorial.

The other interesting part we have included is the controller and you may think why we have included a controller here and not as a separate js file called “moreController”. Yes, you are right, you could also do like that but the reason why I have used a controller like this inside the state definition is very simple. We are not going to have many stuffs inside the “moreController”. This controller is going to receive the stateParams using the angular inbuilt service called “$stateParams” which is very simple $stateParams.data. You remember the “data” here this is nothing but what you have defined in the “params”. This does not need to be “data” it can be anything even “superman” but the params should be params:{superMan:””} as well. Well I guess this section is almost done except assigning the state’s data to $scope.car like the above code. Let’s use this “car” in the below section.

Refine the “more.html” in to a meaningful page.

In the last tutorial we just have had hard coded “More” inside the more.html but now we need to display the car’s blown up image and the description of the Car below with a back button. So we need to do some Markup changes like the below.

more.html

<div style="width:100%;height:100%"> 	<img ng-src="{{car.url}}" style="width:100%;height:80%;"></img> 	<div>{{car.desc}}</div> 	<div style="background-color:33C4FF; width:100px">Back</div> </div>

The above code is very simple we have created an image with a 100% width and height of about 80% so that the image will look like a blown up one. Please be sure this whole tutorial series I never concentrated anything about the css stuffs so I am using an inline css for sake of simplicity. So please use an external stylesheet if you want. So since in the previous section we have defined a controller and here we have not used “ng-controller” directive because in our config block during the state initialization itself we have created an anonymous controller function and attached to the more state which will act as the controller for this whole “more” page. So if you remember few minutes back we have created $scope.car and assigned $stateParams.data and the car used inside this more.html page is nothing but the scope’s car.

Please be sure to understand one thing since we have a separate controller for the “more” page the car will be fetched from this particular state’s controller and not from the mainController’s $scope. So we populate the image and desc from the car object from our $scope but where do we get this object. Yes that is going to be our next sub section.

Pass the params during the State transition.

In the last section we have refined our more.html page with what we need to but we have used “car” object all over the more.html and that car object in $scope needs to be primed with data from the “home” page. Well this is how we are going to pass data from one state to other. So if you see the below code in the mainController’s more button click handler.

mainController.js

$scope.onClickMore = function(){      $state.go("more",{data:selectedCar}); }

Using $state.go will transition from one state to the other state but here we have included a transition object {data:selectedCar}. This is the data which we are accessing in the anonymous controller of the “more” state and assigning to its scope. Cool but where is this selectedCar in our mainController, well that’s not defined yet so let’s go ahead and defined “selectedCar” variable in the mainController.

mainController.js

var selectedCar; $scope.cars = carService.requestCarDetails(function(cars){          $scope.cars = cars;          $scope.desc = $scope.cars[0].desc;          selectedCar = $scope.cars[0]; });  $scope.onSelect = function(index){        $scope.desc= $scope.cars[index].desc;         selectedCar = $scope.cars[index]; }

So the above bolded codes were the new code added for selectedCar initialization and its assigned with a default of first car. Then during the onSelect of the car in home page we are assigning the selectedCar with right car data from the scope’s car array which is then sent to next page as a param in onClickMore handler.

You may think why we need to default the selectedCar with $scope.cars[0] ?

This is because if the user did not select any car but clicks the more button “selectedCar” will be null for the first displayed car, which results no data on the next “more” page. So if you run the application and click on more button from home page, you should be seeing something like the below page.

Passing State Parameters 1

Awesome but there is still something we are missing which is nothing but the functionality of back button. In the above screen we are seeing a back button but nothing happens on click of back because we really did not wire that button with any handlers. So let’s fix that.

mainController.js

app.config(function($stateProvider,$urlRouterProvider,$locationProvider){     $locationProvider.html5Mode(true);     $urlRouterProvider.otherwise('/index.html');    $stateProvider         .state('home',{             url:'/index.html',             templateUrl: '/templates/home.html'         })    .state('more',{         url:'/more',        params:{data:""},         templateUrl:'templates/more.html',         controller: function($scope, $stateParams,$state) {             $scope.car = $stateParams.data;             $scope.onBack = function(){                 $state.go('home');             }         }     }); });

So here in the above code I have just added back button click handler with $state.go to home which is more self-illustrative of going back to “Home” page.

Awesome we have come to an end of this tutorial series of covering important stuff for writing angular application and I think by now you should be able to write some angular applications in a really easy way. All the tutorials will be having a download link for that specific tutorial’s code. Please feel free to post you questions related to any angular topic and will be please to answer at the earliest.

Download Demo

Tags: angularangular jsAngularJS Tutorialsjslearnlearn AngularJSparamparametersparamsstatetutorialui-router
Previous Post

Creating the page navigation using states

Next Post

Bootstrapping AngularJs 1.5: Step by step tutorials

Veerappan Vairavan

Veerappan Vairavan

Related Stories

Creating the page navigation using states

by Veerappan Vairavan
December 17, 2020

After all the work done in the last two tutorials we are about to do the real stuff which we...

Removing # Tag in the AngularJs Project url

by Veerappan Vairavan
December 17, 2020

In the last tutorial we have seen there happened to be a change in the url. The url changed from...

Setting up Navigation to Angular Js Project

by Veerappan Vairavan
December 17, 2020

Angular is mostly used for SPA (Single Page Application) but still every app requires some kind of navigation from one...

Using Angular Js $http from custom Service

by Veerappan Vairavan
December 17, 2020

Well before going in to this tutorial I am assuming you are using brackets to run these sample applications. The...

Next Post
Bootstrapping AngularJs 1.5: Step by step tutorials

Bootstrapping AngularJs 1.5: Step by step tutorials

Discussion about this post

Popular Posts

100 Creative CSS Cards

41 Multi step HTML forms

13 Free HTML & CSS Dashboard Template Designs

20 HTML & CSS pricing tables

49 CSS Tables

14 Best CSS Dark Mode

11 CSS Shopping Cart UI/UX

42 Cool CSS Avatars For Better UI

89 Best CSS Toggle Switches

55 Useful handpicked CSS Buttons with examples and demos

w3tweaks

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools