So I'm working on a small app with angular 1 with file uploading and I found out that there were changes that I wasn't aware of as the way coding https in a controller is different now. As the old way now causes http.get.success is not a function. I need help understanding what changes from 1.4 angular 1 to the current version that I have to do now with my controllers so my data from my rest API show up on my HTML. As I'm getting $http.get(..).success is not a function error now.
gallerycontroller
var galleryCtrl = angular.module('galleryCtrl', []);
galleryCtrl.controller('galleryController', function($scope, $http) {
$scope.superheroes= [];
//Retrieve all the superheroes to show the gallery
$http({
method: 'GET',
url: '/superhero'
})
.success(function (data, status, headers, config) {
console.log(data);
})
.error(function (data, status, headers, config) {
console.log(data)
})
});
gallery.html
<!-- view the gallery of all the superheroes in the db -->
<div class="row">
<div ng-repeat="superhero in superheroes">
<div class="col-md-4 col-xs-6 col-sm-offset-0">
<div class="thumbnail">
<img ng-src="{{superhero.picture.url | fpConvert: {filter:'sharpen', w:300, h:150} }}" />
<div class="caption text-center">
<h3>{{superhero.name}}</h3>
<p><label>Super powers: </label> {{superhero.superPowers}}</p>
<div class="text-right"><a ng-href="/#/detail/{{superhero._id}}" class="btn btn-danger" role="button">View</a> </div>
</div>
</div>
</div>
</div>
</div>
Success is deprecated. Use then.
$http.get().then(function success(result){
}, function error(err) {
})
Related
Below is the link of my file. I was unable to generate a url from the existing url generated from $http, by using $parent.$index and $index as ids from routing, please help: Plunker
I have applied the same kind of functionality to another application it worked have a look at this Plunker
Inside the loadSingleMatch() function error in updating the url inside the $http
error image:-
Code
app.controller("selfController", ['$http', '$routeParams',
function($http, $routeParams) {
//create a context
var main = this;
this.parentId = $routeParams.parent;
this.childId = $routeParams.child;
console.log(this.parentId);
console.log(this.childId);
this.urlOne = "https://raw.githubusercontent.com/openfootball/football.json/master/2015-16/en.1.json";
this.urlTwo = "https://raw.githubusercontent.com/openfootball/football.json/master/2016-17/en.1.json";
this.loadSingleMatch = function() {
$http({
method: 'GET',
url: main.urlOne + '/' + main.parentId + '/' + main.childId
}).then(function successCallback(response) {
main.matchData = response.data.rounds[main.parentId].matches[main.childId];
console.log(main.matchData);
}, function errorCallback(response) {
console.log(response);
});
}
}
]);
The a tag should be inside the second ng-repeat:
<div class="w3-row w3-hover-shadow w3-hover-border-black w3-border w3-white w3-padding-16" ng-repeat="x in matchDay.matches">
<a ng-href="#/indiTeam/{{$parent.$index}}/{{$index}}" >
<div class="w3-small">
<div class="w3-col s6 ">
{{x.team1.code}} vs {{x.team2.code}}
</div>
<div class="w3-col s6">
<div class="w3-padding-small">
{{ x.date | date: 'shortDate'}}
({{$parent.$index}} {{$index}})
</div>
</div>
</div>
</div>
</a>
</div>
See modified plunker:
https://plnkr.co/edit/PeqUHIZVC0HsqdjLkdOo?p=preview
Finally found out the answer to my question
the url inside the $http should not be changed only the response inside of it needs to be changed
the url: main.urlOne is the change that bought the output as expected
Images path are stored in database and I am fetching them from http request.
Data is in array format.
Sample data:
{"success":true,"img":["portfolio_img\/40306762187.jpg","portfolio_img\36272080187078.jpg","portfolio_img\/36211374209814.jpg","portfolio_img\/36272058183542.jpg"]}
I am want to show those images in html page.
Here is the http request code.
var formApp = angular.module('formApp', []);
formApp.controller('getprofile', function($scope,$http){
$http({
url: 'get_pics.php',
method: "GET",
params: {uid: uid}
})
.success(function(data) {
if (data.success) {
//forEach($scope.data,function(value,index){
// alert(value.img);
//})
}
});
})
HTML code is here.
<div ng-controller ="getprofile">
<div class="row"><div id="grid">
<fieldset ng-repeat="choice in choices"> (Need to modify)
<div class="col-xs-3 thumbnail">
<img src="" ng-src="{{imageUrl}}" ng-model="choice.course">(Need to modify)
</div>
</fieldset>
</div></div>
</div>
I am still working on code. So, there should be some error and typos.
Try this,
var formApp = angular.module('formApp', []);
formApp.controller('getprofile', function($scope,$http){
$http({
url: 'get_pics.php',
method: "GET",
params: {uid: uid}
})
.success(function(data) {
if (data.success) {
angular.forEach(data,function(value,index){ // Angular foreach
$scope.images = data.img; // data in images scope variable.
})
}
});
})
In HTML
<div ng-controller ="getprofile">
<div class="row"><div id="grid">
<!-- loop images scope variable -->
<fieldset>
<div class="col-xs-3 thumbnail" ng-repeat="imageUrl in images">
<img src="" ng-src="{{imageUrl}}" ng-model="choice.course">
</div>
</fieldset>
</div></div>
</div>
There's something wrong when I'm trying to get json file with data into my ng-repeat.
Somehow, in the console appears 'All drinks loaded!' which is success information, but it doesn't show in the DOM.
Also I'm receiving an error: angular.min.js:118 TypeError: $http.get(...).success(...).errors is not a function
If anybody knows what may causing that error, please tell me.
Thanks for help.
var app = angular.module('app', []);
app.controller('MainController', ['$scope', '$http', '$log',
function($scope, $http, $log) {
$scope.drinks = [];
$http.get('drinks.json')
.success(function(data, status, headers, config) {
$scope.drinks = data;
$log.info('All drinks loaded!');
}).errors(function(data, status, headers, config) {
$log.error('Error' + status + 'unable to download drinks list.');
});
}
]);
//drinks.json
//[
//{
//"name": "Pepsi 1l",
//"price": 2.99
//},
//{
//"name": "Orange juice 0.5l",
//"price": 1.40
//},
//{
//"name": "Lemon tea 2l",
//"price": 3.20
//},
//{
//"name": "Cola-Cola 0.33l",
//"price": 0.89
//}
//]
<div class="container">
<div class="content" ng-controller="MainController">
<div class="col-md-6">
</div>
<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item" ng-repeat="(id, product) in drinks">
<strong>{{ product.name }}</strong> - {{ product.price | currency }}
<button ng-click="removeFromCart(id)" class="btn btn-xs btn-danger pull-right">X</button>
</li>
</ul>
</div>
</div>
</div>
Its .error() not .errors()
$http.get('url')
.success(function(data, status, headers, config) {
// do something
}).error(function(data, status, headers, config) {
// do something
});
Change it to fix the js error and your page will work fine
I have enclosed my service function here. Iam trying to send a simple data to node backend but nothing happens. But at this API Endpoint the things works well its saving data in good shape(in postman). Iam sure iam wrong somewhere here in angular No Errors are triggering. No http request is raised.
App.service('UserServices', function($rootScope, $http) {
this.AddToInviteList = function(email, cb) {
var url = $rootScope.api_server_url + "/users/addtoinvitelist";
$http({
method: 'POST',
url: url,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
} // set the headers so angular passing info as form data (not request payload)
}).success(function(data) {
console.log("email is posted sucessfully" + data);
cb(data);
})
}
})
and my controller code is here,
App.controller('InviteController', function($scope, $rootScope, $routeParams, $location, UserServices) {
$scope.AddToInviteList = function(email) {
UserServices.AddToInviteList(email, function(dataresponse) {
console.log(dataresponse);
})
}
});
And my HTML View div is below.
<div class="tab-content">
<!--NEWSLETTER FORM-->
<div class="panel panel-minimalize">
<h2 class="signin-brand animated-hue"> <i class="fa fa-rocket"></i> MEDICOSHERE</h2>
<div class="panel-body bg-inverse ui-corner-all">
<form action="#">
<div class="form-group">
<label for="subcribeNewsletter" class="control-label">INVITE FORM<br> <small>We are happy to invite you to medicoshere, So please enter your email ID in the below form.</small></label>
<div class="input-group input-group-in input-group-sm">
<div class="input-group-addon"><i class="fa fa-envelope text-belpet"></i></div>
<input class="form-control" id="subcribeNewsletter" placeholder="johndoe#mail.com" ng-model="email" required>
<div class="input-group-btn">
<button type="submit" class="btn btn-default text-belpet" ng-click="AddToInviteList(email)"><strong>OK</strong></button>
</div>
</div>
</div><!-- /.form-group -->
</form><!-- /form -->
</div><!-- /.panel-body -->
</div><!-- /.panel -->
<!--/END NEWSLETTER FORM-->
</div><!-- /.cols -->
</main>
Will it would be nice to have a bit more of information regarding your problem but I already see some potential issues.
First of all I hope that App variable (App.service) is an instance of your angular's main module.
Also, I believe you must return the function in an object at the begging or end of your service declaration. That way it'll work as expected when calling it from your controller.
So I believe it should look something like this:
var App = angular.module('myApp');
App.service('UserServices', function($rootScope, $http) {
this.AddToInviteList = function(email, cb) {
var url = $rootScope.api_server_url + "/users/addtoinvitelist";
$http({
method: 'POST',
url: url,
headers: { 'Content-Type': 'application/x-www-form-urlencoded '
}
// set the headers so angular passing info as form data (not request payload) })
.success(function(data) {
console.log("email is posted sucessfully" + data);
cb(data);
})
}
return {
AddToInviteList:AddToInviteList
}
})
Sorry for the bad indentation :) writing from a smartphone.
Hope it helps!
EDIT
Also, are you sure you added the file to your index.html? :D
Another thing to check
You might want to check in your routing is OK. Perhaps you're not associating that view to the right controller. That or not including the service file could be one of the reasons you're not getting any errors.
I am using Materialize CSS and the Angular-materialize directives:
http://materializecss.com/modals.html
http://krescruz.github.io/angular-materialize/#modals
I am trying to do the following
User clicks button
Controller action gets fired and we go get data from an api
Modal is displayed to user and data returned is displayed
I have the following button
<a href="#MyModal" modal class="my-modal-trigger waves-effect waves-green btn right"Show Data/a>
and modal
<div id="MyModal" class="modal">
<div class="modal-content center">
<div class="row">
<div class="row left">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Data</span>
</div>
<div>
<ul class="collection">
//loop the data
</ul>
</div>
</div>
<a class="modal-action modal-close waves-effect waves-green btn">Close</a>
</div>
</div>
</div>
</div>
and i have the following in my JS
var app = angular.module("MyApp", ['ngRoute', 'ui.materialize']);
How can i call a controller method to pop up the modal and fill it with data, from my controller
app.controller('mainController', function ($scope, $location, $http, AppConfig) {
var params = { some stuff}
$http({
method: 'POST',
url: myURL,
headers: {
'Content-Type': 'text/html',
'Accept': 'application/json'
},
params: params
})
.success(function (data) {
//pop up the modal and show the data
Materialize.toast('Awesome, we got the data', 4000);
})
.error(function (status) {
Materialize.toast('Bad stuff happened', 4000);
});
});
Angular-materialize lets you set an option open in your trigger. Use it to specify a variable that, when true, will launch your modal. Set it to false initially in your controller.
Use ng-click to call a function in your controller that fetches data from your API then sets the open variable to true on success.
Trigger:
<a href="#MyModal" class="btn" modal open="openModal"
ng-click="getDataOpenModal()">Show Data</a>
In Controller:
$scope.openModal = false;
$scope.getDataOpenModal = function() {
$http({
method: 'POST',
url: '/myUrl',
headers: {
'Content-Type': 'text/html',
'Accept': 'application/json'
},
params: params
})
.success(function(data) {
$scope.data = data;
$scope.openModal = true;
Materialize.toast('Awesome, we got the data', 4000);
})
.error(function(status) {
Materialize.toast('Bad stuff happened', 4000);
});
}
EDIT: There are two other options you can set in your trigger, ready and complete
HTML
<a href="#MyModal" class="btn" modal open="openModal"
ready="readyCallback()" complete="completeCallback()"
ng-click="getDataOpenModal()">Show Data</a>
JS
$scope.readyCallback = function() {
Materialize.toast("Modal ready", 4000);
}
$scope.completeCallback = function() {
Materialize.toast("Modal complete", 4000);
}
Worked for me with $scope.$apply() after $scope.openModal = true;
I was fighting with this too, but no solution worked for me. I had to change html side.
My html:
<i class="zmdi zmdi-eye"></i>
In controller:
$scope.openModal = false
$scope.get_info_log = function(){
$scope.openModal = true;
}
Data-target should match your modal id:
!-- Modal Structure-->
<div id="log_detail" class="modal modal-fixed-footer setup-modal">
<div class="modal-content">
</div>
</div>
<div class="modal-footer">
<a class=" modal-action modal-close waves-effect waves-light btn">Close</a>
</div>
</div>