我的问题是我需要在调用控制器和呈现模板之前加载服务。
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-app
attribute 进行自动初始化。
// 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