How can I use a factory inside the $ stateProvider "solution"?
As a header, I want to use factory insisde a "resolve" app.js:
angular
.module("goHenry", ["ui.router"])
.factory("httpPost", httpPost)
.controller("MainCTRL", ["$scope", MainCTRL]);
function MainCTRL($scope, httpPost){
this.nameApp = "CiaoMiao";
console.log($scope.children, httpPost);
}
function httpPost($http, $q){
return {
get: function() {
var deferred = $q.defer();
$http.post.apply(null, arguments)
.success(deferred.resolve)
.error(deferred.resolve);
return deferred.promise;
}
}//RETURN
}
routers.js:
var httpConfig = {headers:{ "Content-Type" : "application/x-www-form-urlencoded" }};
var config = ["$urlRouterProvider", "$stateProvider", function($urlRouterProvider, $stateProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
.state("multi",{
url: "/multi",
"viewA@multi": {
templateUrl: "app/templates/login.htm",
controller: ["$scope", "getChildrenNumber", function($scope, getChildrenNumber){
this.nameApp = "nameAppChanged";
this.gatto = "Miao";
}],
controllerAs: "ctrl"
}
},
resolve: {
getChildrenNumber: ["$http", function($http, httpPost){
var httpP = httpPost.get("http://domain.com/user/login/api-login", $.param({ username:"ciaociao6@ciao.com", password:"ciaociA0" }), httpConfig)
console.log(httpP);
return "Some response from an API";
}]
}
});
angular
.module("CiaoMiao")
.config(config);
As a result of console.log I got "undefined", I don't understand how to inject this factory into this part of the code. I tried to put this point of view in the main controller, but it didn't work.
source to share
(If you post the solution in your view, it should work. If you need this solution in multiple views of the same state. I would try to use an abstract state and add the solution there.) Works, but not required (see below).
Please take a look at the jsfiddle or demo below.
I've reduced the demo a bit to make it easier to read. Also not added an array entry for DI in the demo. You don't need to use a deferred object in a factory because it $http
already returns a promise.
Edit: You can put the solution outside of the view and it should work too. I tried this on fiddle . So there is probably another problem in your code.
OK, I think the problem with your code is that you are not returning a resolved value from your promise. Something likepromise.then(function(response) {return response;});
angular.module('demoApp', ['ui.router'])
.factory('myDataFactory', function ($http) {
return {
get: function (id) {
return $http.post('http://crossorigin.me/http://www.mocky.io/v2/55a65562b2016ce10c7e6ea9', {
id: id
}).then(function (response) {
return response;
});
}
};
})
.config(function ($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/124');
$stateProvider.state('home', {
url: '/:id',
views: {
'viewA': {
template: '{{hello}}',
controller: 'homeController',
resolve: {
backendData: function (myDataFactory, $stateParams) {
return myDataFactory.get($stateParams.id);
}
}
},
'@': {
template: 'main view'
}
}
});
})
.controller('homeController', function ($scope, backendData) {
console.log(backendData);
$scope.hello = backendData;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<div ng-app="demoApp">
<div ui-view=""></div>
<div ui-view="viewA"></div>
</div>
source to share
angular.module('demoApp', ['ui.router'])
.factory('AbcService', function ($resource) {
return $resource('app/rest/abc', {}, {
'query': { method: 'GET', isArray: true}
});
})
.config(function ($stateProvider) {
$stateProvider
.state('abc', {
templateUrl: "scripts/abc.html",
url: "^/abc",
controller: 'abcController',
resolve: {
resolvedData: ['AbcService', function(AbcService) {
return AbcService.query();
}]
}
})
})
.controller('abcController', function ($scope, resolvedData) {
$scope.data = resolvedData;
});
source to share