I am having difficulty getting $http service to work with my AngularJS application. I am developing it in Visual Studio 2012, using IISExpress. I have the following code:
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', '$http', function($scope,$http) {
$http.get('js/data.json').success(function(data) {
$scope.artists = data;
});
}]);
"success" is never fired. How do I get $http to work?
You should also use .error() to figure out why it's not working.
angular
.module('myApp', []);
angular
.module('myApp')
.controller('MyController', ['$scope', '$http',
function($scope, $http) {
$http.get('js/data.json')
.success(function(data) {
$scope.artists = data;
})
.error(function(err) {
// Figure out what's not working here.
console.log(err);
});
}
]);
Related
i am trying to fetch web service api but i am not able to display
anything, i am new to angularjs please help me.
i have copied my controller and factory code which i am using.
Controller
app.controller('myController', ['$scope', 'fetchService', function($scope, fetchService){
$scope.countries = fetchService.get();
}]);
service
var app = angular.module('app',[]);
app.factory('fetchService', ['$http', function($http){
return{
get: function(){
return $http.get('api/data4.json').success(function(response){
return response.data;
});
}
}
}]);
The problem is that fetchService.get() is asynchronous (a promise returned by $http), so you have to use a .then() like so:
app.controller('myController', ['$scope', 'fetchService', function($scope, fetchService){
fetchService.get()
.then(function(response) {
$scope.countries = response;
});
}]);
After Refering this Link , I am trying to get JSON data into my angular service.
Service:
.factory('restservice', ['$rootScope','$http', '$q', '$log',
function($rootScope,$q, $http) {
return {
getData: function() {
var defer = $q.defer();
$http.get('xyz.com/abc.php', { cache: 'true'})
.success(function(data) {
defer.resolve(data);
});
return defer.promise;
}
};
}])
Controller:
.controller('RestaurantsCtrl', function ($scope,$http, restservice,restViewservice){
restservice.getData().then(function(data) {
$scope.Restaurants = data;
});
})
After Implementing this console says '$q.defer is not a function'.
What's the issue here? Please Help ...!! Am new to Angular Js so forgive if something is wrong.
You have wrong service definition:
factory('restservice', ['$rootScope','$http', '$q', '$log',
function($rootScope, $q, $http) {
Should be:
factory('restservice', ['$rootScope', '$http', '$q', '$log',
function($rootScope, $http, $q, $log) {
Common mistake :)
We faced the same error and resolved now:
Please refer angular 1.6.1 version file, since older version of angular gives the above error.
I'm running a tutorial however they are using a version of AngularJS before 1.3.8.
What am I missing with my code so this data service can be injected?
They are using the following code to inject a service into a controller:
var myApp = angular.module('myApp', []);
myApp.factory('Data', function () {
return { message: "I'm data from a service" };
});
function FirstCtrl($scope, Data) {
$scope.data = Data;
}
function SecondCtrl($scope, Data) {
$scope.data = Data;
}
Here is my code I am trying to alter so it works:
var myApp = angular.module('app', []);
myApp.factory('Data', function(){
return {message:"Data from service"}
});
angular.module('app', Data)
.controller('FirstController', ['$scope', function($scope) {
$scope.data = Data;
}])
.controller('SecondController', ['$scope', function($scope) {
$scope.data = {message: "panel"};
}]);
You must inject Data in the controller # .controller('FirstController', ['$scope', 'Data', function($scope, Data) { not list as module dependency # angular.module('app', Data). See the official DI documentation for more details and other options.
angular.module('app')
.controller('FirstController', ['$scope', 'Data', function($scope, Data) {
$scope.data = Data;
}])
.controller('SecondController', ['$scope','Data', function($scope, Data) {
$scope.data = {message: "panel"};
}]);
When you fetch a already created module you get by using angular.module('app'). You shouldn't be trying to inject the Data factory into the module but instead into the controller.
angular.module('app')
.controller('FirstController', ['$scope', 'Data', function($scope, Data) {
$scope.data = Data;
}])
.controller('SecondController', ['$scope', 'Data', function($scope, Data) {
$scope.data = {message: "panel"};
}]);
Use this:
angular.module('app')
.controller('FirstController', ['$scope', function($scope, Data) {
$scope.data = Data;
}])
.controller('SecondController', ['$scope', function($scope, Data) {
$scope.data = {message: "panel"};
}]);
I'm testing Angular-translate with angular-traslate-partial-loader and it is not populating the page with the default translation on page load.
here is a plunkr of the problem recreated
app.controller('MainCtrl', ['$scope', '$translate', '$translatePartialLoader',
function($scope, $translate, $translatePartialLoader) {
$translatePartialLoader.addPart('test');
$translate.refresh();
$scope.dotranslate = function() {
$translate.refresh();
};
}
]);
http://plnkr.co/edit/Vts9CW4VoJsXoSdllFsq?p=preview
I added a refresh button to show that the $translate.refresh() works after page load.
What am i missing?
I've never used $translate so I'm not sure exactly what the problem is, but you may be changing a value too late in the digest cycle for the refresh to catch it.
You can use $scope.$evalAsync to fix this. See the angular documentation here: https://docs.angularjs.org/api/ng/type/$rootScope.Scope
Here is an example of your app.js with the change:
var app = angular.module('plunker', ['pascalprecht.translate']);
app.config(function run($translateProvider, $translatePartialLoaderProvider) {
$translateProvider.useLoader('$translatePartialLoader', {
urlTemplate: 'translation-{lang}-{part}.json'
});
$translateProvider.preferredLanguage('fr-FR');
});
app.controller('MainCtrl', ['$scope', '$translate', '$translatePartialLoader',
function($scope, $translate, $translatePartialLoader) {
$translatePartialLoader.addPart('test');
//I wrapped your refresh in the eval async function
$scope.$evalAsync(function() {
$translate.refresh();
});
$scope.dotranslate = function() {
$translate.refresh();
};
}
]);
what's the difference of this two code?
var myApp = angular.module('myApp', []);
myApp.controller('GreetingCtrl', function($scope) {
$scope.greeting = {
message: 'Hola!'
};
});
myApp.controller('HiCtrl', function($scope) {
$scope.double = {
text: 'Hello'
};
});
TO
var myApp = angular.module('myApp', []);
myApp.controller('GreetingCtrl',['$scope', function($scope) {
$scope.greeting = {
message: 'Hola!'
};
}]);
myApp.controller('HiCtrl',['$scope', function($scope) {
$scope.double = {
text: 'Hello'
};
}]);`
THAT having a ['$scope', next to function($scope) is not working if i have 2 controllers in 1 module?
Have a look at the AngularJS doc here. Basically, adding the ['$scope', allows you to use the Dependency Injection and still make it work with the JS minification process.
The minifier will change function($scope) in function(a) and you will lose the $scope dependency. Since minifiers don't compress Strings, ['$scope', will remain the same and AngularJS will be able to parse it.
FYI: if you are using Grunt and you don't want to use this ['$scope', notation, this module can be helpful.
angular.module('myApp', [])
.controller('GreetingCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.greeting = {
message: 'Hola!'
};
$http.get('http://www.google.com');
}]);