I have a service that make some calls to retrieve data to use in my app. After I've loaded data, I need to call another service to make some operations on my data. The problem is that second service will not have access to the data of the first service.
I've made a plunker: plunkr
First service
app.factory('Report', ['$http', function($http,$q){
var Authors = {
reports : [],
requests :[{'url':'data.json','response':'first'},
{'url':'data2.json','response':'second'},
{'url':'data3.json','response':'third'}]
};
Authors.getReport = function(target, source, response, callback) {
return $http({ url:source,
method:"GET",
//params:{url : target}
}).success(function(result) {
angular.extend(Authors.reports, result)
callback(result)
}
).error(function(error){
})
}
Authors.startQueue = function (target,callback) {
var promises = [];
this.requests.forEach(function (obj, i) {
console.log(obj.url)
promises.push(Authors.getReport(target, obj.url, obj.response, function(response,reports){
callback(obj.response,Authors.reports)
}));
});
}
return Authors;
}])
Second service
app.service('keyService', function(){
this.analyze = function(value) {
console.log(value)
return value.length
}
});
Conroller
In the controller I try something like:
$scope.result = Report.startQueue('http://www.prestitiinpdap.it', function (response,reports,keyService) {
$scope.progressBar +=33;
$scope.progress = response;
$scope.report = reports;
});
$scope.test = function(value){
keyService.analyze($scope.report.about);
}
I think this is what you are going for? Essentially, you want to call the second service after the first succeeds. There are other ways of doing this, but based on your example this is the simplest.
http://plnkr.co/edit/J2fGXR?p=preview
$scope.result = Report.startQueue('http://www.prestitiinpdap.it', function (response,reports) {
$scope.progressBar +=33;
$scope.progress = response;
$scope.report = reports;
$scope.test($scope.report.about); //added this line
});
$scope.test = function(value){
$scope.example = keyService.analyze(value); //changed this line to assign property "example"
}
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<p>Progress notification : {{progress}}!</p>
<div ng-show="show">
<progress percent="progressBar" class="progress-striped active"></progress>
</div>
<pre>{{report}}</pre>
<pre>{{report.about}}</pre>
{{example}} <!-- changed this binding -->
</body>
Related
I’ve been playing around with Upload file - Streaming method. The original code, here:
https://github.com/aspnet/Docs/tree/master/aspnetcore/mvc/models/file-uploads/sample/FileUploadSample
However, I’m trying to get the data in the value attribute of <input value=” ”> using Angular, the idea is that I can POST the value into my MVC model instead of whatever is typed by the user (as in the original code). So, I have done this change to the input value property.
Streaming/Index.cshtml:
<div ng-app="myApp">
<div ng-controller="myCtrl">
..
<input value="#Model.name” type="text" name="Name" ng-model="name"/>
..
<button ng-click="createUser()">Create User</button>
..
</div>
</div>
#section scripts{
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="~/js/app.js"></script>
}
However, with Angular code running under app.js, the following piece of code actually fails with status code 400. This is because the passed value is “” and not the data under of value attribute of the HTML input tag.
App.js:
var User = (function () {
function User(name) {
this.name = name;
}
return User;
}());
var myApp = angular.module('myApp', []);
myApp.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function () {
scope.$apply(function () {
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
myApp.service('userService', ['$http', function ($http) {
this.createUser = function(user) {
var fd = new FormData();
fd.append('name', user.name);
return $http.post('/streaming/upload', fd, {
transformRequest: angular.identity,
headers: {
'Content-Type': undefined
}
});
};
}]);
myApp.controller('myCtrl', ['$scope', 'userService', function ($scope, userService) {
$scope.createUser = function () {
$scope.showUploadStatus = false;
$scope.showUploadedData = false;
var user = new User($scope.name);
userService.createUser(user).then(function (response) { // success
if (response.status == 200) {
$scope.uploadStatus = "User created sucessfully.";
$scope.uploadedData = response.data;
$scope.showUploadStatus = true;
$scope.showUploadedData = true;
$scope.errors = [];
}
},
function (response) { // failure
$scope.uploadStatus = "User creation failed with status code: " + response.status;
$scope.showUploadStatus = true;
$scope.showUploadedData = false;
$scope.errors = [];
$scope.errors = parseErrors(response);
});
};
}]);
function parseErrors(response) {
var errors = [];
for (var key in response.data) {
for (var i = 0; i < response.data[key].length; i++) {
errors.push(key + ': ' + response.data[key][i]);
}
}
return errors;
}
The solution must be a simple one, but after much research, I haven’t been able to find out how to modify it to make the data in the value=’’” attribute being passed across. This might be a stupid question but a headache for me however since I’m a total newbie regarding Angular. Please have some mercy, help.
Thanks
Use the ng-init directive to initialize the model:
<input ng-init="name= #Model.name" type="text" name="Name" ng-model="name"/>
I have the service :
service.getMarketedPrograms = function() {
return $http.get( archApiUrl + "program/marketed-program" ).then(function( result ) {
return result.data;
});
};
I want to append the service with the above :
service.getEligibility = function( params ) {
return $http.get( maverickApiUrl + "quote/getEligibility", { params: params }).then( transformEligibility );
};
After merging I want to filter the final one
If I understand correctly, you need to get both results firstly and then decide what to return.
You need to inject $q service (angularjs promises) and then use such code:
var promises = [getMarketedPrograms(), getEligibility()];
$q.all(promises).then(function(results){ //array of results
console.log(results[0]); //marketedPrograms result
console.log(results[1]); //getEligibility result
return results[0]; //for example, or do whatever you need
})
If you have two different controllers and two services, to synchronize them all, you should use events mechanism, i.e. $broadcast and $on methods. So, whenAllDone function will be called only when both controllers have done their tasks($scope.self = true):
function controllerFactory(timeout, name){
return function($scope, $timeout){
var self = this;
var outerResult;
$scope.name = name;
whenAllDone = (data) => {
console.log(`Sync ${name} - selfResult: ${timeout}, outerResult: ${data}`);
}
$scope.$on('done', (x, arg) => {
if(arg.ctrl != self){
$scope.outer = true;
outerResult = arg.val;
if($scope.self)
whenAllDone(arg.val);
}
});
//mimic for getEligibility and getMarketedPrograms
$timeout(() => {
$scope.self = true;
$scope.$parent.$broadcast('done', { ctrl: self, val: timeout });
if($scope.outer)
whenAllDone(outerResult);
}, timeout);
}
}
angular.module('app', [])
.controller('ctrl1', controllerFactory(2000, 'ctrl1'))
.controller('ctrl2', controllerFactory(5000, 'ctrl2'))
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
<script type="text/ng-template" id="myTemplate">
<h4>{{name}}:</h4>
<span ng-style="{'background-color': self ? 'green' : 'white'}">self</span>
<span ng-style="{'background-color': outer ? 'green' : 'white'}">outer</span>
</script>
<div ng-controller='ctrl1' ng-include="'myTemplate'"></div>
<div ng-controller='ctrl2' ng-include="'myTemplate'"></div>
</div>
I would like to call setup method in an angular controller that fetches all the relevant component parts it needs to continue. I'm sure I should be using promises, but I'm a little confused about the proper usage. Consider this:
I have a ShellController that needs to fetch the currently logged in user, then display their name on-screen, then fetch some customer details and display them on screen. If at any point this sequence fails, then I need a single place for it to fail. Here's what I have so far (not working ofc).
var app = angular.module('app', [])
app.controller('ShellController', function($q, ShellService) {
var shell = this;
shell.busy = true;
shell.error = false;
activate();
function activate() {
var init = $q.when()
.then(ShellService.getUser())
.then(setupUser(result)) //result is empty
.then(ShellService.getCustomer())
.then(setupCustomer(result)) // result is empty
.catch(function(error) { // common catch for any errors with the above
shell.error = true;
shell.errorMessage = error;
})
.finally(function() {
shell.busy = false;
});
}
function setupUser(user) {
shell.username = user;
}
function setupCustomer(customer) {
shell.customer = customer;
}
});
app.service('ShellService', function($q, $timeout) {
return {
getUser: function() {
var deferred = $q.defer();
$timeout(function() {
deferred.resolve('User McUserface');
}, 2000);
return deferred.promise;
},
getCustomer: function() {
var deferred = $q.defer();
$timeout(function() {
deferred.resolve('Mary Smith');
}, 2000);
return deferred.promise;
}
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="ShellController as shell">
<div class="alert alert-danger" ng-show="shell.error">
An error occurred! {{ shell.errorMessage }}
</div>
<div class="alert alert-info" ng-show="shell.busy">
Fetching details...
</div>
<div>Username: {{ shell.username }}</div>
<div>Customer: {{ shell.customer }}</div>
</div>
</body>
What should I be doing here?
Your code needs little changes. .then() receives a callback reference, rather than another promise. So here
.then(ShellService.getUser())
you're passing a promise as parameter. You should pass a callback that returns a resolving value or a promise as parameter to allow chaining
Also the initial $q.when is not necessary, since your first function already returns a promise. You should do something like this:
ShellService.getUser()
.then(setupUser(result)) //result is empty
.then(ShellService.getCustomer)
.then(setupCustomer)
.catch(function(error) { // common catch for any errors with the above
shell.error = true;
shell.errorMessage = error;
})
.finally(function() {
shell.busy = false;
});
I have a recent article section where i need to validate whether image is exist or not on server.
I try some tutorial it validate properly but it does not return any value to my ng-if directive.
Here is my recent article section:-
<div ng-controller="RecentCtrl">
<div class="col-md-3" ng-repeat="items in data.data" data-ng-class="{'last': ($index+1)%4 == 0}" bh-bookmark="items" bh-redirect>
<div class="forHoverInner">
<span class="inner">
<span class="defaultThumbnail">
<span ng-if="test(app.getEncodedUrl(items.bookmark_preview_image))" style="background-image: url('{{app.getEncodedUrl(items.bookmark_preview_image)}}'); width: 272px; height: 272px; " class="thumb" variant="2"></span></span></span> </div>
</div></div>
Here is my recent article controller:-
app.controller('RecentCtrl', function($scope, $http, $rootScope, RecentArticleFactory,$q) {
$scope.test = function(url) {
RecentArticleFactory.isImage(url).then(function(result) {
return result;
});
};
})
Here is recent aricle factory code:-
app.factory("RecentArticleFactory", ["$http", "$q", function ($http, $q) {
return {
isImage: function(src) {
var deferred = $q.defer();
var image = new Image();
image.onerror = function() {
deferred.resolve(false);
};
image.onload = function() {
deferred.resolve(true);
};
image.src = src;
return deferred.promise;
},
}
})
But
ng-if="test(app.getEncodedUrl(items.bookmark_preview_image))" does not return any value
Any Idea?
Thats because it is async due to deferred. Try calling the test function and binding the result value to a field in scope.
First, trigger the test function via $watch:
$scope.$watch("data.data", function() {
for(var i = 0; i < $scope.data.data.length; i++) {
var items = $scope.data.data[i];
$scope.test(items);
}
})
Then change your test function as follows:
$scope.test = function(items) {
items.isImageAvailable= false;
RecentArticleFactory.isImage(items.bookmark_preview_image).then(function(result) {
items.isImageAvailable= result;
});
};
})
Finally, you can use this in your view as:
<span ng-if="items.isImageAvailable" ...></span>
Of course you also need to call app.getEncodedUrl in between. But as I could not see, where app is defined, I omitted this. But the conversion is nevertheless necessary.
I have this code:
controller:
function deleteRootCategory(){
$scope.rootCategories[0] = '';
}
function getCategories(){
categoryService.getCategories().then(function(data){
$scope.rootCategories = data[0];
$scope.subCategories = data[1];
$scope.titles = data[2];
});
}
getCategories();
service:
var getCategories = function(){
var deferred = $q.defer();
$http({
method:"GET",
url:"wikiArticles/categories"
}).then(function(result){
deferred.resolve(result);
});
}
return deferred.promise;
}
html:
<div ng-controller="controller">
<div ng-repeat="root in rootCategories"> {{root}} </div>
<div ng-repeat="sub in subCategories"> {{sub}} </div>
<div ng-repeat="title in titles">{{title}}</div>
</div>
html2:
<div ng-controller="controller">
<div ng-include src="html"></div>
<button ng-click="deleteRootCategory()">Del</button>
</div>
When I click the deleteRootCategory-button the array $scope.rootCategories is updated, but the view won't ever change.
What am I missing?
Thanks
You will probably want to have a broadcast event set up when the value is changed in the service. Something like this.
.service("Data", function($http, $rootScope) {
var this_ = this,
data;
$http.get('wikiArticles/categories', function(response) {
this_.set(response.data);
}
this.get = function() {
return data;
}
this.set = function(data_) {
data = data_;
$rootScope.$broadcast('event:data-change');
}
});
Have both controllers waiting for the event, and using the set to make any changes to the array.
$rootScope.$on('event:data-change', function() {
$scope.data = Data.get();
}
$scope.update = function(d) {
Data.set(d);
}