The Resolve Parameter in the ui-router Module

AngularJS_logo.svg.fw1.fw.png

Repository

What Will I Learn?

You will learn what are the differences between Resolving and No Resolving?
You will learn what is the resolve parameter.
You will learn what are the differences between the data property and the resolve property?
You will learn how the resolve parameter is the controller is injected.
You will learn how is the life cycle of resolving and no resolving operations.

Requirements

Atom Editor

Difficulty

Intermediate

Tutorial Contents

Two different routing operations are performed in the angular ui-router module. The first is to use the routing url, and the second is to use the $state.go() function.

When using the $state.go() function, two different paths can be followed during the sending of the data. We may send the data before or after the routing according to your request or application requirements.

In my previous tutorials, I showed you how to send data after transmission and sent the data after routing my sample applications. In this tutorial I will show the sending of the data via an example application before redirecting in ui-router module.

These operations are called Resolving and are performed with the resolve parameter in the ui-router module.

In Resolving:

First take the data
Later perform routing operations.

In No Resolving:

First perform routing operations.
Later take the data

The following illustrations show the life cycle of resolving and no resolving operations.

No Resolving

Resolving

Now let's start coding our sample application.

I would like to do the translation between Steem and Ethereum for the example application. I want to get the Steem amount on a page from the last user, and on another page I will show the Steem amount of the Ethereum amount.

I will send the entered Steem amount to the other page with the resolve parameter.

First of all I need to load bootstrap cdn because I will use bootstrap in designing the page and I have to load it on the angular and angular ui-router CDN's in the head tag.

In index.html

  <head>
    <meta charset="utf-8">
    <title>Resolving</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>

I'll write the angular code, and I've placed it in script.js.

Create our script file and create our application code for our angular code.

In script.js

var app=angular.module('myApp',['ui.router']);

Your angular code can now work in blocks where your app object is being used. ng-app = "myApp".

I'm thinking of splitting the index.html page into two. I'll hold the crypto currencies on the left. Of course only Steem -> Eth for this example.

I would like the end user to enter the amount of Steem when this crypto money is clicked. I will routing this page to the ui-view area.

In index.html

<body ng-app="myApp">
    <div class="container">
      <div class="jumbotron">
        Crypto Currency Converter
      </div>
      <div class="row" >
        <div class="col-md-4">
          <ul class="list-group">
            <li class="list-group-item">
              <a href="#">Steem-->ETH</a>
            </li>
          </ul>
        </div>
        <div class="col-md-8">
          <div ui-view>
          </div>
        </div>
      </div>
    </div>
  </body>

So that the index.html page is ready and we will no longer change it. The image of our page is as follows

Now we need to design a page for the end user to enter the amount of steem and direct this page.

Let's start with routing first.

We can do routing by creating an app.config() function. With the $ state object we can set the name of the page to be redirected, url and controller.

In script.js

app.config(['$stateProvider',function($stateProvider){
  $stateProvider
  .state('converter',{
    url:'/converter',
    templateUrl:'converter.html',
    controller:'converterCtrl'
  })
}]);

Let's design the converter.html page.

<div class="row">
  <div class="col-md-8">
    <div class="form-group">
     <input type="text" class="form-control" id="steem" ng-model="s"/>
   </div>
    <button type="button" class="btn btn-primary">Convert</button>
  </div>
  <div class="col-md-4">
    STEEM
  </div>
</div>

If this state name is set for the link ui-sref attribute in the index.html page, the routing operation will be performed.

In index.html

…
<a href="#" ui-sref='converter'>Steem-->ETH</a>
…

Now redirected to the converter.html index.html page when the crypto money is clicked.

The index.html page looks like the following.

We can now click on the converter button to bring up the result of the Ethereum in another page.

To capture the moment the button is clicked, create a function in converterCtrl. This function will redirect to the result.html page using the $state.go() function.

In script.js

app.controller('converterCtrl',['$scope','$state',function($scope,$state){
$scope.convert=function(){
  $state.go('result',{
// parameter name will come
  })
}
}]);

We write the ng-click attribute of the button for the convert() function.

<button type="button" class="btn btn-primary" ng-click="convert()">Convert</button>

Let's write the state settings for result.html.

In app.config

  .state('result',{
    url:'/result/:steem',
    templateUrl:'result.html',
    controller:'resultCtrl',
    resolve:{
      ethResult:function($stateParams){
        var s=$stateParams.steem;
        return s;
      }
    },
    data:{
      ethConstant:500
    }
  })

First, I have defined the url parameter in the url property. With this parameter, I will move the input value into result.html.

Second, I have defined data and resolve parameters. I will use it in converting with data constant. I will use data property in converting with data constant. I will calculate the odds of 1 Ethereum for 500 dollars. I will send the url parameter before the routing with the resolve parameter.

Within the resolve parameter I have defined a variable called ethResult. I will use this variable to access the resolve statement in the page's controller.

Before creating the resultCtrl, I define the parameter in the $state.go() function and send it to the result.html page.

In converterCtrl

…
  $state.go('result',{
    steem: $scope.s
  })
…

We can now create resultCtrl.

app.controller('resultCtrl',['$scope','$state','ethResult',function($scope,$state,ethResult){
$scope.steem=ethResult
$scope.ethdolar=$state.current.data.ethConstant;
$scope.eth=$scope.steem/$scope.ethdolar;
}]);

In the $scope.steem variable I define the value that ethResult returns. I also assign the data property of routing to $scope.ethdolar. I'm creating a result with $scope.eth.

Let's design the result.html page and observe the results.

In result.html

<div>
{{steem}} Steem-{{eth}} Eth
</div>

Let's set the amount of steem we want to input.

Click the convert button. Let's see how many Ethereum we have in 100 Steem.

When we do these operations the amount of Steem in the url parameter is moved.

Finally, let's examine the state resolve properties.

I use the $stateChangeStart event for this operation. For more information about the State-of-the-Art Properties and Events in AngularJs UI-Router tutorial.

app.run(['$rootScope',function($rootScope){
  $rootScope.$on('$stateChangeStart',function(e,toState,toParams,fromState,fromParams,option){
    console.log(toState.resolve);
  })

}])