OK so I am new to angular and I have been searching for answers all over the web to this problem. I am having an unknown provider error and I am not able to find the right answer I have tried multiple replies from here on stack overflow and alot of other places but it has not helped me find the right answer for it yet.
I have the Module.
var app = angular.module('app', ['ngRoute','app.student']).config(['$httpProvider', '$routeProvider', function ($httpProvider,$routeProvider) {
//Various code
}]);
Here is my Controller
angular.module('app.student', []).controller('StudentCtrl', ['StudentService', '$scope', '$http', function (StudentService, $scope, $http) {
//Code
}]);
And now My service
angular.module('app.student', []).service('StudentService', ['$http', function ($http) {
// Some More Code
}]);
I am still new to this language, I have again tried multiple answers on Stackoverflow and None of the answers are working for me. So I just decided to ask for some help. Thanks
P.S. if you need more of my code just let me know.
You are creating the app.student module twice.
First you create your module (and then you also create a controller):
angular.module('app.student', []).controller('StudentCtrl', ['StudentService', '$scope', '$http', function (StudentService, $scope, $http) {
//Code
}]);
Then once it's created, just retrieve it. Don't pass in an array of dependencies, or you will create it again:
angular.module('app.student').service('StudentService', ['$http', function ($http) {
// Some More Code
}]);
You do not need to have app.student as a dependency,
var app = angular.module('app', ['ngRoute']).config(['$httpProvider', '$routeProvider', function ($httpProvider,$routeProvider) {
//Various code
}]);
your controller code should be,
angular.module('app').controller('StudentCtrl', ['StudentService', '$scope', '$http', function (StudentService, $scope, $http) {
//Code
}]);
and service should be,
angular.module('app').service('StudentService', ['$http', function ($http) {
// Some More Code
}]);
Related
Which one is correct way for initializing module,controller in angularJS
var myapp=angular.module('myApp', []);
myapp.controller('Ctrl1', Ctrl1);
myapp.controller('Ctrl2', Ctrl2);
Ctrl1.$inject = ['$scope', '$http'];
Ctrl2.$inject = ['$scope', '$http'];
function Ctrl1($scope, $http) {
}
function Ctrl2($scope, $http) {
}
or this way
var myapp=angular.module('myApp', []);
myapp.controller('Ctrl1', Ctrl1);
Ctrl1.$inject = ['$scope', '$http'];
function Ctrl1($scope, $http) {
}
myapp.controller('Ctrl2', Ctrl2);
Ctrl2.$inject = ['$scope', '$http'];
function Ctrl2($scope, $http) {
}
or doing this way
var myapp=angular.module('myApp', []);
myapp.controller('Ctrl1', ['$scope', '$http', function ($scope, $http) {} ]);
myapp.controller('Ctrl2', ['$scope', '$http', function ($scope, $http) {} ]);
I am confusing which way is correct and can you give give me the cirrect project structure of AngularJS frmawork
Any sample project for that in github always welcome
Some peoples says John Papa style which one correct way i mean most efficient way
The simpliest way is to write:
myapp.controller('Ctrl1', function($scope, $http) {
});
And you should use ngmin to parse your code before minification. It will automatically wrap the controller callback in ['$scope', '$http', function($scope, $http) {}] to avoid minification problem.
If you use gulp, use gulp-ngmin.
The second way should be the ideal way as because
It is easy to read.
Easy to maintain
Protected from minification by the injector.
Anyways all of them are correct.
But second way should be the best.
Also make sure that you wrap the code in the way to protect from variable name clashes:
(function(){
'use strict'; //another best practice
//then your code
})()
Angular's $inject method, we can explicitly declare our dependencies. This one may give problem for every controller injection. Other than you can use.
https://docs.angularjs.org/api/auto/service/$injector
I added a service to my angular controller, but it says every time there is no function. I really dont know why and hope there is someone who can help me.
Here is my userCtrl.js http://hastebin.com/imufehimaw.js
You haven't injected the service in controller
Change
controller('userCtrl', function($scope, $http) {
To
controller('userCtrl', function($scope, $http, ergastAPIservice) {
You should inject your service as a dependency to your controller as shown below before using it
controller('userCtrl', function($scope, $http, ergastAPIservice) {
//your code
});
better way of using it if you are considering minimizing in future
controller('userCtrl', ['$scope', '$http', 'ergastAPIservice', function($scope, $http, ergastAPIservice) {
//your code
}]);
everyone.
I have a really strange (for me) problem here. I am trying to inject the $q lib in one of my controllers and when I try to console.log() it, it returns "undefined". I am injecting the same library in one of my services, and it's working there! Let me show you:
The service:
(function() { 'use strict';
angular
.module('app.grid')
.factory('GridData', GridData);
GridData.$inject = ['$http', '$q'];
function GridData($http, $q) {
...
The controller (not working):
(function() {
'use strict';
angular
.module('app.grid')
.controller('GridCtrl', GridCtrl);
GridCtrl.$inject = ['$log', '$scope', 'GridData', '$q'];
function GridCtrl($log, $scope, GridData, $rootScope, $q) {
console.log($q); // Returns "undefined"
...
I wonder if any of you guys had had this same problem before? It's probably something real stupid, like it always is, but I can't see it for some reason :(
Cheers,
H
You need to add the $rootScope to your $inject array:
GridCtrl.$inject = ['$log', '$scope', 'GridData', '$rootScope', '$q'];
Or remove it from the argument list if it's not needed:
function GridCtrl($log, $scope, GridData, $q) {
You have one too many arguments:
GridCtrl.$inject = ['$log', '$scope', 'GridData', '$q'];
function GridCtrl($log, $scope, GridData, $rootScope, $q) {
// ^
}
You're not injecting $rootScope. The $q service will be available inside your controller, it will just be referred to by $rootScope instead of $q. Remove that and it should work! Alternatively, add '$rootScope to the dependency array.
I am trying to create a service to do some AJAX requests.
However, my service keeps getting undefined when I try to do something with it in my controllers. Here is my code.
I have found a lot of examples on here, and I've tried to follow a lot of them but no matter what I do my service keeps getting undefined.
My service:
MyApp.factory('myService', function($http) {
return {
findAll: function() {
return $http.get('/findAll')
.then(function(result) {
return result.data;
});
}
}
});
My Controller:
MyApp.controller('UserController', ['$scope', '$http', 'myService', function($scope, $http, $log, myService) {
// Whatever I do with myService here it gets undefined.
//$scope.test = myService.findAll();
//myService.findAll();
}]);
I assume I don't inject it correctly but I can't see whats wrong. I'm fairly new to Angular so..
Any pointers would be appreciated.
Remove $log from the injection. You are currently "naming" the myService service to $log and therefore myService inside the controller is undefined.
MyApp.controller('UserController', ['$scope', '$http', 'myService',
function($scope, $http, myService) {
// Whatever I do with myService here it gets undefined.
//$scope.test = myService.findAll();
//myService.findAll();
}]);
2nd solution
To avoid having to "name" the services like this it's acceptable to inject them without naming them.
MyApp.controller('UserController', function($scope, $http, myService) {
// Whatever I do with myService here it gets undefined.
//$scope.test = myService.findAll();
//myService.findAll();
});
Just remember to remove the closing bracket aswell.
I asked a similar question earlier when attempting to inject $scope and $http into a controller Cannot call method 'jsonp' of undefined in Angular.js controller. Now I'm attempting to refactor that code slightly by moving the code into a function within the controller. I'm encountering similar issues and can't seem to grasp the mechanics of dependency injection in Angular. Below is my new code. Both $scope and $http are undefined. What I'm attempting to do is make an http request when didSelectLanguage() fires and assign the resulting data to the "image" variable in the $scope from the parent controller. Can someone enlighten me as to how dependency injection is supposed to work in this example?
angular.module('myApp.controllers', []).
controller('ImagesCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.didSelectLanguage=function($scope, $http) {
console.log($scope);
$http.jsonp('http://localhost:3000/image?quantity=1&language='+this.language+'&Flag=&callback=JSON_CALLBACK')
.success(function(data){
$scope.image = data;
});
}
}])
When you create your controller:
angular.module('myApp.controllers', []).
controller('ImagesCtrl', ['$scope', '$http', function ($scope, $http) {
// ...
}]);
The stuff inside the body of the controller function automatically has access to $scope and $http because of closures. Thus, there's no need to specify anything additional for a function on the $scope to have access to these things:
angular.module('myApp.controllers', []).
controller('ImagesCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.didSelectLanguage = function() {
$http.jsonp('http://localhost:3000/image?quantity=1&language=' + this.language + '&Flag=&callback=JSON_CALLBACK');
.success(function(data) {
$scope.$parent.image = data;
});
}
}]);
When didSelectLanguage is run, it sees the references to $http, and reaches out of the function into the outer function to get the value of the reference; the same happens for $scope inside the success callback.
So, in short, there's no need to pass any arguments to your didSelectLanguage function, nor is there in this case any reason to use the $injector.
With the help of Michelle Tilley's comment & article I solved the problem as follows. However, I'm going to keep the question open until someone else answers or until I understand enough to write an accompanying explanation.
controller('ImagesCtrl', ['$scope', '$http', '$injector', function ($scope, $http, $injector) {
$scope.didSelectLanguage=function() {
$http.jsonp('http://localhost:3000/image?quantity=1&language='+this.language+'&Flag=&callback=JSON_CALLBACK')
.success(function(data){
$scope.$parent.image = data;
});
}
}])