We Keep Coding

AngularJS, $resource, get the object from .query()

Need get one object from .query(), service:
angular.
module('core.users').
factory('User', ['$resource',
function($resource) {
return $resource('users/users.json', {}, {
query: {
method: 'GET',
isArray: true
}
});
}
]);
component:
'use strict';
angular.
module('userDetail').
component('userDetail', {
templateUrl: 'user-detail/user-detail.template.html',
controller: ['$routeParams', 'User', '$filter',
function TaskDetailController ($routeParams, User, $filter) {
var vm = this;
vm.id = parseInt($routeParams["id"], 10);
vm.users = User.query(function() {
vm.user = $filter('currentUser')(vm.users, vm.id);
});
}
],
controllerAs: 'vm'
});
need to get one object from array, 'currentUser', with $routeParams id, problem - vm.user is undefined in controller scope, here
vm.users = User.query(function() {
vm.user = $filter('currentUser')(vm.users, vm.id); // all ok, i got the object
});
console.log(vm.user) // undefined
it's ok for view, i can display properties, but need make .put() request to server with this solo object, when some of user props changed...

From https://docs.angularjs.org/api/ngResource/service/$resource
HTTP GET "class" actions: Resource.action([parameters], [success],
[error])
You should write:
vm.users = User.query();
vm.users.$promise.then(function(response){
vm.user = $filter('currentUser')(vm.users, vm.id);
console.log(vm.user); // Should log the desired result
});
console.log(vm.user); //This will be undefined since it is called before the promise is resolved

You need to declare vm.user
first and put watch on it.
JS :
vm.user = {};
$scope.$watch(function() {
return vm.user;
}, function(newVal, oldVal) {
console.log(newVal); //you can get new value here which is single object
})
vm.users = User.query(function() {
vm.user = $filter('currentUser')(vm.users, vm.id); // all ok, i got the object
});

$state.go doesn't seems to be working

I have a scenario where when click on searched item i need to load different state
Here is my html code
<span class="item-title" ng-click="fnViewProfile()">
<span> {{item.name}} </span>
</span>
below is my controller code:
$scope.fnViewProfile = function() {
$state.go("ViewProfile", {
"id": 10215
});
}
In my app.js i have a resolve function where i did ajax call to get the data before the html gets loaded
.state('ViewProfile', {
parent: 'home',
url: '/ViewProfile:id',
templateUrl: 'views/ViewProfileView.html',
controller: 'ProfileViewCtrl',
resolve: {
profile: function(DashboardService, $stateParams, $scope) {
debugger;
var userId = $stateParams.id;
var userData;
DashboardService.fnGetUser(userId).then(function(oResponse) {
userData = oResponse.data;
})
return userData;
}
}
In controller of ViewProfile state i am passing the profile service
angular.module('talentGraphApp')
.controller('ProfileViewCtrl', function($scope, $state, DashboardService, profile) {
debugger;
$scope.profile = profile;
console.log(profile);
});
But i am unable to get profile in the console.
I dont understand where i am going wrong
Any help would be appreciated.

In the resolve you return userData before it has been assigned inside the promise callback, so it is undefined when you pass it to controller
Return the promise instead
Change to
resolve: {
profile: function(DashboardService, $stateParams) {
var userId = $stateParams.id;
return DashboardService.fnGetUser(userId).then(function(oResponse) {
// return as resolved value
return oResponse.data;
});
}
}
Also there is no $scope in the routing config

Can't resolve variables from ui-router resolve object into controller

I'm using ui-router in my app.
app.config(['$stateProvider', function($stateProvider){
$stateProvide.state('State1', {
url:'/State1',
resolve: {
data: function(Service){
return Service.init();
}
},
views: {
"header": {
templateUrl: 'views/header.tpl.html'
},
"center":{
templateUrl: 'views/center.tpl.html'
},
"footer": {
templateUrl: 'views/footer.tpl.html'
}
}
}
})
}
]);
I tried to load a json file from the server and resolve it in the router.
In the resolve object, I call to my service that is responsible for returning promise.
Service.js:
app.service("Service", ['$rootscope', '$http', function($rootscope, $http){
var promise;
this.init = function(){
promise = this.loadData();
return promise;
};
this.loadData = function(){
var url = "users/getData/json.json";
return $http.get(url).then(function(response){
return response.data;
}, function(error){
alert(error);
})
};
}])
center.tpl.html:
<aside id="first-item" ng-controller="FirstController as firstController">
<first-directive>
</aside>
<aside id="second-item" ng-controller="SecondController as secondController">
<second-directive>
</aside>
This is the controller to which I would like to get the resolved data.
FirstController.js:
app.controller('FirstController', ['$scope', 'data', function($scope, data){
this.myData = data;
}]);
I got the next error: Unknown provider: dataProvider < - data. Why?

since promise is never resolved before returning. try this one.
app.service("Service", ['$rootscope', '$http', function($rootscope, $http){
var promise;
this.init = function(){
return this.loadData();
};
this.loadData = function(){
var url = "users/getData/json.json";
return $http.get(url).then(function(response){
return response.data;
}, function(error){
alert(error);
})
};
}])

From the ui-router docs:
// 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.
It is cleared that the resolved variables will only be available in the controllers defined in the state config. You can not resolve those variables in a normal controller and you are trying to use data from your state config in your controller and hence you are getting that error.
But, to get those data in your FirstController, you can do like this:
app.config('$stateProvider', ['$rootScope', function ($stateProvider) {
$stateProvide.state('State1', {
url: '/State1',
resolve: {
data: function (Service) {
var data = Service.init();
$rootScope.$broadcast("dataReceivedFoo", {data: data});
return data;
}
},
views: {
"header": {
templateUrl: 'views/header.tpl.html'
},
"center": {
templateUrl: 'views/center.tpl.html'
},
"footer": {
templateUrl: 'views/footer.tpl.html'
}
}
})
}]);
And, then read in your controller:
app.controller('FirstController', ['$scope' function($scope){
$scope.$on("dataReceivedFoo", function(response) {
$scope.myData = response.data;
})
}]);
Basically, we are broadcasting the data from your state configuration and then receiving in your FirstController.

I think adding controller: 'FirstController' line to state will solve the problem.
app.config(['$stateProvider', function($stateProvider){
$stateProvide.state('State1', {
url:'/State1',
controller: 'FirstController',
resolve: {
data: function(Service){
return Service.init();
}
},
views: {
"header": {
templateUrl: 'views/header.tpl.html'
},
"center":{
templateUrl: 'views/center.tpl.html'
},
"footer": {
templateUrl: 'views/footer.tpl.html'
}
}
}
})
}
]);
Resolve
You can use resolve to provide your controller with content or data
that is custom to the state. resolve is an optional map of
dependencies which should be injected into the controller.
If any of these dependencies are promises, they will be resolved and
converted to a value before the controller is instantiated and the
$stateChangeSuccess event is fired.
The resolve property is a map object. The map object contains
key/value pairs of:
key – {string}: a name of a dependency to be injected into the
controller.
factory - {string|function}: If string, then it is an
alias for a service. Otherwise if function, then it is injected and
the return value is treated as the dependency. If the result is a
promise, it is resolved before the controller is instantiated and its
value is injected into the controller.
https://github.com/angular-ui/ui-router/wiki

Router resolve will not inject into controller

I have tried everything to get ui-router's resolve to pass it's value to the given controller–AppCtrl. I am using dependency injection with $inject, and that seems to cause the issues. What am I missing?
Routing
$stateProvider.state('app.index', {
url: '/me',
templateUrl: '/includes/app/me.jade',
controller: 'AppCtrl',
controllerAs: 'vm',
resolve: {
auser: ['User', function(User) {
return User.getUser().then(function(user) {
return user;
});
}],
}
});
Controller
appControllers.controller('AppCtrl', AppCtrl);
AppCtrl.$inject = ['$scope', '$rootScope'];
function AppCtrl($scope, $rootScope, auser) {
var vm = this;
console.log(auser); // undefined
...
}
Edit
Here's a plunk http://plnkr.co/edit/PoCiEnh64hR4XM24aH33?p=preview

When you use route resolve argument as dependency injection in the controller bound to the route, you cannot use that controller with ng-controller directive because the service provider with the name aname does not exist. It is a dynamic dependency that is injected by the router when it instantiates the controller to be bound in its respective partial view.
Also remember to return $timeout in your example, because it returns a promise otherwise your argument will get resolved with no value, same is the case if you are using $http or another service that returns a promise.
i.e
resolve: {
auser: ['$timeout', function($timeout) {
return $timeout(function() {
return {name:'me'}
}, 1000);
}],
In the controller inject the resolve dependency.
appControllers.controller('AppCtrl', AppCtrl);
AppCtrl.$inject = ['$scope', '$rootScope','auser']; //Inject auser here
function AppCtrl($scope, $rootScope, auser) {
var vm = this;
vm.user = auser;
}
in the view instead of ng-controller, use ui-view directive:
<div ui-view></div>
Demo

Here is how I work with resolve. It should receive promise. So I create service accordingly.
app.factory('User', function($http){
var user = {};
return {
resolve: function() {
return $http.get('api/user/1').success(function(data){
user = data;
});
},
get: function() {
return user;
}
}
});
This is main idea. You can also do something like this with $q
app.factory('User', function($q, $http){
var user = {};
var defer = $q.defer();
$http.get('api/user/1').success(function(data){
user = data;
defer.resolve();
}).error(function(){
defer.reject();
});
return {
resolve: function() {
return defer.promise;
},
get: function() {
return user;
}
}
});
These are almost identical in action. The difference is that in first case, service will start fetching date when you call resolve() method of service and in second example it will start fetch when factory object is created.
Now in your state.
$stateProvider.state('app.index', {
url: '/me',
templateUrl: '/includes/app/me.jade',
controller: function ($scope, $rootScope, User) {
$scope.user = User.get();
console.log($scope.user);
},
controllerAs: 'vm',
resolve: {
auser: function(User) {
return User.resolve()
}
}
});

AngularJS scope not updating after data changes in factory method

I feel like I'm missing something obvious here, but I'm still stymied.
I update Thing on the scope by calling the create function on the ThingFactory. But when I reference the scope from PromoteController, the scope still contains the old version of Thing (with ID of 1).
This seems like a place where I'd want to use $scope.$apply(), but that causes the 'digest already in progress' error.
What am I missing?
var app = angular.module('app', ['ngRoute']);
app.factory('ThingFactory', ['$http', '$q', '$routeParams', function ($http, $q, $routeParams) {
var deferred = $q.defer();
return {
get: function(id) {
var thing = {
id: 393,
name: 'Can I be gotten?',
description: 'get'
};
deferred.resolve(thing);
return deferred.promise;
},
save: function (thing) {
console.log("ThingFactory -> CREATE");
var thing = {
id: 122,
name: 'after create.',
description: 'creatine'
};
deferred.resolve(thing);
return deferred.promise;
},
init: function() {
console.log("ThingFactory -> INIT");
var thing = {
id: 1,
name: 'initial value',
description: 'INIT'
};
deferred.resolve(thing);
return deferred.promise;
}
};
}]);
app.config(function ($routeProvider, $locationProvider, $httpProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/build', {
templateUrl: '/build.html',
controller: 'BuildController'
})
.when('/things/:id/promote', {
templateUrl: '/promote.html',
controller: 'PromoteController'
})
});
app.controller('BuildController', function ($scope, $http, $location, ThingFactory) {
// HERE I INITIALIZE THE THING
ThingFactory.init().then(function(thing) {
$scope.thing = thing;
});
$scope.saveNewThing = function() {
// HERE I 'SAVE' THE THING
ThingFactory.save($scope.thing).then(function(thing) {
$scope.thing = thing;
$location.path("/" + thing.id + "/promote");
})
}
});
app.controller('PromoteController', function ($scope, $http, $routeParams, ThingFactory) {
// HERE'S WHERE THE THING ON THE SCOPE SHOULD HAVE AN ID OF 122,
// BUT IS STILL 1
var id = $routeParams.id;
ThingFactory.get({id: id}).then(function(thing) {
$scope.thing = thing;
});
});

please create a var deferred = $q.defer(); for every method in you factory. otherwise you always use the same deferred and this is resolved with the value in your init function.