我正在使用 Restangular 和 ui-router 开发 Angular 单页应用程序.现在我遇到了一个问题，我需要在实例化任何指令或 Controller 之前以及在引导 Angular (angular.bootstrap)之后调用一些初始服务器 api 来获取一些全局数据。我的应用程序是通过调用 angular.bootstrap 而不是使用 ng-app 指令手动引导的。
更新: 感谢@alp 和@radim-köhler。
我已经尝试了'resolve'和'run'方法，但似乎它们中的任何一个都可以解决我的问题。我已经用下面的代码试过了。我的要求是'hello-world'指令和'HomeCtrl'都可以被阻止或延迟实例化，直到解决resolve1或resolve2，但现在测试结果是:
- 仅在 $stateProvider.state 的 resolve 对象中指定的 resolve2 可以阻止 HomeCtrl 的实例化，hello-world 指令是 仍然在解析 resolve2 之前被实例化。
- 决心1 在模块的“运行”方法中可以NOT阻止它们中的任何一个(HomeCtrl Controller 或 hello-world 指令)。
我也在 Plunker 中创建了这个
也许我需要将 hello-wrold 指令和 HomeCtrl 包装到另一个 Controller 中，并为该 Controller 声明一个抽象或正常状态，对吗？
angular.module('app', ['restangular', 'ui.router'])
.directive('helloWorld', function() {
console.log('Initialize hello-world directive.');
return {
restrict: 'E',
scope: {
name: '@'
},
template: '<span>Hello <strong>{{name}}</strong></span>'
}
})
.controller('HomeCtrl', function($scope) {
console.log('Initialize home page.');
$scope.content = 'This is in HomeCtrl';
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url: '/',
controller: 'HomeCtrl',
template: '<div class="body">{{content}}</div>',
resolve: {
init: function($q) {
return $q(function(resolve, reject) {
setTimeout(function() {
console.log('Resolving2 ...'); // resolve2
resolve();
}, 1000 * 3);
});
}
}
});
$urlRouterProvider.otherwise('/');
})
.run(function(Restangular, $q) {
console.log('App module is starting...');
//console.log(Restangular, $q);
return $q(function(resolve, reject) {
setTimeout(function() {
console.log('Resolving1 ...'); // resolve1
resolve();
}, 1000 * 5);
});
});
angular.element(document).ready(function() {
angular.bootstrap(document, ['app']);
});.body {
margin-top: 10px;
}<!DOCTYPE html>
<html>
<head>
<script src="//code.angularjs.org/1.3.10/angular.js"></script>
<script src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/restangular/1.4.0/restangular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<hello-world name="World"></hello-world>
<div ui-view=""></div>
</body>
</html>控制台的输出是:
App module is starting...
Initialize hello-world directive.
Resolving2 ...
Initialize home page.
Resolving1 ...
最佳答案
您可以使用 angular.Module.run就此而言。
例子:
var app = angular.module('myApp', ...);
app.run(function() {
// your code
})
关于javascript - 在 Angular 中，有没有办法在实例化任何 Controller 或指令之前但在引导应用程序之后执行一些初始逻辑？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28126983/