I am trying to separate my angular app out into its own file but now getting dependency injection error and not sure why. Simplified angular-app.js and error below:
var app = angular.module('angularApp', ['ui.router']);
app.config(['$urlRouterProvider', '$stateProvider'], function($urlRouterProvider, $stateProvider){
$urlRouterProvider.otherwise('/browse/overview.html');
})
and error:
Failed to instantiate module angularApp due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.3.4/$injector/modulerr?p0=u...)
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:6:416
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:35:350
at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:7:302)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:34:428)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:35:93
at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:7:302)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:34:428)
at Lb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:38:146)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:17:339
Your error is on this line:
app.config(['$urlRouterProvider', '$stateProvider'], function($urlRouterProvider, $stateProvider){
You need to close the bracket after the function declaration, like this:
app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
$urlRouterProvider.otherwise('/browse/overview.html');
}])
Related
I am trying to add validation to ui.grid.
I injected 'ui.grid.edit', 'ui.grid.validate' to my module. still it's throwing the error.
Error: [$injector:modulerr] Failed to instantiate module ui.grid.validate due to:
ReferenceError: isUndefined is not defined
Below is my code:
var milesApp = angular.module("milesApp", [ "ui.grid", 'ui.grid.edit', 'ui.gird.validate', 'ngStorage', 'ui.grid.resizeColumns', 'ui.grid.moveColumns', 'ui.grid.selection', 'ui.grid.pinning', 'ngJsonExportExcel', "ngProgress", '720kb.datepicker', 'ngDialog']);
You have made a misprint in a dependency name. It should be ui.grid.validate.
var milesApp = angular.module("milesApp", [ "ui.grid", 'ui.grid.edit', 'ui.gird.validate', 'ngStorage', 'ui.grid.resizeColumns', 'ui.grid.moveColumns', 'ui.grid.selection', 'ui.grid.pinning', 'ngJsonExportExcel', "ngProgress", '720kb.datepicker', 'ngDialog']);
I have some code and at this point, I'm just trying to follow the 'Getting started' section of the UI Router page to get something going on my current application.
(function () {
var app = angular.module('configurator.boot', ['configurator.errorhandler', 'configurator.routes', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
console.log($stateProvider);
});
app.run(function () { });
})();
I get this error when loading my page:
Failed to instantiate module configurator.boot due to:
Error: [$injector:unpr] http://errors.angularjs.org/1.2.28/$injector/unpr?p0=a
at Error (native)
at http://wkslt-139998:96/configurator/scripts/lib/angular.min.js:6:450
at http://wkslt-139998:96/configurator/scripts/lib/angular.min.js:36:202
at c (http://wkslt-139998:96/configurator/scripts/lib/angular.min.js:34:305)
at Object.d [as invoke] (http://wkslt-139998:96/configurator/scripts/lib/angular.min.js:35:6)
at http://wkslt-139998:96/configurator/scripts/lib/angular.min.js:33:394
at r (http://wkslt-139998:96/configurator/scripts/lib/angular.min.js:7:290)
at e (http://wkslt-139998:96/configurator/scripts/lib/angular.min.js:33:207)
at ec (http://wkslt-139998:96/configurator/scripts/lib/angular.min.js:36:309)
at c (http://wkslt-139998:96/configurator/scripts/lib/angular.min.js:18:170
If I just log 'hello', that works, so that leads me to think that I need to add some other dependency to the module function, but I don't know what.
Thank you for any help you can give me, I've been grinding my wheels for a day with just getting started.
It was the minification process. Changing it to:
(function () {
var app = angular.module('configurator.boot', ['configurator.errorhandler', 'configurator.routes', 'ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
console.log($stateProvider);
}]);
app.run(function () { });
})();
fixed it up.
in my ionic app I want to use cordova-plugin-video-editor plugin but I don't know how to inject it on my controller.
I added the plugin on the terminal like this:
ionic plugin add https://github.com/jbavari/cordova-plugin-video-editor.git
And it is injected with the controller like this (last one):
.controller('VideoCtrl', ['$scope', '$ionicPlatform', '$ionicModal', '$cordovaDialogs', '$cordovaCapture', '$cordovaFileTransfer', '$sce', 'VideoService', '$q', '$http', '$ionicScrollDelegate', '$timeout', '$location', 'VideoEditor', function ($scope, $ionicPlatform, $ionicModal, $cordovaDialogs, $cordovaCapture, $cordovaFileTransfer, $sce, VideoService, $q, $http, $ionicScrollDelegate, $timeout, $location, VideoEditor) {
I get this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to:
Error: [$injector:modulerr] Failed to instantiate module VideoEditor due to:
Error: [$injector:nomod] Module 'VideoEditor' 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.
I am confused, I am using more plugins but all are official and I didn't have problems as I only had to do:
angular.module('starter.controllers', ['ngCordova'])
And in the html
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
Inside plugin folder there is a js file that has:
var exec = require('cordova/exec'),
pluginName = 'VideoEditor';
function VideoEditor() {
}
VideoEditor.prototype.transcodeVideo = function(success, error, options) {
exec(success, error, pluginName, 'transcodeVideo', [options]);
};
VideoEditor.prototype.createThumbnail = function(success, error, options) {
exec(success, error, pluginName, 'createThumbnail', [options]);
};
module.exports = new VideoEditor();
When I install the plugin should not this js content had gone somewhere in my www folder so then I can imported from html?
Remove the VideoEditor module in your controller configuration. because this VideoEditor have not any relation with angular.
Also you need refer the github document. They use it just like a jquery plugins. not a angular plugins. Does make sense? let me know, if not.
How do I implement it in Angular controller?
You can use it just like a javascript library.
I am new to angular and bootstrap, I have my login.html with LoginController.
I try to create a modal popup window, So in order to do it i need to add $modal to the controller, the current controller looks like:
angular.module('loginController', ['loginService'])
.controller('LoginCtrl', ['$scope', 'LoginService', function($scope, LoginService) {
But when i do:
angular.module('loginController', ['loginService','ui.bootstrap'])
.controller('LoginCtrl', ['$scope', '$modal','LoginService', function($scope, $modal,LoginService) {
I Received an error, and i am getting the following error:
Error: [$injector:modulerr] Failed to instantiate module loginController due to:
Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap due to:
Error: [$injector:nomod] Module 'ui.bootstrap' 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.
I guess i need to add bootstrap-ui somewhere, maybe to:
angular.module('myApp', [
'ngRoute',
'bootstrap-ui', -> **when i add it, i still get the exception**.
What am i doing wrong ?
You need to reference one of ui-bootstrap-*.js files in your html.
I created the modules and booted the app the document, I got the below errors. I can't figure out what is the problem with my module. Maybe I use the wrong way for module creation in angular.
Output
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.directives due to:
Error: [$injector:modulerr] Failed to instantiate module app.factories due to:
Error: [$in...<omitted>...1)
Modules
var app = angular.module('app', [
'app.templates',
'app.directives',
'app.services',
'app.factories',
]);
angular.module('app.templates', []);
angular.module('app.services', []);
angular.module('app.directives', [
'app.templates',
'app.factories'
]);
angular.module('app.factories', [
'toaster',
'ngStorage',
'app.services'
]);
angular.module('app.factories')
.factory('NotificationSvc',function($rootScope, AUTH_EVENTS, toaster){
...
});
$(function () {
angular.bootstrap(document ,['app']);
});