Why angular load inline template but trigger the $http?

Question

This is a little complicated. I will try my best to explain my question.

First, I create a HttpService to wrap $http so that every ajax will trigger the #loading element to show that a request is processing. This is the service below.

angular.module('HttpServices', [])
.factory('HttpWrapper', ['$http', '$rootScope', function($http, $rootScope) {
  $http.defaults.transformRequest.push(function(data) {
    $rootScope.loading = ($rootScope.loading ? $rootScope.loading + 1 : 1);
    console.log('start request') # this will be triggered by template load!!
    console.log(data); # the template will be printed to the console!!
    return data;
  });
  $http.defaults.transformResponse.push(function(data) {
    $rootScope.loading -= 1;
    console.log('finish request');
    console.log(data);
    return data;
  });
  return $http;
}]);

Then, I have a quit simple routes.

@myapp = angular.module('myapp', ['HttpServices'])

myapp.factory('Service', ['HttpWrapper', ($http) ->
  service = {}
  service.data = [1..3]
  service
])

myapp.config (['$routeProvider', ($routeProvider) ->
  $routeProvider
    .when('/', {
      templateUrl: 'home.html',
      resolve: {
        data: ['Service', (Service) ->
          Service.data
        ]
      }
    })
    .when('/test', {
      templateUrl: 'test.html'
    })
])

Then the html is quite simple as well.

  <div data-ng-app='myapp'>
    <ul>
      <li><a href="#/">home</a></li>
      <li><a href="#/test">test</a></li>
    </ul>
    <div id="loading" ng-show="loading">loading</div>
    <div ng-view></div>
    <script type="text/ng-template" id="home.html">
      home
    </script>
    <script type="text/ng-template" id="test.html">
      test
    </script>
  </div>

Look, the template is just inline template. They are just behide the ng-view element. But when I click the link #/ or link #/test, the http wrapper will be triggered just like an ajax request is been send. Why? They are just inline template. Why trigger the $http? Actually there is no communication with backend.

score 0 · Accepted Answer · answered Jun 16 '13 at 14:24

0

Here is my solution.

myapp.config (['$routeProvider', ($routeProvider) ->
  $routeProvider
    .when('/', {
      template: $('#home_html').html(),
      resolve: {
        data: ['Service', (Service) ->
          Service.data
        ]
      }
    })
    .when('/test', {
      template: $('#test_html').html()
    })
])

I think the keyword templateUrl will always trigger the $http even if it is a inline script tag. So dont use it.

answered Jun 16 '13 at 14:24

aisensiy

1,460
3
26
42

The $http service will be called because it has a internal cache. So before it actually sends a request it will check the cache. The transform request code will be called before the cache checking code. – Liviu T. Jun 16 '13 at 14:32
Also the cache can also be pre-filled with inline templates. That way you can have the routes always point to a url but if you decide to pre-cache you have that option – Liviu T. Jun 16 '13 at 14:36

score 0 · Answer 2 · edited May 23 '17 at 10:26

0

I had the same problem too. Its generating a new http request because the IDs you put on the inline script tags don't match the the ids in the templateUrl.

Angular first checks for those url in its internally cache of inline templates before actually looking for it over the wire

Check out this link Using Inline Templates in Angular

edited May 23 '17 at 10:26

Community

1
1

answered Feb 22 '14 at 19:44

Ody

2,012
4
25
35

Why angular load inline template but trigger the $http?

2 Answers2