我需要使用ui-router插件的AngularJS专家的帮助.有些人可以提供一个plunker示例,可以在app运行之前预加载$http数据请求吗？
我做了一些研究,但最接近的是这两个堆栈溢出：
AngularJS: How to load json feed before app load?
Delaying AngularJS route change until model loaded to prevent flicker
我不到一个星期就进入angularJS,所以任何帮助都将不胜感激.
解决方法
从
https://github.com/angular-ui/ui-router/wiki#resolve起
您可以使用resolve为控制器提供自定义状态的内容或数据. resolve是一个可选的依赖关系图,应该注入控制器.
如果这些依赖项中的任何一个是promise,它们将在实例化控制器并触发$routeChangeSuccess事件之前被解析并转换为值.
resolve属性是一个map对象. map对象包含键/值对：
> key – {string}：要注入控制器的依赖项的名称.
> factory – {string | function}：
>如果是string,则它是服务的别名.
>否则,如果是函数,则将其注入,并将返回值视为依赖项.如果结果是promise,则在实例化控制器并将其值注入控制器之前解析.
例子：
在实例化控制器之前,必须解析下面解决的每个对象(通过deferred.resolve(),如果它们是一个promise).注意每个解析对象如何作为参数注入控制器.
$stateProvider.state('myState',{
resolve: {
// Example using function with simple return value.
// Since it's not a promise,it resolves immediately.
simpleObj: function () {
return { value: 'simple!' };
},// Example using function with returned promise.
// This is the typical use case of resolve.
// You need to inject any services that you are
// using,e.g. $http in this example
promiSEObj: function ($http) {
// $http returns a promise for the url data
return $http({ method: 'GET',url: '/someUrl' });
},// Another promise example. If you need to do some
// processing of the result,use .then,and your
// promise is chained in for free. This is another
// typical use case of resolve.
promiSEObj2: function ($http) {
return $http({ method: 'GET',url: '/someUrl' })
.then(function (data) {
return doSomeStuffFirst(data);
});
},// Example using a service by name as string.
// This would look for a 'translations' service
// within the module and return it.
// Note: The service Could return a promise and
// it would work just like the example above
translations: "translations",// Example showing injection of service into
// resolve function. Service then returns a
// promise. Tip: Inject $stateParams to get
// access to url parameters.
translations2: function (translations,$stateParams) {
// Assume that getLang is a service method
// that uses $http to fetch some translations.
// Also assume our url was "/:lang/home".
translations.getLang($stateParams.lang);
},// Example showing returning of custom made promise
greeting: function ($q,$timeout) {
var deferred = $q.defer();
$timeout(function () {
deferred.resolve('Hello!');
},1000);
return deferred.promise;
}
},// The controller waits for every one of the above items to be
// completely resolved before instantiation. For example,the
// controller will not instantiate until promiSEObj's promise has
// been resolved. Then those objects are injected into the controller
// and available for use.
controller: function ($scope,simpleObj,promiSEObj,promiSEObj2,translations,translations2,greeting) {
$scope.simple = simpleObj.value;
// You can be sure that promiSEObj is ready to use!
$scope.items = promiSEObj.items;
$scope.items = promiSEObj2.items;
$scope.title = translations.getLang("english").title;
$scope.title = translations2.title;
$scope.greeting = greeting;
}
})
