I am getting Uncaught Error: [$injector:modulerr]
getting this as error reference
while I run the 'SearchCountroller' controller function in angular js.
angular js version v1.5.8
app.js
var myApp = angular.module('myApp', [
'ngRoute',
'myCountrollers'
]);
myApp.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'js/portal/search.html',
controller:'SearchCountroller'
});
}]);
controller.js
var myCountrollers = angular.module(myCountrollers, []);
myCountrollers.controller('SearchCountroller', function MyController($scope,$http) {
$http.get('js/data.json').then(function(response) {
$scope.artists = response.data;
$scope.myartistOrder = 'name';
});
});
index.html
<!-- script -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<body class="bg-secondary" ng-app="myApp" ng-controller="myCountrollers">
<div ng-view></div>
</body>
angular.module gets name parameter as string:
var myCountrollers = angular.module('myCountrollers', []);
Moreover, you need to use controller's name in your template (instead of module name):
<body class="bg-secondary" ng-app="myApp" ng-controller="SearchCountroller">
Related
This is my Html. I have given paths like this
<html>
<head>
<script src="../../Content/Scripts/Script/angular.min.js"></script>
<script src="../../Content/Scripts/Script/Chart.js"></script>
<script src="../../Content/Scripts/Script/angular-charts.min.js"></script>
<script src="../../Content/Scripts/Script/ui-bootstrap-tpls.js"> </script>
<script src="../../Content/Scripts/Controllers/graphController.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="financeAnalyticsController" class="support-section">
{{a}}
</div>
</body>
</html>
In my script I wrote
var app = angular.module("app", [ "chart.js","ui.bootstrap", "ui.bootstrap.typeahead",]);
app.controller('financeAnalyticsController', function ($scope, $http, $filter) {
$scope.a="testing";
});
When I am using in my application it is giving error
Uncaught Error: [$injector:modulerr]
How to solve this error?
I guess you are using a different version of angular-chart.js. Try using angularCharts instead of chart.js as the dependency module name, like so ...
var app = angular.module("app", ["angularCharts", "ui.bootstrap", "ui.bootstrap.typeahead"]);
app.controller('financeAnalyticsController', function($scope, $http, $filter) {
$scope.a="testing";
});
or, use this version of angular-chart.js
see a working example
I'm trying to learn AngularJS and am creating my first page. I am encountering the error:
Error: $injector:nomod Module Unavailable (here)
I have three files:
/index.html
/js/app.js
/js/controllers/MainController.js
And they are as follows:
/index.html
<!doctype html>
<html>
<head>
<tilte>AngularJS Controllers</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<h1>Controllers</h1>
<div ng-controller="MainController">
<p>{{ message }}</p>
<form ng-submit="updateMessage(newMessage)">
<input type="text" ng-model="newMessage">
<button type="submit">Update Message</button>
</form>
</div>
</div>
<!-- Modules -->
<script type="text/javascript" scr="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/MainController.js"></script>
</body>
</html>
/js/app.js
var app = angular.module("myApp", []);
/js/controllers/MainController.js
app.controller('MainController', ['$scope', function($scope){
$scope.message = 'hello';
$scope.updateMessage = function(message){
$scope.message = message;
};
}]);
Where am I going wrong?
Avoid creating global variables like app for assigning the angular module. Instead angular provides a better syntax to set and get modules across multiple files.
App.js
(function() {
// IIFE (Immediately invoked Function Express) to wrap variables inside the function. it prevents polluting global namespace.
angular.module("myApp", []);
})();
MainController
(function() {
angular.module("myApp") // note [] is missing, it means we're getting a module
.controller('MainController', ['$scope', function($scope){
$scope.message = 'hello';
$scope.updateMessage = function(message){
$scope.message = message;
};
}]);
})();
It is a typo.
When you pull your app.js inside the html, you wrote scr instead of src.
See:
<!-- Modules -->
<script type="text/javascript" scr="js/app.js"></script>
I have the following view rendered from my express server index.html
<section ng-view></section>
<!-- Load local libraries -->
<script type="text/javascript" src="/lib/angular/angular.js"></script>
<script type="text/javascript" src="/lib/angular-route/angular-route.js"></script>
<script type="text/javascript" src="/lib/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="/dummy/dummy.client.module"></script>
<script type="text/javascript" src="/dummy/dummy.client.controller"></script>
<script type="text/javascript" src="/dummy/dummy.client.route"></script>
<!-- Bootstrap AngularJS application -->
<script type="text/javascript" src="/application.js"></script>
I manually bootstrap it with application.js file:
var mainApplicationModule = angular.module('app', ['ngResource', 'ngRoute', 'dummy'])
mainApplicationModule.config(['$locationProvider',
function($locationProvider) {
$locationProvider.hashPrefix('!');
}
]);
if (window.location.hash === '#_=_') window.location.hash = '#!';
// Manually bootstrap the AngularJS application
angular.element(document).ready(function() {
angular.bootstrap(document, ['app']);
});
Then in dummy.client.module.js:
angular.module('dummy', [])
in dummy.client.controller.js:
angular.module('dummy').controller('DummyController', ['$scope', function($scope) {
$scope.text = 'hi what '
}])
dummy.client.route.js:
angular.module('dummy').config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'dummy/dummy.client.view.html'
})
}])
dummy.client.view.html:
<section ng-controller="DummyController">
<textarea ng-bind="text"></textarea>
</section>
I get an empty page. the controller is not invoked (i use alert('hi') to test)
If i don't use ngRoute, i.e. append all the js files in the index.html page, it's working instead of using ngRoute and ng-view, it works
error message:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module dummy due to:
Error: [$injector:nomod] Module 'dummy' 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.
http://errors.angularjs.org/1.3.0-build.3042+sha.76e57a7/$injector/nomod?p0=dummy
at chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:120:12
at chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:215:17
at ensure (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:139:38)
at module (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:213:14)
at angular.module (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:686:31)
at angular.module (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1019:38)
at http://localhost:3000/lib/angular/angular.js:3877:22
at forEach (http://localhost:3000/lib/angular/angular.js:325:18)
at loadModules (http://localhost:3000/lib/angular/angular.js:3871:5)
at http://localhost:3000/lib/angular/angular.js:3878:40
http://errors.angularjs.org/1.2.28/$injector/modulerr?p0=dummy&p1=Error%3A%…t%20http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular%2Fangular.js%3A3878%3A40
at http://localhost:3000/lib/angular/angular.js:78:12
at http://localhost:3000/lib/angular/angular.js:3905:15
at forEach (http://localhost:3000/lib/angular/angular.js:325:18)
at loadModules (http://localhost:3000/lib/angular/angular.js:3871:5)
at http://localhost:3000/lib/angular/angular.js:3878:40
at forEach (http://localhost:3000/lib/angular/angular.js:325:18)
at loadModules (http://localhost:3000/lib/angular/angular.js:3871:5)
at createInjector (http://localhost:3000/lib/angular/angular.js:3811:11)
at doBootstrap (http://localhost:3000/lib/angular/angular.js:1444:20)
at Object.angular.resumeBootstrap (http://localhost:3000/lib/angular/angular.js:1467:5)
http://errors.angularjs.org/1.2.28/$injector/modulerr?p0=app&p1=Error%3A%20…p%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular%2Fangular.js%3A1467%3A5)angular.js:78 (anonymous function)angular.js:3905 (anonymous function)angular.js:325 forEachangular.js:3871 loadModulesangular.js:3811 createInjectorangular.js:1444 doBootstrapangular.js:1467 angular.resumeBootstraphint.js:535 maybeBootstrap
[Edit]:
I have tried another module and still not working:
article.client.module.js:
angular.module('article', [])
article.client.route.js:
angular.module('article').config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {templateUrl:'article/list-article.client.view.html'})
}
]);
article.client.controller:
angular.module('article').controller('ArticleController', ['$scope', function($scope) {
$scope.text = 'hi'
}
])
list-article.client.view.html:
<section ng-controller="ArticleController">
<textarea ng-bind="text"></textarea>
</section>
application.js:
//var mainApplicationModule = angular.module('app', ['ngResource', 'ngRoute', 'dummy']);
var mainApplicationModule = angular.module('app', ['ngResource', 'ngRoute', 'article']);
//var mainApplicationModule = angular.module('app', ['ngResource', 'ngRoute', 'article', 'user', 'index']);
mainApplicationModule.config(['$locationProvider',
function($locationProvider) {
$locationProvider.hashPrefix('!');
}
]);
if (window.location.hash === '#_=_') window.location.hash = '#!';
// Manually bootstrap the AngularJS application
angular.element(document).ready(function() {
angular.bootstrap(document, ['app']);
});
<section ng-view></section>
<!-- Load local libraries -->
<script type="text/javascript" src="/lib/angular/angular.js"></script>
<script type="text/javascript" src="/lib/angular-route/angular-route.js"></script>
<script type="text/javascript" src="/lib/angular-resource/angular-resource.js"></script>
<!--<script type="text/javascript" src="/dummy/dummy.client.module.js"></script>-->
<!--<script type="text/javascript" src="/dummy/dummy.client.controller.js"></script>-->
<!--<script type="text/javascript" src="/dummy/dummy.client.route.js"></script>-->
<!-- Load the articles module -->
<script type="text/javascript" src="/article/article.client.module.js"></script>
<script type="text/javascript" src="/article/article.client.controller.js"></script>
<script type="text/javascript" src="/article/article.client.route.js"></script>
<!--<script type="text/javascript" src="/article/article.client.resource.js"></script>-->
<!-- Bootstrap AngularJS application -->
<script type="text/javascript" src="/application.js"></script>
I commented out the dummy module. same error as before
[Edit 2]:
if i change the folder name to article2 or anything other than 'article', then it works.
I think you are missing .js in the script include. Because of which dummy module is failed to initialize and consequently you get the mentioned error.
<script type="text/javascript" src="/dummy/dummy.client.module.js"></script>
<script type="text/javascript" src="/dummy/dummy.client.controller.js"></script>
<script type="text/javascript" src="/dummy/dummy.client.route.js"></script>
extended answer to extended question...
Now, there are two more problems here
article module is getting initialized as you are using ngRouteProvider in article module without adding ngRoute dependency.
//You need to add ngRoute dependency in order to use $ngRouteProvider
angular.module('article', ['ngRoute']);
for this you also need to include angular-route.js
refer : https://docs.angularjs.org/api/ngRoute
You are using ngResource in application.js but I do not see you are including angular-resource.js
refer: https://docs.angularjs.org/api/ngResource
Apologies for this newbie question and possibly obvious answer. I have tried to break up my app into smaller files and include them at runtime using angular's module loading syntax. Thank you for your help and again apologies if this question isn't up to snuff.
The error I am getting is:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module eventBus due to:
Error: [$injector:nomod] Module 'eventBus' is not available! You either misspelled the modu...<omitted>...1)
Here is my web page:
<html>
<head>
...
</head>
<body ng-app="myApp">
<!-- Add your site or application content here -->
<div id="m" class="section app-viewport" bn-document-click="handleClick( $event )" ng-view="" ng-controller="MainController" ng-keydown="keyPress($event);"></div>
</script>
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/matchmedia/matchMedia.js"></script>
<script src="bower_components/matchmedia-ng/matchmedia-ng.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/services/eventBus.js"></script>
<script src="scripts/services/gameState.js"></script>
<script src="scripts/controllers/mainController.js"></script>
<script src="scripts/controllers/challengeControllers.js"></script>
<script src="scripts/controllers/optionControllers.js"></script>
<script src="scripts/controllers/rescueControllers.js"></script>
<script src="scripts/controllers/dayListControllers.js"></script>
<script src="scripts/controllers/bankBalanceControllers.js"></script>
<script src="scripts/controllers/canvasControllers.js"></script>
<script src="scripts/controllers/playerControllers.js"></script>
<script src="scripts/directives/layoutManagerDirectives.js"></script>
<!-- endbuild -->
</body>
</html>
And app.js:
'use strict';
var myApp = angular.module('myApp', [
'matchmedia-ng',
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'eventBus',
'gameState',
// controllers
'mainController',
'challengeControllers',
'optionControllers',
'rescueControllers',
'bankBalanceControllers',
'canvasControllers',
'dayListControllers',
'playerControllers',
// directives
'layoutManagerDirectives'
// services
]);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainController'
})
.otherwise({
redirectTo: '/'
});
});
and eventBus.js:
var myApp = angular.module('myApp');
myApp.factory("eventBus", function ($rootScope) {
var eventBus = {};
eventBus.message = '';
eventBus.prepForBroadcast = function(msg) {
this.message = msg;
this.broadcastItem(msg);
};
eventBus.broadcastItem = function(msg) {
console.log('eventBus message: ' + eventBus.message);
$rootScope.$broadcast('handleBroadcast', msg );
};
return eventBus;
});
Your app is declaring a dependency on the module named eventBus, but you're defining eventBus as a service via factory. Modules only take dependencies on other modules. If you want to require your eventBus as a module dependency this way, you'll need to change your eventBus script to look like this:
var myEventBusModule = angular.module('eventBus', []);
myEventBusModule.factory("eventBusService", function ($rootScope) {
var eventBus = {};
eventBus.message = '';
eventBus.prepForBroadcast = function(msg) {
this.message = msg;
this.broadcastItem(msg);
};
eventBus.broadcastItem = function(msg) {
console.log('eventBus message: ' + eventBus.message);
$rootScope.$broadcast('handleBroadcast', msg );
};
return eventBus;
});
Your "eventBus" is only a Factory of your "myApp". Not an independent module.
Try this:
eventBus.js
var module = angular.module('eventBus', []);
module.factory('eventBus', ["$rootScope", function($rootScope){
// Content of your factory...
}]);
Or simply remove the 'eventBus' from the dependencies of your app-module.
I've the same issues as in how-to-create-separate-angularjs-controller-files, but it seems to be a little bit more complicated: I want to separate my module declaration and the "MAIN-Controller" into separate files, say app.js and appCtrl.js.
app.js contains:
angular.module('app', []);
appCtrl.js contains:
angular.module('app').controller('appCtrl', function($scope){
$scope.model = { MyValue : "coucou" };
}]);
Following code is ok:
<html>
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="scripts/app.js"/>
<script src="scripts/ctrl/appCtrl.js"/>
</head>
<body ng-app="app" ng-controller="appCtrl">
My value = {{model.MyValue}}
</body>
</html>
but following code is NOT OK:
<html>
<head>
</head>
<body ng-app="app" ng-controller="appCtrl">
My value = {{model.MyValue}}
<script src="bower_components/angular/angular.js"></script>
<script src="scripts/app.js"/>
<script src="scripts/ctrl/appCtrl.js"/>
</body>
</html>
Angular throws the Error: "[ng:areq] Argument 'appCtrl' is not a function, got undefined" Unfortunately, the latter is the recommanded way to include angular and the modules...
Is there a solution to this issue? Thank you in advance!
Try this:
app.js
var app = angular.module('app', []);
appCtrl.js:
app.controller('appCtrl', function($scope){
$scope.model = { MyValue : "coucou" };
}]);
I would use angular modules/injection functionalities :
app.js contains:
angular.module('app', ['app.controllers']);
appCtrl.js contains :
angular.module('app.controllers', [])
.controller('appCtrl', function($scope){
$scope.model = { MyValue : "coucou" };
}]);