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.
Related
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">
index.html
<!DOCTYPE html>
<html ng-app="intervieweeApp">
<head>
<meta charset="utf-8" />
<title>Interviewee Evaluation</title>
<script src="Scripts/jquery-3.3.1.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/angular-messages.js"></script>
<script src="app.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="home-view/home-view.component.js"></script>
<script src="home-view/home-view.module.js"></script>
</head>
<body>
<p>does it work?</p>
go to home!
</body>
</html>
app.js
var intervieweeApp = angular.module('intervieweeApp', []);
app.module.js
var intervieweeApp = angular.module('intervieweeApp', [
'ngRoute',
'ngMessages',
'homeView'
]);
app.config.js
angular.
module('intervieweeApp').
config(['$routeProvider',
function config($routeProvider) {
$routeProvider.
when('/home', {
template: '<home-view></home-view>'
}).
otherwise('/home');
}
]);
home-view/home-view.module.js
angular.module('homeView', []);
home-view/home-view.component.js
angular.
module('homeView').
component('homeView', {
templateUrl: 'home-view/home-view.template.html',
controller: ['$http',
function PhoneListController($http) {
console.log(15);
}
]
});
home-view/home-view.template.html
<p> at home </p>
error
Module 'homeView' 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.
https://errors.angularjs.org/1.7.5/$injector/nomod?p0=homeView
When I load index.html, I get this error. What am I doing wrong? Thanks
Take a look at the working DEMO
You had issues because of sequence of js file import with script tag
The best practice when creating a module is to use IIFE. This helps you not to think about the sequence in which you are importing js files in index.html
app.module.ts
(function(){
angular.module('intervieweeApp', [
'ngRoute',
'homeView'
]);
})()
home-view.module.ts
(function(){
angular.module('homeView', []);
})()
The same IIFE concept is used in most of the open-source js plugins, so its a standard practice
I was just trying to make the angular bootstrapping work where I want to get my app loaded only after retrieving some data from the server using the service call. However I am not able to make this work with the $routeprovider. My routes doesn't work after this bootstrapping. can anyone know what is wrong I am doing here???
var myApp = angular.module('myApp', [ 'ngRoute', 'ui.bootstrap',
'dataHandler', 'underscore','ngAnimate', 'angular-loading-bar' ]);
fetchData();
function fetchData() {
var initInjector = angular.injector(["ng"]);
var $http = initInjector.get("$http");
return $http.get("/path/to/data.json").then(function(response) {
bootstrapApplication();
}, function(errorResponse) {
// Handle error case
bootstrapApplication();
});
}
function bootstrapApplication() {
angular.element(document).ready(function() {
myApp.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
redirectTo : '/dashboard'
}).when('/dashboard', {
menuItem: 'DASHBOARD',
templateUrl : '../views/customer/dashboard/customerDashboard.html',
controller : 'CustomerDashboardControllerPT',
controllerAs : 'custdashboard'
}).otherwise({
redirectTo : '/'
});
//$locationProvider.html5Mode(true);
}]);
angular.bootstrap(document, ["myApp"]);
});
}
It seems it doesn't recognize my MainController also. In my html file I have code like:
<div class="container" ng-controller="MainController as main">
<div class="row">
<div class="col-sm-12"></div>
</div>
</div>
<script type="text/javascript"
src="../frameworks/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript"
src="../frameworks/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="../frameworks/angular/angular.min.js"></script>
<script type="text/javascript"
src="../frameworks/angular/angular-route.js"></script>
<script type="text/javascript" src="../frameworks/angular/angular-animate.js"></script>
<script type="text/javascript" src="../frameworks/angular/ui-bootstrap.js"></script>
<script type="text/javascript" src="../frameworks/underscore/underscore.js"></script>
<script type="text/javascript" src="../frameworks/moment/moment.min.js"></script>
<script type="text/javascript" src="../frameworks/angular/loading-bar.js"></script>
<script type="text/javascript" src="../js/controllers/MainController.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
I built a to do list you can see here: https://github.com/EdmundMai/angular_todolist
In my controller, I can access the toDoListApp globally anywhere I want.
However, now I'm starting a new project with Yeoman and I have the same setup:
app.js:
'use strict';
var app = angular.module('angNewsApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute'
]);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/posts.html',
controller: 'PostsCtrl'
})
.otherwise({
redirectTo: '/'
});
});
posts.js:
'use strict';
app.controller('PostsCtrl', function($scope) {
});
posts.html:
<p>{{hey}}zzzzz</p>
However, jshint is complaining and my view isn't showing.
app/scripts/controllers/posts.js
line 3 col 1 'app' is not defined.
line 3 col 44 '$scope' is defined but never used.
Why is it that I can't use app?
UPDATE
the include tags of my index.html:
<!-- 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>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/posts.js"></script>
<!-- endbuild -->
What should I do with these?
It's because you have separated your JavaScript in two file. You need to bring it to one file.
You can compile with the --out option to get a single file.
Include all files into script tags (Order is important).
Use a module loader like RequireJS.