var myapp = angular.module('myapp', []);
myapp.config(function($interpolateProvider) {
$interpolateProvider
.startSymbol('{[')
.endSymbol(']}');
});
myapp.controller('CanvasControls', function($scope) {
function1($scope);
function2($scope);
});
This code integrate with rails and working in development fine but in production mode it gives below errors.
Failed to instantiate module myapp due to:
Uncaught Error: $injector:modulerr
/$injector/modulerr?p0=myapp
working in development fine but in production mode it gives below
errors
Guess in production you are compressing the code.And I presume you have to add $scope like this
Hope this will help
// Changed here Added String '$scope'
myapp.controller('CanvasControls',['$scope', function($scope) {
function1($scope);
function2($scope);
}]);
EDIT
If you have not modified the .config part please try by making following change.
customInterpolationApp.config(['$interpolateProvider', function($interpolateProvider){
$interpolateProvider.startSymbol('//');
$interpolateProvider.endSymbol('//');
}]);
More about such error
Syntax error added extra ] in controller
myapp.controller('CanvasControls', function($scope) {
function1($scope);
function2($scope);
}]);// remove ']' from here
or use mini-fist way
myapp.controller('CanvasControls', ['$scope',function($scope) {
function1($scope);
function2($scope);
}]);
and you may mismatch module name myapp in controller and in html ng-app="myapp"
Related
I create my application using AngularJS. Lately, I tried to add minified scripts to project. I configured my bundles and add there scripts.
Unfortunately, after getting on my page, I saw error in console:
angularjs?v=DPp8dw32SOYLsCU70JJTuQ_I9tbCvN1g_Jgbcn9Mnx01:1 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=MyApp&p1=Error
... I read about problem with minified scripts from: http://frontendcollisionblog.com
but I did not found it in my project. Have you got any idea what can be wrong with it?
var MyApp = angular.module("MyApp", ["ui.bootstrap", "schemaForm"]);
MyApp.requires.push("ngFileUpload");
MyApp.config([
'$compileProvider', '$sceDelegateProvider', '$httpProvider',
function ($compileProvider, $sceDelegateProvider, $httpProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|sip|chrome-extension):/);
$sceDelegateProvider.resourceUrlWhitelist([
'self',
window.AppData.scriptsCdnEndpoint + '/**'
]);
$httpProvider.defaults.cache = true;
}
]);
`
I have a question about Ionic services. As you know, Ionic framework comes with a built in www directory which contains the js directory, which contains the services.js file. My first service works. I attempted to write another service in the same, services.js file and as it turns out, I got an error: Uncaught "SyntaxError: Unexpected token . http://localhost:8100/js/services.js Line: 57" in addition to "(index):28 Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.services due to:
Error: [$injector:nomod] Module 'starter.services' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument." Anyway, here's my code, take a look and let me know what I can do differently. Also, if you need more snippets, let me know!
//services.js
//the first factory, API works
angular.module('starter.services', [])
.factory('API', function($http) {
var apiFooUrl = 'http://localhost:3000/api/do/thing'
return {
all: function(){
return $http.get(apiFooUrl + 's')
},
show: function(thingID){
console.log("stock service get running", thingID);
return $http.get(apiFooUrl + '/' + thingID)
}
};
});
//this is the one that returns the error
.factory('Users', function($http) {
var apiUrl = 'http://localhost:3000/api/users/'
return {
index: function(){
return $http.get(apiUrl)
}
show: function(id){
return $http.get(apiUrl + id)
}
}
})
Edited for more info:
So in response to David L's comment:
I've injected it into my GlobalCtrl like so:
.controller('GlobalCtrl', function(Users, $rootScope, $state, $window,
Things, $scope){
$scope.newUser = {}
$scope.user = {}
//show all Users
Users.index().success(function(results){
$scope.users = results
})
})
It'll also be injected into a DetailCtrl as well.
In app.js, the services are injected like so:
angular.module('starter', ['ionic', 'starter.controllers',
'starter.services'])
There's a lot more that needs to go on eventually so I want to make sure I have it right, now.
Have I included the starter.controllers properly? Do I have to include more than one if I have multiples?
They are indeed included in the index.html file.
you have added service after closing the module,
removing the semicolon will solve this problem
}) //here reomved the semicolon
//this is the one that returns the error
.factory('Users', function($http) {
Just learning Angular and I'm encountering a few issues with module resolution. In js/directives/directives.js I have the following directive scoped to a directives module:
angular.module("directives").directive("selectList", function() {
return {
restrict: 'E',
link: function() {
// do stuff
}
}
});
On my webpage:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script>
angular.module("editUserApp", ["directives"])
.controller("editUserController", ['$http', '$scope', function($http, $scope) {
// do stuff here
}]
);
</script>
The error I'm getting is as follows:
Error: [$injector:modulerr] Failed to instantiate module editUserApp due to:
[$injector:modulerr] Failed to instantiate module directives due to:
[$injector:nomod] Module 'directives' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Now, obviously, editUserApp cannot know where directives is, all by itself, so how do I tell it to fetch the directives.js file? Do I have to include it in a script tag (which doesn't seem very scalable)?
I need some way to import directives to my angular app. How can I do this?
You need to include your js/directives/directives.js file into your html and remove the directives dependency on your App module.
your code should be :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script>
angular.module("editUserApp", [])
.controller("editUserController", ['$http','directives', '$scope', function($http, $scope,directives) {
// do stuff here
}]
);
</script>
You need
angular.module("directives" ,[])
in your first block
angular.module("directives")
tries to find an existing module called directives
If you are looking for a way to import these files on a as needed basis, you might want to look at http://requirejs.org/ or http://browserify.org/ or similar tools.
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.24/$injector/modulerr?p0=curveApp&p1=Error%…rjs.org%2F1.2.24%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1%3DError%253A...<omitted>...0)
Im getting the above error in my Laravel/Angular application. I went to the URL and I'm still not sure what the error is coming from.
I have a file app.js in project/public/js with this code:
var curveApp = angular.module('curveApp', [
'ngRoute',
'curveControllers'
]);
And then a file config.js in project/public/js with this code:
curveApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/register', {
templateUrl: 'partials/register.html',
controller: 'RegisterCtrl'
});
}
]);
Sorry for the beginner questions -- I'd google to find answers but I'm not quite sure what to be looking for.
I'm trying to create HTML templates in project/public/js/partials and have them switch based on the URI without the page refreshing.
This errors show that, when some of your modules doesn't exist in page and not included, make sure what ngRoute and curveControllers are defined and attached to your DOM.
I have problem with adding Angulartics.
In my app.js I just added that two dependencies (Angulartics and the last one) you can see:
var smsApp = angular.module('smsApp', [
'ngRoute',
'smsControllers',
'smsFilters',
'google-maps',
'pascalprecht.translate',
'angulartics',
'angulartics.google.analytics',
]);
and then in my index.html I added: <script src="./js/angulartics.js">
<script src="./js/angulartics-ga.js"> ---- paths to these files are ok
but when I want to create that module with:
var injector = angular.injector(['smsApp', 'ng']);
I got this error:
Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.2.15/$injector/unpr?p0=%24rootElementProvider%20%3C-%20%24rootElement%20%3C-%20%24location
Without Angulartics it goes well! Please help me :) thanks
I'm following this tutorial.
Assuming you're reading the docs here: https://github.com/angulartics/angulartics
You need to install the angularitics.google.analytics plugin by running 'bower install angulartics-google-analytics --save'
Why are you using injector?
If you're using injector, you're not using the regular AngularJS bootstrapping code, so $rootElement is not defined.
You could mock the object:
<script src="/path/to/angular-mock.js">
...
var injector = angular.injector(['smsApp', 'ngMock', 'ng']);
Or define it in your app explicitely
smsApp.config(['$provide', function($provide) {
// Should match the element that contains your ng-app="smsApp" attribute
$provide.value('$rootElement', angular.element(document.body));
}]);