I am trying to use Google maps in Angularjs app as described here: http://angular-ui.github.io/angular-google-maps/#!/use
I followed all the steps but I am getting following error:
My index.html has scripts in following order:
<!-- ionic/angularjs js -->
<script src='lib/loadash/dist/lodash.js'></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-messages/angular-messages.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<script src="lib/angular-cookies/angular-cookies.js"></script>
<script src="lib/angular-sanitize/angular-sanitize.js"></script>
<script src="lib/angular-animate/angular-animate.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src='lib/angular-simple-logger/dist/angular-simple-logger.min.js'></script>
<script src='lib/angular-google-maps/dist/angular-google-maps.min.js'></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
In my app.js I have configured it as follows:
swarmsApp.config(function($stateProvider, $urlRouterProvider, $httpProvider, uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
// key: 'your api key',
v: '3.20', //defaults to latest 3.X anyhow
libraries: 'weather,geometry,visualization'
});
And in my controller:
.controller('FarmersCtrl', ['$scope','$http', 'uiGmapGoogleMapApi', function($scope, $http, uiGmapGoogleMapApi) {
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
What is going wrong?
UPDATE : this error was solved by including <script src='//maps.googleapis.com/maps/api/js?sensor=false'></script> before <script src='lib/angular-google-maps/dist/angular-google-maps.js'></script> However it looks like not recommended way.
This led to another error:
There is a missing library. I think you need lodash for angular google map. See the code snippet in your given library link:
<script src='/path/to/lodash[.min].js'></script>
<script src='/path/to/angular[.min].js'></script>
<script src='/path/to/angular-simple-logger/angular-simple-logger[.min].js'></script>
<script src='/path/to/angular-google-maps[.min].js'></script>
Include the library and try again. Thanks.
I referred this post:
http://codepen.io/netsi1964/post/angularjs-google-maps-directive and replaced downloaded loadash in lib folder with
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
Related
I have a gulp script that minifies my javascript:
gulp.task("min:js",
function() {
return gulp.src([paths.js, "!" + paths.minJs])
.pipe(concat(paths.concatJsDest))
.pipe(uglify())
.pipe(gulp.dest("."));
});
When it minifies
<script src="Scripts/Min/modernizr.js"></script>
<script src="Scripts/Min/main.js"></script>
<script src="Scripts/Min/angular.js"></script>
That seems to work, but when I try to minify
<script src="Scripts/Min/modernizr.js"></script>
<script src="Scripts/Min/main.js"></script>
<script src="Scripts/Min/angular.js"></script>
<script src="Scripts/Min/angular-ui-router.js"></script>
I get angular is not defined in my console and the site doesn't come up.
I'm relatively new to gulp and angular, am I missing something here?
Update
Paths:
paths.concatJsDest = "Scripts/site.min.js";
paths.js = "Scripts/Min/**/*.js";
Now that I've narrowed my problem down to file order, I can use gulp-htmlreplace to load angular.min.js first:
<!--build:angular-->
<script src="Scripts/Src/angular.js"></script>
<!-- endbuild -->
<!-- build:js -->
<script src="Scripts/Min/modernizr.js"></script>
<script src="Scripts/Min/main.js"></script>
<script src="Scripts/Min/loading-bar.js"></script>
<script src="Scripts/Min/angular-ui-router.js"></script>/script>
<!-- endbuild -->
And the gulp steps:
gulp.src('Index.html')
.pipe(htmlreplace({
js: paths.concatJsDest,
angular: paths.angularmin
}))
.pipe(gulp.dest('.'));
});
gulp.task("min:js",
function() {
return gulp.src([paths.js, "!" + paths.minJs])
.pipe(concat(paths.concatJsDest))
.pipe(uglify())
.pipe(gulp.dest("."));
});
My consideration is that I'll be adding many more modules to my angular as I build out the site, so a static order isn't ideal.
I am creating one small demo for getting user list and also login using angularjs with web api.and I am using datatable for showing user list.then I am include datatable in module file then first time run the project getting like this error.and then remove 'datatable' from the module working very well.so i can not understand where is my mistke.
this is my app.js code:
var app = angular.module("Demo", ['ngRoute','datatables']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/dashboard', {
templateUrl: 'home/dashboard',
controller: 'dashboardcontroller'
}).
otherwise({
redirectTo: '/home/login'
});}]);
this is my included datatable module. i am remove here datatable it's working fine but again add datatable getting error from the module.
this is my script ordering :
<script src="~/assets/js/jquery.js"></script>
<script src="~/assets/angular.min.js"></script>
<script src="~/assets/js/angular-datatables.js"></script>
<script src="~/assets/angular-route.min.js"></script>
<script src="~/assets/js/jquery.datatables.js"></script>
<script src="~/assets/js/angular.js"></script>
<script src="~/assets/app.js"></script>
<script src="~/assets/services.js"></script>
<script src="~/assets/controller.js"></script>
this is error is getting:
so this is my code any one know where is mistake then please let me know.
You need angular-datatable plugin also for inject datatable service in controller
see angular-datatable
Please remove the duplicated import of angular and add the jQuery before the angular's files. Like this:
<script src="~/assets/js/jquery.js"></script>
<script src="~/assets/js/jquery.datatables.js"></script>
<script src="~/assets/js/angular.js"></script>
<script src="~/assets/angular-route.min.js"></script>
<script src="~/assets/js/angular-datatables.js"></script>
<script src="~/assets/app.js"></script>
<script src="~/assets/services.js"></script>
<script src="~/assets/controller.js"></script>
The angular-datatables provides a datatables directive you can add to your <table>
Like this <table datatable="">...</table>
You can have more information here: http://l-lin.github.io/angular-datatables/archives/#!/gettingStarted
<script src="~/assets/js/jquery.js"></script>
<script src="~/assets/js/jquery.datatables.js"></script>
<script src="~/assets/js/angular.js"></script>
<script src="~/assets/angular-route.min.js"></script>
<script src="~/assets/js/angular-datatables.js"></script>
<script src="~/assets/app.js"></script>
<script src="~/assets/services.js"></script>
<script src="~/assets/controller.js"></script>
Try with this
I am building an SPA to run on a page in SharePoint 2013 online and having problems installing ui-bootstrap manually.
I have downloaded this file https://github.com/angular-ui/bootstrap/blob/master/src/modal/modal.js and saved as ui-bootstrap.js.
Then I reference the file in index.html:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="~site/Webparts/js/angular.min.js"></script>
<script type="text/javascript" src="~site/Webparts/js/angular-route.min.js"></script>
<script type="text/javascript" src="~site/Webparts/js/ui-bootstrap.js"></script>
<script type="text/javascript" src="~site/Webparts/testLabApp/testLabApp.js"></script>
<script type="text/javascript" src="~site/Webparts/testLabApp/dal.js"></script>
<script type="text/javascript" src="~site/Webparts/testLabApp/email.js"></script>
<link href="~site/Webparts/testLabApp/style.css" rel="stylesheet" />
Then added dependency in App js file:
var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap"]);
However, I am getting injector error:
[$injector:modulerr] http://errors.angularjs.org/1.4.2/$injector/modulerr?p0=testLabApp&p1=Error%3A%20%5B%24injector%3Amodulerr...
Clearly, I have done something wrong, but I could not find how to download the right file(s) from github.
Any help is most appreciated.
Regards
Craig
If you are just using the modal.js, there is no module named ui.bootstrap.
Try changing:
var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap"]);
To:
var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap.modal"]);
Make sure to also download the template files for the modal (window.html and backdrop.html)
It looks like the problem is that you only downloaded modal.js, which is only the modal section, not all of ui-bootstrap.
Try this file: https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.js
Or minified: https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js
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>
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.