I'm currently working on a project in ionic/angular 1. I'm using ionic native to wrap the cordova plugins.
I installed ionic native with bower, and added dependency to 'ionic.native' in my app's angular module. Now I can inject stuff like $cordovaFile into my controllers and use them. This works great.
My problem is using the MediaPlugin. I inject $cordovaMediaPlugin in my controller. Now the documentation ( https://ionicframework.com/docs/v2/native/mediaplugin/ ) says do this:
new MediaPlugin('path/to/file.mp3', onStatusUpdate);
Obviously i cant do this in angular1.
I tried stuff like this:
var media = this.$cordovaMediaPlugin('PATH');
var media = new this.$cordovaMediaPlugin('patch');
nothing seems to work, getting undefined all the time.
How would I make this calls in angular/ionic 1? I really think the 'new' keyword is the issue here...
Try to install ngCordova Media plugin.
Install ngCordova, and inject in your app module 'ngCordova'.
See de following steps
Install plugin
If you want create a service to provide a media resources see (Not required)
Related
I try implemented my angular project this js lib but it's doesn't work. How to implement 3rd party js libs Angular 4 project and how to use in my component?
You use it just like how they say in the instructions. In project directory:
npm install drift-zoom --save
then add this to the component you want to use it in:
import Drift from 'drift-zoom';
then whenever you want to call it, just use:
const draft = new Draft('whatever params you need');
I'm attempting to make use of this library: https://github.com/MagicTheGathering/mtg-sdk-javascript in an Angular2 application.
Unfortunately, I've been going in circles trying to load it into my application.
Firstly, on the TypeScript side if I import it using:
import { } from 'mtgsdk';
there are no types to load into the {}.
If I attempt to load it using something similar to:
import * as mtg from 'mtgsdk'
I'm unable to because it says that it's unable to find a module named mtgsdk.
I've installed the module using
npm install --save mtgsdk
Also, npm installs work fine for other modules.
The application compiles fine if I load it in using require via something similar to this:
var mtg = require('mtgsdk');
Taking that approach, I'm able to compile and launch but in the browser I get a number of errors about modules that it can't find. I figure they are prerequisites for the sdk that didn't get loaded so I start bringing them in via package.json.
For every one that I bring in, I then have to go to systemjs.config.js and add an entry pointing to the module's entry point and often have to specify a default extension using blocks like this:
pointer
'mtgsdk': 'npm:mtgsdk/lib/index.js',
'request-promise': 'npm:request-promise/lib/rp.js',
'ramda': 'npm:ramda/dist/ramda.js',
'emitter20': 'npm:emitter20/index.js',
'bluebird': 'npm:bluebird/js/browser/bluebird.js',
'request': 'npm:request/index.js'
default extension
'request-promise':
{
defaultExtension: 'js'
}
I'm not sure if that's the right approach though because the more dependencies I add, the more that I end up requiring. At one point I had literally gotten up to 50 extra dependencies added because every time I launched, the browser console would find more that were needed.
Is there any easier way to load all of these in?
Also, some of them (such as tough-cookie and request-promise-core) were very problematic to load and I couldn't get the browser console to stop complaining about them. Finally, some of them seemed very basic such as url, http, https. Those seem like they should already be present.
Using systemjs was utilized in the previous versions of Angular 2, However Angular 2 has evolved to Angular 4, with super new features like Angular CLI.
I recommend your use Angular CLI, with #angular/cli.
Importing Node modules
Since mtgsdk is a node-module, you can easily import it using
import * as mtg from 'mtgsdk'
However for your program to compile, you must install a type definition for it. or declare one for it in /typings.json or your app might not build.
Importing Client Scripts
For client scripts like firebase.js you won't need to add client scripts as entries in systemjs.config.js again.
Using #angular/cli, you would easily add them in the scripts[] array in your angular-cli.json for automatic compilation.
Then access them like this
declare const firebase: any;
Here is a quickstart tutorial to set up Angular with #angular/cli.
My first Phonegap App. Everything working well except for plugins. I'm trying to install the cordova-plugin-purchase Plugin.
https://github.com/j3k0/cordova-plugin-purchase
I've followed the instructions. And when I run "phonegap plugins" in the console it shows the plugin as being installed.
According to the documentation, there is suppose to be a "store" object that I can reference. I set up the following code to test if it's working:
try {
store.register({
id: "my.reverse.item.example",
alias: "example name",
type: store.CONSUMABLE
});
} catch(err) {
alert(err);
}
On my real project, I have the real info in when registering the product, but I can't even get that far. In my TryCatch it returns the following alert:
"Can't find variable: store".
So it seems that the plugin isn't even installed correct. I'm not to phonegap plugins, so there's probably something very basic that I'm missing. Do I have to include a link to the plugin JS in my index.html file?
I ended up figuring out the problem. It seems to be that I didn't include the cordova.js file in my index.html. I don't see why I needed to do that since I've read over and over that you don't need to manually add the cordova files to your html files.
So the plugin works now and I can receive the store data that I setup using the cordova-plugin-purchase plugin tutorials.
Another thing to note once you actually have the plugin installed correctly:
The Bundle Identifier in Xcode needs to match the bundle ID for the In App purchases you are trying to connect to.
Hi I'm trying to recreate Golden Layout angular complex application https://golden-layout.com/tutorials/angular-complex.html as a electron application, so basically I just did the quick start example of electron http://electron.atom.io/docs/latest/tutorial/quick-start/ and did all the logic of golden layout on my index.html but it send to me this error:
jQuery is missing as dependency for GoldenLayout. Please either expose $ on GoldenLayout's scope (e.g. window) or add "jquery" to your paths when using RequireJS/AMD
As indicated in this answer you need to load jquery in the following way (before including golden-layout):
<script>window.$ = window.jQuery = require('./path/to/jquery.js');</script>
If I understand correctly, the issue occurs because jquery 'detects' that it is running in a requireJS environment and load $ and jQuery in modules (not window)
I created a web application that I need to convert to a mobile application, now all I have is html5/js/css files which means I don't have any www foder no platforms folder, not a cordova project ... I started first to build the app using cordova command lines, but I couldn't, I found many problems on that, I used then https://build.phonegap.com/ , and it works fine for me. In order to read the file, I have tried this code :
window.resolveLocalFileSystemURI("file:///android_asset/www/data/User.xml", function () {
alert("Success");
}, function () {
alert(" error ");
});
but, it didn't work. I added a try catch, the exception was :
window.resolveLocalFileSystemURI is not a function
Do i need to add something to my code to make it work ?
You need to install a plugin for this to work.
Basically, run "cordova plugin add org.apache.cordova.file" at your application's root directory.
For detailed instructions see here, under "Accessing the Feature":
http://docs.phonegap.com/en/edge/cordova_file_file.md.html#LocalFileSystem
UPDATE 2019
The correct way to add this plugin is now with this command in your project root:
cordova plugin add cordova-plugin-file
This is a core cordova plugin. Documentation found here on npm