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.
Related
I am following the phoneCat tutorial[https://docs.angularjs.org/tutorial/] and decide to create a similar structured app. but I keep getting $injector:modulerr Error when I try to include a module I created.
files are arranged like this
The way I started my app is use npm package http-sever with command http-server ...\app.
Another thing I noticed is that if I use http-server command directly(rather than npm start suggested in tutorial) to start app in the app folder it also gives me error message. I am now pretty confused about this.
This is my app.module.js
'use strict';
angular.module('dota2Hero', [
'ngRoute',
'core'
]);
If I remove 'core' from dependency array, the code compiles.
Here is my index.html
<!doctype html>
<html lang="en" ng-app="dota2Hero">
<head>
<meta charset="utf-8">
<title>Dota2 Database</title>
<script src="//code.angularjs.org/1.6.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="core/hero/hero.module.js"></script>
<script src="core/core.module.js"></script>
<script src="app.module.js"></script>
<script src="core/hero/hero.service.js"></script>
<script src="app.config.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
and my core.module.js
'use strict';
angular.module('core',['core.hero']);
You need to change the order in which you load the references, load the core.module.js before loading app.module.js
<script src="https://code.angularjs.org/1.6.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.6.1/angular-resource.min.js"></script>
<script src="core/hero/hero.module.js"></script>
<script src="hero-grid/hero-grid.module.js"></script>
<script src="core/core.module.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="core/hero/hero.service.js"></script>
<script src="hero-grid/hero-grid.component.js"></script>
I am creating an Angular App,
var app = angular.module("myApp", ["ngRoute","ngMaterial","ngMessages"]);
When i am using 'ngMessages' with 'ngMaterial', it is not working.
Make sure you have loaded them in the references with the correct versions ,
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs//1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="app.js"></script>
DEMO
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'm trying to load a module called ChapterCtrl but am not being able to because of the Module Unavailable error. Other modules are being loaded as expected. When running the site it causes the links to crash. However, on removing ChapterCtrl from the list of dependencies in the app module I've found that the site is working fine.
Here is the code for the ChapterCtrl.js file:
angular.module('ChapterCtrl', []).controller('ChapterController', function($scope) {});
Here is the app.js file:
angular.module('soulFront', ['ngRoute', 'appRoutes', 'MainCtrl', 'PageCtrl', 'PageService', 'ChapterCtrl', 'ChapterService']);
Here is the Page.js file for comparison:
angular.module('PageCtrl', []).controller('PageController', function($scope) {});
I've tried going through the Error Reference page but was unable to find any fix/solution to the issue. Any suggestion is appreciated. Thanks
Edit
Here is a snippet of the index.html file:
<!--CSS-->
<link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<!--JS-->
<script src="libs/angular/angular.js"></script>
<script src="libs/angular-route/angular-route.js"></script>
<!--ANGULAR CUSTOM-->
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/PageCtrl.js"></script>
<srcipt src="js/controllers/ChapterCtrl.js"></srcipt>
<script src="js/services/PageService.js"></script>
<script src="js/services/ChapterService.js"></script>
<script src="js/appRoutes.js"></script>
<script src="js/app.js"></script>
Hey i've started learning angularJS and i'm quite new to it so i gues my best bet is to ask someone.
So my $routeProvider is not routing me to anything really when i run it it wont load any partials.
The current code i'm using.
angular.module("list" , ['ngRoute' ])
config(function ($routeProvider) {
$routeprovide.
when("/", {templateUrl:"/partials/list.html"})
})
My index.html
<!doctype html>
<html ng-app="list">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/Style.css">
<link rel="stylesheet" href="css/bootstrap.css">
<title>Angular Routing!</title>
</head>
<body>
<div ng-controller="AppCtrl" class="container">
<a href="#lijst">
<h2>The List!</h2>
</a>
<div ng-view> </div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
Edit: I run it by using a USBWebserver app
Console Errors:
> Failed to load resource: the server responded with a status of 404 (Not Found)
http://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js
Uncaught ReferenceError: config is not defined main.js:2
Uncaught Error: Bootstrap requires jQuery bootstrap.js:7
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.7/$injector/modulerr?p0=list&p1=Error%3A%20…20at%20e%20(http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular.min.js%3A29%3A115) angular.min.js:30
First of all, your angular-route.js must be included after angular itself
Second, you are using some routeprovide, and $routeProvider is injected
You should do this:
angular.module("list" , ['ngRoute' ]).
config(function ($routeProvider) {
$routeProvider.
when("/", {templateUrl:"/partials/list.html"})
});
You also forgot point before config method.
And this:
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
And, it seems, your Bootstrap.js requires jQuery to be included before it.