简体   繁体   中英

Route with multiple modules an inline views not working - $http interceptor possibly causing errors

I'm working in a project with Angular.

The idea is to have different modules and each one of them will be able to register its own routes. The partials will be all within the same HTML inline. However it is not working...

Here is the plunkr http://plnkr.co/edit/n3q1FW95LD24XqTF37aZ

The code is something like:

<body ng-class="{loaded: loaded}" ng-app="Stream" ng-controller="StreamCtrl">
  <div id="wrapper" ng-show="loaded">
    <div ng-view></div>
  </div>
  <script type="text/ng-template" id="welcome.html">
    From the template
  </script>
</body>

And the JS:

(function() {
  "use strict";

  angular.module("Default", ["ngRoute"])
    .config(
      ["$httpProvider", "$routeProvider", "$locationProvider",
      function ($httpProvider, $routeProvider, $locationProvider) {
        $routeProvider
          .when("/mee", {
            templateUrl: "partials/welcome.html"
          })
          .when("/mee/index", {
            templateUrl: function(params){
              console.log("Getting partial url");
              return "partials/welcome.html"
            }
          })
        ;

      }
    ])
    ;
})();
(function() {
  "use strict";
  angular.module("Stream", [
    "Default"
  ])
  .config(["$locationProvider", function($locationProvider) {
  }])
  .run(function($rootScope, $log, $window) {
    $log.info("Setting the application status as loaded!");
    $rootScope.loaded = true;
  });
})();

The full code not working can be seen in plunkr...

Finally I was able to find the answer...

Turns out, the requests for the templates (even if they are cached) are affected by the $http interceptors.

The plunkr working is here:

http://plnkr.co/edit/RoUhkiGP9RzCfUc6Pc3v?p=preview

This is the interceptor that was affecting the resolving of the data.

    $httpProvider.interceptors.push(function($q) {
      return {
        'response': function(response) {
           return response.data;
        },
        'responseError': function(rejection) {
          return $q.reject(rejection);
        }
      };
    });

I still need the interceptor. So now it is like this:

    $httpProvider.interceptors.push(function($q) {
      return {
        'response': function(response) {
           if (response.config.method == "GET" && response.config.url.split(".").pop() == "html")
            return response;
           return response.data;
        },
        'responseError': function(rejection) {
          return $q.reject(rejection);
        }
      };
    });

Thanks to http://www.bennadel.com/blog/2803-ng-template-requests-are-affected-by-http-interceptors-in-angularjs.htm

Thanks to https://stackoverflow.com/a/25060769/1339973 for provide a solution for the problem with the $http interception when a template

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM