Resolve

‘Resolve’ comes to our rescue when we want to fetch some data or check some condition before loading the view.

Resolve is a list of tasks that should be done before the controller instantiates or the view is loaded. What it means is we are telling angular, “before you route to this view perform all these tasks mentioned in the ‘resolve’ “. These ‘tasks’ that we mention are ‘promises’.

First we add a link to the fifth ‘li’ – ‘Resolve'(‘/resolve’ is the fifth route we will define).

Finally we add two more scripts files – ‘resolveController.js’, ‘resolveService.js’.

Next we update the ‘appModule.js’ file.

appModule.js

appModule.js

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

varfetchDataApp=angular.module('fetchDataApp',[

'ngRoute',

'dataInControllerCntrl',

'dataInServiceCntrl',

'dataInJsonCntrl',

'apiCallCntrl',

'resolveCntrl'

]);

fetchDataApp.config(['$routeProvider',function($routeProvider){

$routeProvider.

when('/dataincontroller',{

templateUrl:'modules/dataInController/dataInController.html',

controller:'dicCntrl'

})

.when('/datainservice',{

templateUrl:'modules/dataInService/dataInService.html',

controller:'disCntrl'

})

.when('/datainjson',{

templateUrl:'modules/dataInJsonFile/dataInJson.html',

controller:'dijCntrl'

})

.when('/apicall',{

templateUrl:'modules/apiCall/apiCall.html',

controller:'acCntrl'

})

.when('/resolve',{

templateUrl:'modules/resolve/resolve.html',

controller:'rCntrl'

});

}]);

Here is what is going on :

First we tell angular that there is one more module called ‘resolveCntrl’.

Next we define our fifth route ‘/resolve’.

Lastly we tell angular what html file to use for the view and the controller to be used for this route.

Let’s add resolve to our route.

appModule.js

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

.when('/resolve',{

templateUrl:'modules/resolve/resolve.html',

controller:'rCntrl',

resolve:{

starshipData:['rService',function(rService){

returnrService.then(function(response){

returnresponse;

},function(response){

returnresponse;

})

}]

}

});

A resolve contains one or more promises that must resolve successfully before the route will change. In our example, we have just one ‘starshipData’. We have to inject this promise in our controller. Then the controller will wait till this promise is resolved or rejected before it’s initialisation.

Now, since our API call code is in the service, we are injecting the service ‘rService’ and use it to return the response. Over to have a look at the service.

Our service is similar to the one in ‘apiCall’ module. This service returns a promise, if the API call is a success we return the response. And if the API call fails we return the ‘statusText’ (The SWAPI returns the error message in the ‘statusText’ key of the response).

In our controller we are injecting the ‘starshipData’ promise. So that the contoller initialisation is waiting till it gets a response from the ‘starshipData’ promise. Now, in our service we are returning the error string if the API call fails. Hence we are checking the ‘typeof’ response. If it is a string that means there is an error and we can handle it accordingly. That’s it in the controller. Let’s have a look at the HTML. ‘apiSuccess’ is used to show the correct ‘div’ in our view.

resolve.html

resolve.html

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<h4>Resolve</h4>

<p>

<b>API end point</b>: http://swapi.co/api/starships/9/

</p>

<div ng-if="apiSuccess">

<p>

<b>Details of starship 9</b>

</p>

<ul>

<li>

<b>Name : </b>{{charJson.data.name}}

</li>

<li>

<b>Model : </b>{{charJson.data.model}}

</li>

<li>

<b>Starship Class : </b>{{charJson.data.starship_class}}

</li>

<li>

<b>Cargo Capacity : </b>{{charJson.data.cargo_capacity}}

</li>

<li>

<b>Length : </b>{{charJson.data.length}}

</li>

</ul>

</div>

<div ng-if="!apiSuccess">

<b>Error : </b>{{charJson}}

</div>

We have two divs, one to show data if the API call is a success and the other to show error message in case the API call fails. We are doing this using the ‘ng-if’ directive. The ‘ng-if’ directive makes the decision based on the value of ‘apiSuccess’.

If you look carefully, we have an additional key ‘data’ that is wrapped around our response. This is because we have used resolve.