Develop Reference

Angular, Promises, ngResource

So Im having a hard time trying to get my head wrapped around promises in angularJs. I have mixed around my code to try to do some brute force/reverse engineering understanding of it but nothing is coming out to any viable conclusion.
My Code:
Is is making a call back to get a list of repositories that I manage. These are just stored in the database as basic objects with an id and url.
Here is my view. It allows to me delete, view, and clear metadata in my database about these repos.
<div class="container" ng-controller="adminCtrl as vm">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<label class="control-label" >Repos:</label>
<div ng-repeat="repo in vm.repos">
<div class="clearfix">{{repo.URL}}<br>
<button class="btn btn-primary" ng-click='vm.listFiles(repo.URL)'>View Files</button>
<button class="btn btn-primary" ng-click='vm.clearFiles(repo.URL)'>Clear Files</button>
<button class="btn btn-primary" ng-click='vm.clearRepo(repo.URL)'>Delete Repo</button>
</div>
<br>
</div>
<label class="control-label" >Files:</label>
<div ng-repeat="file in vm.files">
<li>{{file.FullPath}}</li>
</div>
</div>
</div>
<!-- /.row -->
</div>
Here is my controller with some basic functions
(function (angular) {
'use strict';
var ngModule = angular.module('myApp.adminCtrl', []);
ngModule.controller('adminCtrl', function ($scope, $resource) {
//"Global Variables"
var File = $resource("/api/file/:repoUrl");
var Repo_del = $resource("/api/repo/:repoUrl");
var Repo = $resource("/api/repo");
var vm = this;
vm.files = [];
vm.repos = [];
vm.clearFiles = clearFiles;
vm.listFiles = listFiles;
vm.clearRepo = clearRepo;
init();
//Anything that needs to be instantiated on page load goes in the init
function init() {
listRepos();
}
function listRepos() {
vm.repos = Repo.query();
}
//Lists all files
function listFiles(url) {
vm.files = File.query({repoUrl: url});
}
function clearRepo(url) {
Repo_del.remove({repoUrl: url});
}
function clearFiles(url) {
File.remove({repoUrl: url});
}
});
}(window.angular));
Now this works fine and dandy. It brings back the repos and list them. I can delete, view, and remove with all the functions.
My issue came up with when I was trying to make a list item disappear on delete (instead of needing a page load). To do this I needed to find the index of the item being deleted in the array and remove it. I was gonna use some lodash to do this.Seemed simple enough. My problem is, my vm.repos array is not available within the controller.
For example. When I try to print out vm.repos with a console log within the listRepos function like so
function listRepos() {
vm.repos = Repo.query();
console.log(vm.repos);
}
I get nothing back from console.log. So this is telling me its not being assigned. Which to me is peculiar because the list is showing up in the ng-repeat on the view using vm.repos.
I have also ran into a problem when I am able to print out the array. It has TONS of promise information in it. For example if I put the console.log in the init() function I will get an array back that is jammed packed with information under a Resource object.
Im not sure how to go about and parse this down to be a manageable object. Looking at basic guides I have found some examples but nothing I can translate into my situation.
How do I properly handle api/resource promises?
Another problem im having is being able to mock out all of the api responses in my tests. This is my next feat. I do not care if it gets addressed here but I feel its stemming from the same problem.
Here is my only test I was able to write for this controller.
'use strict';
describe('adminCtrl', function () {
beforeEach(function () {
module('myApp.adminCtrl');
module('myApp');
});
describe('listRepos()', function () {
it('should return a json object representing a repository',
inject(function (_$httpBackend_, $rootScope, $controller) {
var scope = $rootScope.$new();
var mockBackend = _$httpBackend_;
var expectedResponse = {id: 12345, url: "https://github.com/myuser/myrepo.git"};
mockBackend.expectGET('/api/repo').respond([expectedResponse]);
var ctrl = $controller('adminCtrl', {$scope: scope});
mockBackend.flush();
expect(ctrl.repos.length).toEqual(1);
console.log(ctrl.repos[0]);
expect((angular.equals(ctrl.repos[0], expectedResponse)));
}));
});
});
Sorry if this is alot. Hopefully this isnt a repeated question.
EDIT to show what im trying now.
function clearRepo(url) {
$http.delete('/api/repo/', {params: {repoUrl: url}}).then(function (){
//DO THINGS
});
Express:
app.delete('/api/repo/:repoUrl', repoCtrl.clear);
repoCtrl.clear
module.exports.clear = function (req, res) {
var repoURL = req.params.repoUrl;
//console.log(repoURL);
Repo.remove({URL: repoURL}, function(err, results) {
if (err) {
console.log("ERR: " + err);
} else {
console.log('\n' + repoURL + ' repo deleted... \n');
}
});
Error im getting:
DELETE http://localhost:3000/api/repo/?repoUrl=https:%2F%2Fgithub.com%2Fuw34%2Fmyrepo.git 404 (Not Found)

First, the promise:
Used by $http
Allow chaining async request
Works like this :
var promise = $http.get('/api/values');
promise.then(function(response) {
$scope.displayData = response.data;
});
It is the new way to avoid simple callback (why avoid callback ?? check this CallbackHell :))
Nevertheless, callback can be complicated, hard to follow for debug and everyone prefer write sync code.
To simplify, Angular allow you to code something which look like sync code (but internally, it is async). To do it, $resource encapsulate a promise.
// this code return an empty array, then after received server respond, it will populate the empty array with data.
var values = VALUES.query();
// A simple version of it can be code like this
function simpleQuery() {
var arrayReference = [];
$http.get('api/values').then(function(response) {
// populate array reference with data received from server
angular.forEach(response.data, function(value) {
arrayReference.push(value);
});
// after the return, angular run a $digest
// which will display all newly received data thank to biding on your view
});
return arrayReference ;
}
By doing this, I return an empty array which will be populate on server response.
It is possible to get the promise from a $resource if you prefer :
var promise = Repo.query().$promise;
promise.then(function(response) {
$scope.displayData = response.data;
});
In 2020, you will probably use Async/Await instead $resource ;)
If you want more information, don't hesitate.

AngularJS $injector:unpr Unknown Provider Error

I am trying to create a user profile page. Where User can display and edit their information.
This is my Controller.js
var userProfileControllers = angular.module("userProfileControllers", []);
userProfileControllers.controller ('userProfileCtrl', ['$scope', '$location', 'localCache', 'customersignup', function ($scope, $location, localCache, customersignup){
var submitProfile = function() {
//Bind Scope
//
var bindScope = function () {
$scope.userProfile = customersignup.userProfile;
};
var asyncBindScope = function() {
$scope.$evalAsync(bindScope());
};
bindScope ();
}}]);
This is my service.js
var userProfileServices = angular.module("userProfileServices", []);
userProfileServices.factory("customersignup", function() {
return {
userProfile: {fname: "kunal"},
updateProfile: function() {
var userProfile = this.userProfile;
},
}
});
In the HTML, let's say in case of first name I have included ng-model="userProfile.fname" in the input of First Name field. Now, when I am loading the html page, I am getting this error :-
https://docs.angularjs.org/error/$injector/unpr?p0=localCacheProvider%20%3C-%20localCache%20%3C-%20userProfileCtrl
Please check the above link, it is from AngularJS official site.

check you have two modules one is for service and other one is for controller, and note that there is no glue between these two modules, to work this you need to glue these two modules, to do that, import the service module in to controller module as below.
var userProfileControllers = angular.module("userProfileControllers", ['userProfileServices']);
then module userProfileControllers have access to module userProfileServices which service is defined. Other vice you don't have access to service module userProfileServices.

You have to add factory name in controller userProfileServices

Setting controller attributes inside ajax call

I am new in AngularJS and I'm with a doubt about the controller attributes. I created an attribute called anuncio, this attribute has an array of objects as showed in the image bellow:
var anuncioModule = angular.module('anuncioModule',[]);
anuncioModule.controller('RegistrationController',['$http',function ($http){
this.anuncios;
this.loadAnuncios = function loadAnuncios(){
$http.get('http://localhost:8080/pederofer/anuncios/get.action').then(function(result){
this.anuncios.push.apply(this.anuncios, result.data);
});
}
}]);
When I call my webservice with the function loadAnuncios and try to set the values directly using "this.anuncios" i get the message "this.anuncios is undefined". but if i create a var called anuncs and set "this.anuncios = anucs", and instead of set my AJAX call directly into this.anuncios I set to anucs as the image bellow, It works.
var anuncioModule = angular.module('anuncioModule',[]);
var anuncs =[];
anuncioModule.controller('RegistrationController',['$http',function ($http){
this.anuncios = anuncs ;
this.loadAnuncios = function loadAnuncios(){
$http.get('http://localhost:8080/pederofer/anuncios/get.action').then(function(result){
anuncs.push.apply(anuncs, result.data);
});
}
}
My question is, why it works?

I might suggest going about what you're doing in a different way.
var anuncioModule = angular.module('anuncioModule',[]);
anuncioModule.controller('RegistrationController', ['$scope', '$http', function ($scope, $http) {
$scope.anuncios = [];
$scope.loadAnuncios = function() {
$http.get('http://localhost:8080/pederofer/anuncios/get.action').then(function(result) {
$scope.anuncios = result.data;
});
};
}
I don't know if that's exactly what you're after but maybe that will make a lightbulb go off for you.

Build simple cache in Angularjs service for data provide from http request which return object reference

I want build some simple cache in Angularjs service for data provide from http request. Additional I want always get reference to the same object. I prepare example code to illustrate my thinking and problem which I have now.
jsfiddle code illustrate problem
I have service UsersModel which provide me user from http request.This user data are shared between controllers. So want to have always reference to same data. I add to him simple logic. Before UsersModel.getUsers() call service check if exist any data from previous call, if exist return him, if not do a http request. I inject that service in tree controller. In first two controllers UsersModel.getUsers() is call immediately after page load. In last after click on button.
Problem is when two first controller call UsersModel.getUsers() in the same time. Then any cached data don't exist and both do http request After that I have in first two controller reference to different user objects. We can see this clicking on load button.
And now my question. How to make this work for the simultaneous first call UsersModel.getUsers() and always have reference to the same object data.
app.js
var APP = angular.module('APP', []);
APP.SidebarCtrl = function ($scope, UsersModel) {
var sidebarCtrl = this;
UsersModel.getUsers()
.then(function (users) {
sidebarCtrl.users = users;
});
};
APP.ContentCtrl = function ($scope, UsersModel) {
var contentCtrl = this;
UsersModel.getUsers()
.then(function (users) {
contentCtrl.users = users;
});
};
APP.FootCtrl = function ($scope, UsersModel) {
var footCtrl = this;
function load() {
UsersModel.getUsers()
.then(function (users) {
footCtrl.users = users;
});
}
footCtrl.load = load
};
APP.service('UsersModel', function ($http, $q) {
var model = this,
URLS = {
FETCH: 'http://api.randomuser.me/'
},
users;
function extract(result) {
return result.data.results['0'].user.email;
}
function cacheUsers(result) {
users = extract(result);
return users;
}
model.getUsers = function () {
return (users) ? $q.when(users) : $http.get(URLS.FETCH).then(cacheUsers);
};
});
Index.html
<div ng-app="APP">
<div ng-controller="APP.SidebarCtrl as sidebarCtrl">
<h1>{{ sidebarCtrl.users }}</h1>
</div>
<div ng-controller="APP.ContentCtrl as contentCtrl">
<h1>{{ contentCtrl.users }}</h1>
</div>
<div ng-controller="APP.FootCtrl as footCtrl">
<h1>{{ footCtrl.users }}</h1>
<button ng-click="footCtrl.load()" type="button">Load</button>
</div>
</div>
jsfiddle code illustrate problem

You can modify your functions as follows:
function cacheUsers(result) {
return (users) ? users : users = extract(result);
}
and
model.getUsers = function () {
return (users) ? $q.when(users) : $http.get(URLS.FETCH, {cache: true}).then(cacheUsers);
};
It provides additional cache check after fetch and enables built-in cache for the object.
I suggest you to read http://www.webdeveasy.com/angularjs-data-model/

injected service is not being identified in the controller

var login_app = angular.module('login_app',[]);
login_app.factory('login_service', function($http) {
return {
login: function() {
//return the promise directly.
return $http.get('/service/login')
.then(function(result) {
//resolve the promise as the data
return result.data;
});
}
}
});
login_app.controller('login_controller',
['$scope',
function($scope,login_service){
$scope.login_username = "";
$scope.login_password = "";
$scope.remember_login = false;
$scope.login_button_action = function(){
login_service.login();
}
}]);
I have a login form which is under the scope of this controller and works fine.
whenever I press the login button, login_button_action is getting called via ng-click directive.
my problem is that I keep getting this error in my JavaScript console.
ReferenceError: login_service is not defined
Is there something wrong with the wya my controller is using the service ?

You need to add the login_service to the definitions above:
login_app.controller('login_controller', ['$scope','login_service',
function($scope,login_service){
// Your code using the service.
}]);
And of course...the service script file needs to be linked in the document.
To be complete...you do not have to do this at all if you are not considering minification or such. In that case it can just be
login_app.controller('login_controller', function($scope, login_service){
// Your code using the service.
}]);