Change ng-view after get data in Angular.JS

Question

I'm going to get some data from server using $http and JSON response. $http.get() are called after route change. But template are changed before data is downloaded. My goal is:

• User press a hyperlink in menu, that changes a route,
• Shows Loading Spinner (DOM Element is in another controller which is on page everytime)
• Initializing $scope.init() (via ng-init="init()" ) in controller which is in my new template, this also initializing get data from server
• Data are downloaded, now I can hide spinner and change visible template

How can I do this? My App looks for example:

Javascript:

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

myApp.controller('MyCtrl', function($scope, $http) {
    $scope.init = function() {
       $http({method: 'GET', url: 'http://ip.jsontest.com/'}).success(function(data) {
           console.log(data);
               $scope.ip = data.ip;
           });
    }
});

myApp.config(function($routeProvider) {

    $routeProvider.when('/link', {
        controller: 'MyCtrl',
        templateUrl: 'embeded.tpl.html'
    });
});

HTML:

<script type="text/ng-template" id="embeded.tpl.html">
    <div ng-controller="MyCtrl" ng-init="init()">
    Your IP Address is: {{ip}}
    </div>
</script>

<div>

    <ul>
        <li><a href="#/link">change route</a></li>
    </ul>

    <div ng-view></div>
</div>

Answer 1

You need to resolve data before routing happens, thus, move your $http to config section.

This is good tutorial for that, http://www.thinkster.io/pick/6cmY50Dsyf/angularjs-resolve-conventions

This is config part.

 $routeProvider.when('/link', {
    controller: 'MyCtrl',
    templateUrl: 'embeded.tpl.html',
    resolve: {
      data: function ($q, $http) {
        var deferred = $q.defer();
        $http({method: 'GET', url: 'http://ip.jsontest.com/'}).then(function(data) {
          deferred.resolve(data);
        });
        return deferred.promise;
      }
    }
 }

and this is controller part

//`data` is injected from routeProvider after resolved
myApp.controller('MyCtrl', function($scope, $http, data) { 
  $scope.ip = data.ip
});

I think promise in AngularJS is very important concept for any async. processing. You need to use this technique every time you have callback.

Answer 2

I will not do it all for you, however I will point you in the right direction.

First you need the ngRoute module.

var myApp = angular.module('myApp', ['ngRoute']);

And the JS file:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.js"></script>

Now you routes will be working and you do not need to call a special init function in your controller since they get instanciated on every route change when used with ng-view .

For the spinner, you could add some interceptors to all ajax requests using the $httpProvider . Inside the interceptors you could emit some events on the $rootScope and listen to then in a specialed custom attribute directive eg spinner where the magic would occur ;)