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
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 have been trying to implement routing in my project but find it difficult to do so. Here is my index.html code
<!DOCTYPE html>
<!-- Angular Material CSS now available via Google CDN; version 0.11.2 used here -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script>
<!--<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>-->
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script type="text/javascript" src="./app/app.js"></script>
<section ng-controller="MainCtrl">
<div ng-view></div>
</section>
<!-- Angular Material Javascript now available via Google CDN; version 0.11.2 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
and here is my app.js file:
(function(){
"use strict";
var app = angular.module('math_teacher', ['ngMaterial']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/welcome',{
templateUrl: 'welcome.html',
controller: 'MainCtrl',
}).
otherwise({redirectTo: '/welcome'});
}]);
app.controller('MainCtrl', ['$scope', function(){
}]);
app.controller('TutorialsController', ['$scope', function(){
}]);
})();
and here is my welcome.html to test whether my route was working
<h1>Welcome to this page</h1>
<p>This really shows that the route is at work</p>
on running this on my server here is what am seeing in my console:
Uncaught TypeError: Cannot read property 'module' of undefined(anonymous function) # angular-route.js:24(anonymous function) # angular-route.js:6
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=math_teacher&p1=Er…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A38%3A135)(anonymous function) # angular.js:38(anonymous function) # angular.js:4138r # angular.js:323g # angular.js:4099ab # angular.js:4025d # angular.js:1452uc # angular.js:1473Jd # angular.js:1367(anonymous function) # angular.js:26304a # angular.js:2762c # angular.js:3032
Pls help
I found the solution!
after adding
'ngRoute'
to the dependencies it still doesn't work
All I did was to add my script after angularjs script and not before it
You have to include 'ngRoute' module in your app.
var app = angular.module('math_teacher', ['ngMaterial', 'ngRoute']);
I have tried to follow the https://github.com/angular-ui/ui-map guide to integrate google maps into my project, but I don't quite understand where I'm going going wrong. I also get a strange error.
I load the following scripts:
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-ui-map/ui-map.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script src="bower_components/angular-ui-map/ui-map.min.js"></script>
<script src="bower_components/angular-ui-utils/ui-utils.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=mykey&sensor=false&callback=onGoogleReady"></script>
The callback throws an error: Uncaught TypeError: Cannot read property 'appendChild' of null on line 11
My app modules
var app = angular.module('app', [
'ngRoute',
'AppControllers',
'AppFactories',
'ngSanitize',
'AppDirectives',
'ngResource',
'ngAnimate',
'mgcrea.ngStrap',
'ui.map' <---- angular map ui
]);
html from my view
<section id="map" style="height:400px;width:400px;">
<div ui-map="myMap" ui-options="mapOptions" class="map-canvas"></div>
</section>
I don't know where to place the
function onGoogleReady() {
console.log('Google maps api initialized.');
angular.bootstrap(document.getElementById('map'), ['app.ui-map']);
}
bit.
What am I doing wrong?
Ok I managed to get it to work by just loading the Google API in first instead of last.
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.