I just wrote :
var app = angular.module('app', []);
app.controller('SearchController', [ '$scope, $http', function( $scope, $http ) {
}]);
...and i get the following error :
Error: [$injector:unpr] http://errors.angularjs.org/1.3.0-rc.3/$injector/unpr?p0=%24scope%2C%20%24httpProvider%20%3C-%20%24scope%2C%20%24http Q/<#http://welcomepage.local/vendor/angularjs-1.3.min.js:6:414
I just followed examples on official documentation, can you tell where i'm wrong ?
I'm using v 1.3.0-rc.3
app.controller('SearchController', [ '$scope', '$http', function( $scope, $http ) { // you missed '' here
}]);
// you have to inject the dependencies [ '$scope', '$http', functi.. note that $http and $scope is inside " or '
of course I have html :
<html ng-app="app">
<body>
<div ng-controller="SearchController">[...]
Related
how to inject ngCookies service to the controller . i get an error stating injection failed as below Error: [$injector:unpr] http://errors.angularjs.org/1.5.3/$injector/unpr?p0=%24cookiesProvider%20%3C-%20%24cookies%20%3C-%20Intake
app.controller("Intake", ["$scope", "$http", "$window", "$mdDialog", "$mdToast", "IntakeFactory", "fileUpload", 'ngCookies', function ($scope, $http, $window, $mdDialog, $mdToast, $Intake, $fileUpload ,$cookieStore ) {
You have to inject ngCookies not in your controller but in your module and your order of injections is incorrect.
var app= angular.module('myModuleName', ['ngCookies']);
And in your controller, you can access its properties by injecting $cookieStore like below
app.controller("Intake", ["$scope", "$http", "$window", "$mdDialog", "$mdToast", "IntakeFactory", "$fileUpload", '$cookieStore', function ($scope, $http, $window, $mdDialog, $mdToast,IntakeFactory, $fileUpload ,$cookieStore )
You can use cookie like this :
(it won't work in this snippet becuase SO doesnot allow cookies HERE)
var app = angular.module('myApp', ['ngCookies']);
app.controller('myCtrl', function($scope, $cookies) {
$cookies.putObject('cookieData', 'this is value stored by cookie');
$scope.data = $cookies.getObject('cookieData');
});
<!DOCTYPE html>
<html>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-cookies.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{data}}
</div>
</body>
</html>
Inject the service correctly.
Try the below one:-
angular.module('Intake', ['ngCookies']).controller('Intake', ['$cookies', function( $cookies){}])
I have this js code
var app = angular.module('app', []);
app.service('testService', function(){
this.sayHello= function(text){
return "Service says \"Hello " + text + "\"";
};
this.sayGoodbye = function(text){
return "Service says \"Goodbye " + text + "\"";
};
});
app.controller('AboutCtrl', ['testService', function ($scope, $location, $http) {
$scope.fromService = testService.sayHello("World");
$scope.toService = testService.sayGoodbye("World");
}]);
and in my html I have this
....
...
hi {{fromService}}
....
...
There are no errors in console and the page is just blank.
Please take a look at AngularJs Docs "Using Dependency Injection".
The correct way:
app.controller('AboutCtrl', ['$scope', '$location', '$http',
'testService', function ($scope, $location, $http, testService) {
$scope.fromService = testService.sayHello("World");
$scope.toService = testService.sayGoodbye("World");
}]);
You can inject your service to controller by these ways.
Inline Array Annotation
app.controller('MyController', ['$scope', 'testService', function($scope, testService) {
// ...Code here
}]);
$inject Property Annotation
var MyController = function($scope, testService) {
// ...
}
MyController.$inject = ['$scope', 'testService'];
app.controller('MyController', MyController);
Implicit Annotation
app.controller('MyController', function($scope, testService) {
// ...
});
if you want to know which one is preferred then read this Dependency Injection
You're not injecting your service properly.
app.controller('AboutCtrl', ['$scope', '$location', '$http',
'testService', function ($scope, $location, $http, testService) {
$scope.fromService = testService.sayHello("World");
$scope.toService = testService.sayGoodbye("World");
}]);
Also in your HTML you should add ng-app="app" and ng-controller to especify your controller.
<!DOCTYPE html>
<html ng-app="app">
<head></head>
<body ng-controller="AboutCtrl">
<p>Hi {{fromService}}</p>
<!-- Also place here your JS files.-->>
</body>
</html>
Supper easy, Actually you are injecting service wrong place check this:
app.controller('aboutCtrl', function ($scope, $location, $http, testService) {
$scope.fromService = testService.sayHello("World");
$scope.toService = testService.sayGoodbye("World");
});
i am new to AngularJS so please forgive me this dump question.
i have error
Cannot set property 'test' of undefined
angularjs
var App = angular.module('StartModule', []);
App.controller('ModalDemoCtrl', [
function($scope) {
$scope.test = function() {
alert("12312");
}
}
]);
html
<body ng-app="StartModule">
<div ng-controller="ModalDemoCtrl">
<div ng-click="test()">11111</div>
</div>
<body>
You just miss $scope to controller's second argument:
var App = angular.module('StartModule', []);
App.controller('ModalDemoCtrl', [ $scope, function($scope) {
$scope.test = function() {
alert("12312");
}
}]);
You're missing the $scope dependency, you need to inject it in your controller :
App.controller('ModalDemoCtrl', ['$scope'
function($scope) {
That's why the $scope variable is undefined, you're not actually injecting any dependency in it.
This uses the Inline Array Annotation: https://docs.angularjs.org/guide/di
I am getting the error "Unknown Provider".
I have searched throught the forums and implemented all suggestions(marked as answer, as well).
But error isnt resolved. Please guide. Below is the code:
In html, am referring 1. angular.min.js 2.angular-resource.js 3.App.js 4.MyJS in the same order.
In my app.js:
angular.module('myApp', [ 'ngSanitize', 'ngCookies','ngResource' ]);
angular.module('myApp')
.controller('MainCtrl', ['$rootScope','$resource', function($rootScope) {
//my code goes here//
}]);
In another JS file:
angular.module('myApp')
.controller('myController',
['$scope', '$rootScope', '$http', '$window', '$cookies', '$resource', function ($scope, $rootScope, $http, $window, $cookies, $resource)
{ ---- My Code ----- }
I have seen the forums and suggestions and ensured app.js is called first. angular-resource.js is referred after referring angular.min.js.
Please suggest where am going wrong.
Thank You
Should be
['$rootScope','$resource', function($rootScope, $resource) {
instead of
['$rootScope','$resource', function($rootScope) {
Number of controllers function parameters should be same as number of string literals.
This is not a duplicate of This Question
I have included all the required files in view:
<script src="~/Scripts/angular-file-upload-master/examples/console-sham.min.js"></script>
<script src="~/Content/js/angular.js"></script>
<script src="~/Scripts/angular-file-upload-master/angular-file-upload.js"></script>
My module and controller:
var controllers = angular.module('controllers', ['ngGrid', 'ngDialog', 'angularFileUpload']);
controllers.controller('CustomProductsCtrl',
['$scope', '$window', 'ngDialog', 'CommonService',
'CustomProductsServices', '$upload',
function ($scope, $window, ngDialog, CommonService,
CustomProductsServices, $upload){
});
But still I get this error.
Error: [$injector:unpr] Unknown provider: $uploadProvider
Please help me out.
Hit the same issue, turned out that the documentation to inject $upload is out of date, it should be FileUploader:
controllers.controller('CustomProductsCtrl',
[..., '$upload', function (..., 'FileUploader') {
Spent more time than I'd like to admit figuring that out. FYI, I determined that by looking at angular-file-upload.js:
.factory('FileUploader', ['fileUploaderOptions', '$rootScope', '$http', '$window', '$compile',
It appears that you didn't close the controller declaration correctly.
Specifically, you have: }); when you should have }]); instead. Note the missing ].
In context, you should have:
var controllers = angular.module('controllers', ['ngGrid', 'ngDialog', 'angularFileUpload']);
controllers.controller('CustomProductsCtrl',
['$scope', '$window', 'ngDialog', 'CommonService',
'CustomProductsServices', '$upload',
function ($scope, $window, ngDialog, CommonService,
CustomProductsServices, $upload){
}]); // Note: missing ']' added in here
because we need to follow the form of declaring a controller. The controller API is terse, but pretty succint:
$controller(constructor, locals);
Which expanded to your case:
module_name.controller( 'your_Ctrl',
[locals, function(){
}
]
);
I added in extra spacing to call out the missing ] and to show how we're closing off elements within the declaration.
It seems this error can be ng-file-upload version dependent:
https://github.com/danialfarid/ng-file-upload/issues/45
If you try the suggestions on that page and this page and still get the error, the following worked for me:
angular.module('starter.controllers', ['ngFileUpload'])
.controller('HomeCtrl', function($scope, ... Upload) {
...
file.upload = Upload.upload({...}); //Upload instead of $upload
...
})