AngularJS injector:modulerr - angularjs

when I have an module error injection, the message is not readable, is probably double escaped like in picture:
What I need to solve, is not injection problem (which is solved), but unreadable message, with double escaping.
module.config code:
angular.module("App").config(["$compileProvider", "$locationProvider",
"$injector", function ($compileProvider, $locationProvider, $injector) {
$compileProvider.debugInfoEnabled(true);
$locationProvider.html5Mode(false).hashPrefix('!');
//compatibility with angular 1.6;
if ($compileProvider.preAssignBindingsEnabled) compileProvider.preAssignBindingsEnabled(true);
}

Can you please add snip of code here.
May be problem is with ngStorage service you are trying to add here.
use ngstorage as below
var myApp = angular.module('app', ['ngStorage']);
myApp.controller('Ctrl1', function($scope, $localStorage){
})

As i see your module should have empty dependencies injected as follows,
angular.module("App",[])

Related

angular multiple dependency injection

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.

How to use custom module AngularJs

how can I start to use this module: http://gregpike.net/demos/angular-local-storage/demo/demo.html
I have a controller:
app.controller('FormController', function ($scope, localStorageService) {
});
And I injected
localStorageService
as shown in example, but naturally nothing work. How can I fix it? Thanks.
First, you link the script from your page:
<script src=".../angular-local-storage.min.js"></script>
Second, you add the module to the module dependencies array (I guess that's what you missed):
angular.module('myApp', [..., 'LocalStorageModule', ...])
Then you can inject and use localStorageService in your components, as you did.
That said, I would add a step 0 : Read this Readme :)
i recommend you this one https://github.com/gsklee/ngStorage also use this syntax for not breaking whe you minify
app.controller('FormController', ["$scope", "otherProvider",function ($scope, otherProvider) {
//in this way angular know what to inject
}]);

Conditionally inject angular module dependency

I'm new to angular and have the following code.
angular.module('MyApp')
.controller('loginController', ['$scope', '$http', 'conditionalDependency',
function ($scope, $http, conditionalDependency{
}
I would like to have conditionalDependency loaded conditionally. Something like this
if(true)
{
//add conditionalDependency
}
How can this be done. I've seen this post . However, my requirement is that I have the dependency specified in function
Thanks in advance.
Not quite clear as to why you would have to have it in a named function like in your example but...
If you need conditional dependencies, I would suggest taking a look at the following:
Conditional injection of a service in AngularJS
I've used this method in a couple niche scenarios and it works quite well.
EXAMPLE:
angular.module('myApp').controller('loginController',
['$injector', '$scope', '$http',
function($injector, $scope, $http) {
var service;
if (something) {
service = $injector.get('myService');
}
});
You can use it even without injecting injector in your controller
if(something){
var injector = angular.element(document).injector();
var myService = injector.get('myService')
}
Use:
angular.injector().get('conditionalDep');
You can inject $injector once to your file and call $injector.get('dep');

Issue in using cookie in angular js

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.

Proper way to include a module in AngularJS

I'm learning Angular and I'm trying to include Restangular this way:
var app = angular.module('myapp',['restangular']);
app.controller('UsersController', ['$scope', function ($scope, Restangular) {
...
Then I'm using Restangular like this:
var data = Restangular.all('someurl');
Here I get an error: Restangular is undefined. According to the documentation, this should have been simple:
// Add Restangular as a dependency to your app
angular.module('your-app', ['restangular']);
// Inject Restangular into your controller
angular.module('your-app').controller('MainCtrl', function($scope, Restangular) {
// ...
});
However I am unable to get it to work. What gives?
You're using the bracket notation for your controller, but you forgot to add Restangular to the list of dependencies:
['$scope', 'Restangular', function ($scope, Restangular) {...}]
This article has more information on Angular and minification. Search for "A note on minification”.
That looks correct, just make sure you've added the import of Restangular to your html file
<script type="text/javascript" src="http://cdn.jsdelivr.net/restangular/1.1.3/restangular.js"></script>
They also mention it requires lodash or underscore.js so maybe make sure you're loading those as well

Resources