当前位置: 首页 > 面试题库 >

AngularJS加载服务然后调用控制器并进行渲染

郑锋
2023-03-14
问题内容

我的问题是我需要在调用控制器和呈现模板之前加载服务。
http://jsfiddle.net/g75XQ/2/

HTML:

<div ng-app="app" ng-controller="root">
    <h3>Do not render this before user has loaded</h3>            
    {{user}}
</div>
​

JavaScript:

angular.module('app', []).
factory('user',function($timeout,$q){
    var user = {};            
    $timeout(function(){//Simulate a request
        user.name = "Jossi";
    },1000);
    return user;
}).
controller('root',function($scope,user){

    alert("Do not alert before user has loaded");
    $scope.user = user;

});
​


问题答案:

您可以使用手动初始化来推迟angular应用的初始化,而不是使用ng-appattribute 进行自动初始化。

// define some service that has `$window` injected and read your data from it
angular.service('myService', ['$window', ($window) =>({   
      getData() {
          return $window.myData;
      }
}))

const callService = (cb) => {
   $.ajax(...).success((data)=>{
         window.myData = data;
         cb(data)
   })
}

// init angular app 
angular.element(document).ready(function() {
       callService(function (data) {
          doSomething(data);
          angular.bootstrap(document);
       });
});

callService您的函数执行AJAX调用并接受成功回调的位置在哪里,这将初始化angular app。

还要检查ngCloak指令,因为它可能满足您的所有需求。

另外,使用ngRoute时,您可以使用resolve属性,为此,您可以看到@honkskillet答案



 类似资料:
  • 问题内容: 我已经阅读了几篇有关angularjs实体正确用法的文章:服务,工厂,控制器和指令。 我特别关心的是控制器和服务的比较。但是,没有一个帖子告诉我什么是控制器可以执行服务不能执行的操作,反之亦然。 可以列出它吗?或者仅仅是在angular的用法上规范? 问题答案: 控制器 通常用于绑定视图。控制器管理视图的生命周期,应将其视为视图控制器。将为视图的每个实例创建一个新的控制器,这意味着,如

  • 问题内容: 我正在使用socket.io在我的应用中启用聊天功能,并且正在使用一项服务来执行所有套接字操作。当出现消息时,我想从服务中触发控制器的功能以在UI中进行一些更改。所以我想知道如何从服务访问控制器的功能。样例代码: 这是服务的示例代码。 现在控制器的代码 问题答案: 您可以通过使用角度事件或来实现此目的。 在您的情况下会有所帮助,您需要广播事件,以便具有相同事件名称的所有子作用域都可以监

  • 问题内容: 我有一个现有页面,需要在其中添加一个可以动态加载的控制器的角度应用程序。 这是一个片段,它根据API和我发现的一些相关问题实现了关于如何完成操作的最佳猜测: JSFiddle。请注意,这是对实际事件链的简化,在以上各行之间有各种异步调用和用户输入。 当我尝试运行上述代码时,由$ compile返回的链接器将抛出:。如果我正确地理解了引导程序,那么它返回的注射器应该知道该模块,对吗? 相

  • 问题内容: 我在Angular中有一个服务,该服务使用我的API来获取用户信息并将其提供给控制器。设置如下: 在我的控制器中,我将其包含为: 这不会返回任何数据,而如果我将相同的服务功能放在控制器本身中,它将返回正确的值。我在这里想念什么?以前从未在Angular中使用过DI / Services,因此在某个地方可能是一个简单的错误。 我需要确保该服务在控制器加载 之前 返回数据。如何做到这一点

  • 问题内容: 我已经用AngularJS编写了一个服务,但是我无法使其与角度种子处理方式一起使用。 控制器代码如下: 请注意,注释掉的部分工作正常,但我想像(推荐的)第二种方式来处理它。 我得到的错误是照片是未定义的,所以我的猜测是我传递(注入)它的方法是错误的,但是我找不到正确的方法 问题答案: 您需要定义服务: 一些参考: http://docs.angularjs.org/api/angula