I'm trying to use cookies ( set and retrieve), I have this code copies from a site and changed it, but I wouldn't work and all my angular parts stop working.
This is a sample of angular website
can you tell me where the problem is?
var app = angular.module('test', ['ui.bootstrap'], ['ngCookies']);
app.controller('ExampleController', ['$cookieStore', function ($scope, $cookieStore) {
// Put cookie
$cookieStore.put('myFavorite', 'oatmeal');
// Get cookie
$scope.itemValue = $cookieStore.get('myFavorite');
// Removing a cookie
//$cookieStore.remove('myFavorite');
}]);
and usage is :
<span ng-controller="ExampleController">{{itemValue}}</span>
it gives me this error
Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-beta.5/$injector/modulerr?......
You're declaring your module wrong, the second parameter should be an array of dependencies, but you're passing each dependency as it's own separate array. It should be:
var app = angular.module('test', ['ui.bootstrap', 'ngCookies']);
You're using a "minification safe" array for your controller, but you're only including $cookieStore, not $scope, it should be:
app.controller('ExampleController', ['$scope', '$cookieStore', function ($scope, $cookieStore) {
...
}]);
Your syntax is incorrect, go through the docs to find the correct syntax for angular.
Related
I'm trying to inject my factory into my controller and I'm getting this error from AngularJS:
Error: $injector:unpr Unknown Provider
I have looked through almost all of the questions on here and still cannot find a solution to my problem. I believe my controller and factory and declared correctly and the injection is correct but it looks like this isn't the case.
My factory code is as follows:
var app = angular.module('test', []);
app.factory('processingFactory', function () {
var factory = {};
factory.newTest = function() {
console.log("TEST");
}
return factory;
});
This is then injected into the controller which looks like this:
angular.module("test", ["angularModalService", "anguFixedHeaderTable",
'angular-loading-bar', "ngResource", "agGrid",
'ui.tree']).controller("dashboardController", [
"$scope",
"$timeout",
"$http",
"$window",
"$interval",
"$resource",
"ModalService",
"$filter",
'$q',
'processingFactory',
function($scope, $timeout, $http, $window, $interval, $resource,
ModalService, $filter, $q, processingFactory) {
//other code removed
$scope.newWorkorder = processingFactory.newWorkorder;
}
]);
This function is called through a button click on the web page. All of the files needed are in script tags on this html page. I am fairly new to angular so this could be a simple error or something I am not aware of.
Calling angular.module with an array as the second argument declares a module, which can only happen for any given module name. You are declaring the module twice (once in your controller code, and again in your factory code).
Try changing the first part of your factory code to:
var app = angular.module('test');
If you are doing the same thing elsewhere in the app you will need to remove the second argument there too, so that there is only one module declaration in the whole app.
if there are any dependencies for your module "test" why do not you have them declared in the first line itself like:
var app = angular.module("test", ["angularModalService", "anguFixedHeaderTable",
'angular-loading-bar', "ngResource", "agGrid",
'ui.tree']);
Then declare your controller like::
app.controler(...)
Things should work fine.
This is a general dependency injection question. Obviously I am doing it wrong.
I am trying to get angular-xeditable working in my app.
https://vitalets.github.io/angular-xeditable/
I've installed it using bower, and added the appropriate script link to my head.
Now I'm trying to inject it.
The docs say
var app = angular.module("app", ["xeditable"]);
so, in my app: I do this:
portalApp.controller('portalController',
['$scope', '$http','$filter', 'xeditable',
function($scope, $http, $filter, xeditable) {
but I get the provide error, meaning it can't find xeditable.
angular.js:13642Error: [$injector:unpr] http://errors.angularjs.org/1.5.6/$injector/unpr?p0=xeditableProvider%20%3C-%20xeditable%20%3C-%20portalController
What am I doing wrong?
OK, duh. It should be
var portalApp = angular.module("portalApp", ['xeditable']);
portalApp.controller('portalController', ['$scope', '$http','$filter', function($scope, $http, $filter) {
I'm still getting lots of errors, but at least not that one.
I don't know why I am getting this error.
The error I am getting is Error: [ng:areq] Argument 'PreviewController' is not a function, got undefined.
Can someone help me out with this?
Also is there any other way to inject services in a controller?
My code is as follows:
(function() {
'use strict';
angular
.module('MyModule')
.controller('PreviewController' ['$scope','Service1','Service2',
function($scope, $http) {
$http.get("https://api.myjson.com/bins/30e2a")
.success(function(response) {
//Dummy data taken from JSON file
$scope.firstName = response.firstName;
$scope.lastName = response.lastName;
$scope.dateAdded = response.dateAdded;
});
//Functions have been defined. Functionality to be added.
$scope.cancelAndBack = function() {
window.history.back();
};
}]);
}());
You are defining you module incorrectly.
`angular.module('MyModule')`
Is looking for an already initialised module called 'MyModule'.
If you are creating a module from scratch you need to empty array. This would be more module dependencies.
`angular.module('MyModule', [])`
This is how angular knows the difference between, 'create an app' and 'get me an app'.
Finally services. Your using angulars array notation. That is so you can minify your javascript.
angularjs injection system works by name, that's how it can find the dependencies your require, that's also why you can list them in any order you like. However minifying your code changes your variable names and so breaks angular's injection.
The solution is to provide an array of strings telling angular the services you wish to inject and the order they are injected in.
So your array values and properties passed into your controller function must match.
Correct:
.controller('test', ["$scope", "$http", "myService", function( $scope, $http, myService){}]);
Incorrect: (myService won't be defined as its missing from the array)
.controller('test', ["$scope", "$http", function( $scope, $http, myService){}]);
I am trying to include ngCookies in a project. The angular cookies library is included in my index.html after the ionic.bundle.
I can see on the network tab of the developer tools that it is actually loading. Angular doesn't show any error when loading the page, as it usually does when a module is missing. The problem is that, when in my code I try to access the functions of the $cookies service, the $cookies variable is actually pointing to an empty object.
Here are some relevant code snippets:
On the definition of my app.js
angular.module('myApp', [
'ionic',
'ngCookies',
'ngMessages',
'rt.eventemitter',
'myApp.views']);
On my factory:
angular.module('myApp.views')
.factory('UserStore', ['$rootScope', '$q', '$cookies', '$timeout',
function($rootScope, $q, $cookies, $timeout){
var user = {};
function setSessionId(sessionId){
console.log(">> setting sessionId to:",sessionId);
user.sessionId = sessionId;
$cookies.put('sessionId', user.sessionId);
}
return{ setSessionId:setSessionId}
}
]);
In this case, when I try to call the setSessionId method I get an error that $cookies.put is not a function since, as I mentioned above, $cookies is just an empty object.
Any Ideas?
it depends on which angular version you use!
they changed a lot in angular 1.4.. in angular 1.3 when you set a cookie you can just assign it:
$cookies.sessionId = user.sessionId;
I'm having an issue with angular minification when I release. I've redone my controller to have annotations as recommended, but still get the same error:
Error: Unknown provider: nProvider <- n
Here's my first few lines of code for the controller:
var app = angular.module('myApp', ['ngGrid', 'ui.bootstrap.dialog']);
app.controller('MyCtrl', ['$scope', '$dialog', '$http', function ($scope, $dialog, $http){
UPDATE: sorry, I found that there was another function I was using which was taking in $scope as parameter. That was causing the issue. I basically did the same thing to annotate its parameters, and now it works.