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){}])
Related
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 have a problem with upload module in Angular. I install module from https://github.com/nervgh/angular-file-upload
I use Angular 1.5.0
In index.html i have:
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-file-upload/dist/angular-file-upload.js"></script>
<script src="scripts/app.js"></script>
My app.js
var app = angular
.module('MyApp', [
'ngAnimate',
'ngCookies',
'datatables',
'ngResource',
'ngRoute',
'angularFileUpload',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider...
This is my main.js
angular.module('MyApp')
.controller('MainCtrl', ['$rootScope', '$scope','$upload','$location', 'myService', function ($rootScope, $scope,$upload,$location, myService) {
}]);
In console : Error: [$injector:unpr] Unknown provider: $uploadProvider <- $upload <- MainCtrl
$upload variable is undefined
Please help me.
Just replace $uploader to FileUploader. there is some problem with fileuploader module, and updated FileUploader module using FileUploader service.
angular.module('MyApp')
.controller('MainCtrl', ['$rootScope', '$scope','FileUploader','$location', 'myService', function ($rootScope, $scope,FileUploader,$location, myService) {
var uploader = $scope.uploader = new FileUploader({
url: 'upload.php'
});
//Any other code or processing
}]);
Wrong injector used please check above
I have a controller called UserCtrl and it depends on a service called UserService. When the view that uses the controller UserCtrl loads I get an error:
Unknown provider: UserServiceProvider
Here is my service code:
angular.module('UserService', []).service('UserService', ['$rootScope', '$route', '$http', '$filter', function ($rootScope, $route, $http, $filter) {
function loadType() {
var deferred = $q.defer();
$http.get('json/type.json').success(function (response) {
var typeoflaw = response;
}).error(function (status, data) {
console.log("error trapped");
});
deferred.resolve(typeoflaw);
return deferred.promise;
};
}]);
Here is my controller code:
JBenchApp.controller('UserCtrl', ['$scope', '$routeParams', '$http', '$filter', 'UserService',
function ($scope, $routeParams, $http, $filter, UserService) {
// Get the preferences information
UserService.loadType()
.then(function (lawtypes) {
$scope.typeoflaw = lawtypes;
});
$scope.SavePreferences = function () {
};
}]);
What did I do wrong?
EDITED TO SHOW JBenchApp code:
var JBenchApp = angular.module('JBenchApp', [
'ngRoute',
'UserService'
]);
This brings to mind a question that has bugged me. What order do you declare your JS files for angular in the index.html page? Mine are currently:
<script src="../js/angular.min.js"></script>
<script src="../js/angular-route.min.js"></script>
<script src="../js/app.js"></script>
<script src="../js/services.js"></script>
<script src="../js/controllers.js"></script>
<script src="../js/directives.js"></script>
May be try this
angular.module('UserService').controller('UserCtrl', ['$scope', '$routeParams', '$http', '$filter', 'UserService',
function ($scope, $routeParams, $http, $filter, UserService) {
//controller code here
}]);
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">[...]
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
...
})