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.
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.
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.
