Question

我有一个角度应用，需要做一个快速的http请求，以便在启动应用程序的其余部分之前获取一些配置信息，至少在控制器之前。看着使用$ UrlRouterProvider，但我没弄明白如何让应用程序等待http完成。

我需要完成的事情：

@Component
export class MyComponent extends someOtherComponent {
  constructor(service: Service, service2: Service2) {
    super(service, service2);
  }

  isStateEqual() {
    return this.service.serviceState === this.service2.service.serviceState;
  }
}

@Injectable
export class Service {
  serviceState = {}
}

@Injectable
export class Service2 {
  constructor(service: Service) {}
}

Answer 1

您可以创建一个单独的js文件，您可以在其中生成http请求，然后通过js代码而不是ng-app在html代码中初始化/引导您的应用程序。

参考以下代码：

(function() {
  var application, bootstrapApplication, fetchData;
  application = angular.module('app');
  fetchData = function() {
    var $http, initInjector;
    initInjector = angular.injector(['ng']);
    $http = initInjector.get('$http');
    $http.get('<url>');
  };
  bootstrapApplication = function() {
    angular.element(document).ready(function() {
      angular.bootstrap(document, ['app']);
    });
  };
  fetchData().then(bootstrapApplication);
})();

我希望它有所帮助。

Answer 2

必须在状态而不是在视图

上声明Resolve

更改

.state('app', {
    abstract: true,
    url:'/',
    views: {
        "content": {
            templateUrl: "myurl.html"
        },
        resolve {
            myVar: ['$http', 'myService', function($http, myService) {
                   return $http({method: 'GET', url:'url'})
                            .then(function(res) { //do stuff })

到

.state('app', {
    abstract: true,
    url:'/',
    views: {
        "content": {
            templateUrl: "myurl.html"
        }
    },
    resolve {
            myVar: ['$http', 'myService', function($http, myService) {
                   return $http({method: 'GET', url:'url'})
                            .then(function(res) { //do stuff })...

在初始化角度应用之前等待$ http结果

2 个答案: