on the yeoman-ionic framework i've tried to add google map to my app.the problem was that every time i ran grunt serve the index.html scripts got deleted. so i've ran this:bower install --save angular-google-maps and the problem solved since it wrote the scripts on some other file in addition to index.html. the only problem is when i ran grunt serve againt i got a diffrent error and ever since then i just can't figure out what i am doing wrong...
the error:
Uncaught ReferenceError: google is not defined
i think it has something to do with some karma config file although i have no idea what this is. tried to solve this for a couple of hours and couldn't figure this out...
I was getting that error too. It turned out to be related to the order in which I loaded my script files. Try loading your script files in this order:
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<script src='/path/to/underscore[.min].js'></script>
<script src='/path/to/lodash.underscore[.min].js'></script>
<script src='/path/to/angular-google-maps[.min].js'></script>
Best!
You must use Google Maps SDK Async Loader.
It guarantees that angular-google-maps does not begin processing any directives until all of the Google Maps SDK is fully ready.
Configure:
.config(function(uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
// key: 'your api key',
v: '3.20', //defaults to latest 3.X anyhow
libraries: 'weather,geometry,visualization'
});
});
When is Google Maps SDK ready?:
.controller("someController", function($scope, uiGmapGoogleMapApi) {
uiGmapGoogleMapApi.then(function(maps) {
// write your code here
// (google is defined)
});
});
Also you can read this http://angular-ui.github.io/angular-google-maps/#!/api/GoogleMapApi
Related
Please, I need a final step-by-step to add and use plugins with Ionic.
I lost several weeks trying to use plugins on Ionic but everytime I got plugin function "is not defined". I really need to solve this issue, but I don't got success.
First of all I'm not trying to use native plugins that uses special hardware components like camera. I'm following the steps below:
1) I created my app using cordova
2) I added my plugin using:
cordova plugin add mercadopago-plugin
3) I've inserted this following scripts on my index.html:
<script src="cordova.js"></script>
<script src="app.js"></script>
4) I created a button calling my plugin on my template.html
<button ng-click="startCheckout()"> OK </button>
5) I called my plugin on app.js
.controller('MyCtrl', function($scope) {
$scope.carrinho = allcarrinho;
var publicKey = "TEST";
$scope.startCheckout = function(){
MercadoPago.startCheckout(publicKey, prefId, null, false, success, failure);
}
})
6) I've emulated my app on the browser typing on my admin prompt command:
ionic serve
But when the plugin is called I got this error:
ReferenceError: MercadoPago is not defined
I following everything on documentation:
Plugin's documentation: http://mercadopago.github.io/px-hybrid/
How do I to fix it?
Thanks!
You probably have to inject MercadoPago in your controller:
.controller('MyCtrl', function($scope, MercadoPago /*<--here*/) {
I didn't see your full code but it has to be something like that.
or to have it not break when minifying:
.controller('MyCtrl', ['$scope', 'MercadoPago', function($scope, MercadoPago) { ....
See this
Most Cordova plugins do not work in the browser. You should try on an emulator or simulator.
Either that, or you need to wait for document.ready or ionicPlatform.ready for the plugin to initialize before trying to use it
This plugin makes native calls when you use ˝MercadoPago". It won't work in your browser, you should run it on an Android Emulator or Phone.
Try:
ionic emulate android -l -c
And it should work.
I am trying to implement a 'remember me' option on my login page and have ventured down the path of using ngCookies to store a local cookie to handle this. However, in trying to follow the instructions from angular documentation I am unable to get the module working in my Web Application.
I am using AngularJS version 1.4.8 and have made sure my angular-cookies.min.js is running the exact same version. I have made sure to add my <link> tags in the correct order:
<script src="../vendor/jquery/dist/jquery.min.js"></script>
<script src="../vendor/angularjs/angular.min.js"></script>
<script src="../vendor/angularjs/angular-cookies.min.js"></script>
However, when I try to load the module into my application:
var EdgeApp = angular.module('EdgeApp', [
'ngCookies',
'ngAnimate',
....
])
I get an $injector:modulerr error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=EdgeApp&p1=Error%3A…2Fdrake-monitor%2FRestApi%2Fvendor%2Fangularjs%2Fangular.min.js%3A19%3A463)
All other modules and dependencies load correctly and work fine.
Based on the advice from #WonderGrub, I stripped my project back to the bear basics and worked from the ground up.
To start with, I installed all of my external modules correctly using Bower (something I wasn't doing before), then I added one module at a time to see if I had any conflicts.
I also reverted back to using .js files instead of .min.js files for my development to help me identify errors more accurately.
I'm unsure what the actual cause of my issue was, but going through the procedures above and the advice from my initial post has worked for me without errors.
I have an object, Plaid, that is provided by a drop-in module from Plaid, called Plaid Link. Locally, the code works perfectly in my AngularJS front-end.
The module is loaded via my AngularJS app's index.html file, right next to all of the other script tags loaded for my application.
Index.html
<script src="https://cdn.plaid.com/link/stable/link-initialize.js"></script>
Here is the code where Plaid is called: (from an AngularJS controller)
$scope.addAccount = function(bankChosen) {
$log.debug("Plaid object: ", Plaid);
var linkHandler = Plaid.create({ // the troublesome line
env: 'tartan',
clientName: 'Example Project',
key: 'test_key',
product: 'connect',
onSuccess: function(public_token) {
Restangular.one('plaid').customPOST(
{
public_token: public_token,
user_id: $scope.currentUser.id,
institution_code: bankChosen
},
'addAccount'
);
},
onExit: function() {
$state.go('dashboard.successState');
},
});
linkHandler.open(bankChosen);
};
However, when I push to the production environment, currently hosted on Heroku, it gives the javascript error ReferenceError: Plaid is not defined when it tries to load. It is breaking error when deployed to production.
What could be causing this module to be unavailable during production?
The script that loads the CDN could be getting stripped away by a standard grunt task that does that sort of thing? Or maybe I am supposed to be loading the module from the CDN in some other way in a production-environment setting? I really don't know...
Update: I found one thing that might be stripping the loaded module
From the Grunt dom-munger docs
Use this task to read and transform your HTML documents. Typical use cases include:
Read the references from your script or link tags and pass those to
concat,uglify, etc automatically.
2. Update HTML to remove script
references or anything that is not intended for your production
builds.
Add, update, or remove any DOM elements for any reason.
dom_munger is part of my application's build process, which happens when it is deployed (!). Grunt is the likely culprit here.
Does anybody know how to load the script tag above, with dom_munger as still part of my app's grunt build step?
The problem was that during the build step Grunt strips away the script tags in my application. So I had to append the tag back on to my body tag using dom_munger's update --> options --> append option.
...only then could I get the CDN script to be linked to properly after the app was built using grunt build.
The line looks like this in my Gruntfile.
--> The key added line is this one
{selector:'body',html:'<script src="https://cdn.plaid.com/link/stable/link-initialize.js"></script>'},
dom_munger:{
[.....]
update: {
options: {
append: [
{selector:'body',html:'<script src="https://cdn.plaid.com/link/stable/link-initialize.js"></script>'},
]
},
src:'index.html',
dest: 'dist/index.html'
}
Quite the mysterious error for me. I hope this helps somebody else out at some point!
I am going through the Strongloop documentation. In the tutorial Add a client app I followed the steps that are given. I am able to run the app with slc run without error. But when checked in the browser there is error that angular is not defined in app.js.
In case if I include angular.js from google i.e. just uncomment in app.js
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
There is error on browser:
Error: [$injector:modulerr] .....
So what could have gone wrong?
The example is outdated, we have a new tutorial here: https://github.com/strongloop/loopback-getting-started. Let me know if that helps.
I'm working on a project using Meanjs and ydn-db for indexeddb support.
So I'm trying to make a service in angular, but I just can't figure a way to include the js file properly. I've tried installing the lib in the following methods:
bower install ydn-db
bower install ydndb
The first case, I could not find a suitable.js file like ydn.db-isw-core-qry-dev.js. Now the second would install the two minified versions which I could work, but I always get the ydn not found error
Now by looking into the Developer's page http://dev.yathit.com/ydn-db/getting-started.html I can see that he has a way of making the require in the AMD loader section, which I simply did not know how to use inside the service factory.
Here is what I'm trying to do inside the factory which by the way I don't think is best practices...
And these are the error that I'm getting just by trying to load this...
How can I use this lib while still following best practices for angular or at least just to get it working without errors?
ldb undefined
Object {db: Object, debug: Object}
Uncaught ydn.error.ArgumentException: Unknown attribute "keypath"
angular.module(ApplicationConfiguration.applicationModuleName).factory('Localdb',['$resource','$q',
function($resource,$q) {
var deferred=$q.defer();
require.config({
baseUrl: '/content',
paths: {
ydn: 'scripts/ydn.db-isw-core-qry-dev'
}
});
require(['scripts/ydn.db-isw-core-qry-dev'], function(ldb){
console.log ('ldb',ldb);//this is undefined
var schema ={
stores:[
{
name:'process',
keypath:'_id',
indexes:[{
name:'processId',
keypath:'processId',
unique:false
},{
name:'processMeta',
keypath:'processMeta',
unique:false
}
]
}
]
};
console.log(ydn);//this gets back ok but then the keypath error???
deferred.resolve(new ydn.db.Storage('pdc',schema));
});
return deferred.promise;
}
]);
Sorry, to get your trouble. ydn-db repo do not have compiled js file, as require (I think) by bower. So it doesn't work. Just download one of the js file and add to your html.
Also check out ydn-db with angular example app.