How to include and use cordova plugins - angularjs

I'm struggling with cordova plugins in my ionic app. Been googling whole day, no big win yet.
here's what I'm trying to do - open a web page inside my app with navbar present. I found that cordova-themeable might work that out
...however...
I installed it
$ cordova plugin add cordova-plugin-themeablebrowser
ok, it's present
$ cordova plugin list
cordova-plugin-camera 2.2.0 "Camera"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-console 1.0.3 "Console"
cordova-plugin-device 1.1.2 "Device"
cordova-plugin-splashscreen 3.2.2 "Splashscreen"
cordova-plugin-statusbar 2.1.3 "StatusBar"
cordova-plugin-themeablebrowser 0.2.15 "ThemeableBrowser"
cordova-plugin-whitelist 1.2.2 "Whitelist"
ionic-plugin-keyboard 2.2.0 "Keyboard"
now, I'm trying to use it in controller function
$scope.doStuff = function doStuff() {
cordova.ThemeableBrowser.open('http://apache.org', '_blank', {
...
and call it in my .html file
<ion-item ng-click="doStuff()">
I get the following error
ReferenceError: cordova is not defined at Scope.doStuff
in my index.html, I've got
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/app.js"></script>
please help, thanks

Can you verify the plugin is in your config.xml?
It should look something like this:
<plugin name="com.phonegap.plugins.example">
<param name="APIKey" value="12345678" />
<param name="APISecret" value="12345678" />
</plugin>

would have added this as a comment, but not enough rep and only posting as i cant see any mention of any of this.
make sure it is injected properly into your app, given the error or cordova not defined i'm assuming this might be an issue. i couldnt find any specifc references to it, but considering it is built on top of the inappbrowser, i would assume the DI would be $cordovaInAppBrowserProvider.
while reading the docs, from their gitgub FAQ "I just installed this plugin, how come it just shows a blank toolbar?
The purpose of this plugin is to allow you to style the in app browser the way you want. Isn't that why you installed this plugin in the first place? Hence, it does not come with any defaults. Every UI element needs to be styled by you, otherwise it's hidden. This also avoids polluting your resouce bundle with default images."

To add a plugin you are doing right, i.e. if you want to use cordova adomb plugin:
cordova plugin add cordova-admob
Regarding to the error: Are you debugging in browser or in real device? Normally in browser, you should use
cordova platform add browser
phonegap serve
(I recommend you to use phonegap serve insetad of cordova serve as sometimes it works better, but shouldn't make the difference)
Another way to debug apps is to use android remote debug.

Related

Package conflict in meteor : Angular2 and Templating

I am in and out of a project with Meteor, trying to wrap my head around this framework (documentation is comparable to Ruby... just terrible and fragmented), and I get this error :
While determining active plugins:
error: conflict: two packages included in the app (barbatus:angular2 and
templating) are both trying to handle *.html
And this is my installed packages :
autopublish 1.0.4 (For prototyping only) Publish the entire d...
blaze-html-templates 1.0.1 Compile HTML templates into reactive UI wit...
ecmascript 0.1.5 Compiler plugin that supports ES2015+ in al...
es5-shim 4.1.13 Shims and polyfills to improve ECMAScript ...
flemay:less-autoprefixer 1.1.0 The dynamic stylesheet language + Autoprefixer
insecure 1.0.4 (For prototyping only) Allow all database w...
jquery 1.11.4 Manipulate the DOM using CSS selectors
meteor-base 1.0.1 Packages that every Meteor app needs
mobile-experience 1.0.1 Packages for a great mobile user experience
mongo 1.1.2 Adaptor for using MongoDB and Minimongo ove...
semantic:ui 2.1.4 Official Semantic UI Integration for Meteor
session 1.1.1 Session variable
standard-minifiers 1.0.1 Standard minifiers used with Meteor apps by...
tracker 1.0.9 Dependency tracker to allow reactive callbacks
urigo:angular2-meteor 0.2.0+ Angular2 and Meteor integration
Now, I know that barbatus:angular2 is used by urigo:angular2-meteor, but I'm unsure why it would conflict with templating (which is obviously required by something else... if not meteor-base itself.
How do I fix this?
** Edit **
This is my only .html file :
<head>
<title>larpdb</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
<template name="hello">
<button>Click Me</button>
<p>You've pressed the button {{counter}} times.</p>
</template>
Basically, this is a brand new empty project; how can I avoid getting this error? Do I have to strictly not use <template> tags in my project?
In Meteor 1.2.0.2 you can use
> meteor remove blaze-html-templates
Changes to your project's package version selections:
blaze-html-templates removed from your project
caching-compiler removed from your project
caching-html-compiler removed from your project
templating removed from your project
templating-tools removed from your project
Then add the urigo:angular2-meteor package (must download from GitHub)
> meteor add urigo:angular2-meteor
In meteor .html file have templates only. If you are creating angular templates and giving same extension then at that time it will throw error. because in meteor only master file have html tag and if you adding different html file not having template tag then it will treat it as HTML file and add html tag in it while building.
so if you are creating templates for angular just rename it somefile.ng.html.
so that while meteor build it will don't have conflict.
meteor remove blaze-html-templates
meteor remove ecmascript
Run the following commands to remove meteor's default ecmascript package .
Now the app should run fine .

How does browserify work with angular based app?

I was mess around this for a couple of days. I was trying to get browserfiy to work well with angular based app. I have tried following options but still cannot decide on a better way to do it, it will be appreciated if anyone can give any suggestion on this.
Option 1
Bundle all angular related libs, like angular, angular-animate, angular-ui-router, etc into vendor.js by using bundle.require
Bundle all app reated source files into app.js by using bundle.external
That works fine in dev environment, all modules in vendor.js could be required from app.js
But it crashed in prod environment. The minified angular files are not all CMD. Although I can browserify-shim angular.min.js and bundle.require angular-ui-router.min.js, it's kind of cubersome to do this file by file.
Option 2
Leave all angular libs into <script> and only output bundle for app files. That means in app.js, I have to refer to angular as a global var which is not good.
So what's the best practise to do this?
Even if you do require() angularjs, it still exposes the angular namespace in the context of its environment (Window object for browsers). What I usually do is simply put all angularjs modules dependencies (e.g. ui.router, ngResource and etc) below the bundled(browserified) javascript where your angularjs application resides. In my case, I use gulp-useref to concatenate all the script provided by the gulp-inject tags(this includes scripts bundled by browserify).
As you may have noticed below, the bower components(bower:js tag) are added below the bundle(inject:js tag). Since requiring the angular module will attach the angular object in the window object, then any components external to browserify can access window.angular.
The answer I provided is somehow similar to option 2 but without the disadvantage of referring angular as a global variable within your browserified code.
e.g.
<!-- build:js({./.tmp,./}) js/index.js -->
<!-- inject:js -->
<!-- endinject -->
<!-- bower:js -->
<!-- endinject -->
<!-- endbuild -->
UPDATE:
I've create a github repo that resembles the answer provided above. Try to clone it, and see what you can do with it.

how to add cordova plugin to steroids app

I'm using cordova-http plugin in a Steroids app. according to manual, I've added plugin in iOS config in steroids could service:
[
{"source":"https://github.com/wymsee/cordova-HTTP.git"}
]
and also I've added it in config.xml:
<js-module src="www/cordovaHTTP.js" name="cordova-HTTP">
<clobbers target="cordova-HTTP" />
</js-module>
but still I got the error telling me injected Angular model is missing.
do I need to link it to index.html knowing that manual says
<js-module> fulfills this job.
do I need to install plugin like what's mentioned in plugin's github
page:
cordova plugin add https://github.com/wymsee/cordova-HTTP.git
may you please tell me what should I do step by step to make it
work?
There are many ways to add plugins. There's an easy way:
open your command line
path/to/your/project/plugins
cordova plugin add https://github.com/wymsee/cordova-HTTP.git
Inject the plugins by adding 'cordovaHTTP'
Example: var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'cordovaHTTP']);
Use it with key word cordovaHTTP
Hopes it'll help you

How to add google api to grunt build

I'm fairly new to Grunt, Bower and Yoeman so please forgive me if I'm not asking the right question. I've added the angular-google-maps module to my build and set it up manually and everything looks fine. However whenever I restart my project in Webstorm or build using grunt, my google maps api reference keeps getting lost. I've added the google and lodash dependencies to the package.json file and those references are being added just fine. However, how do I add a dependency to an api or should I just be putting the reference before the bower/components block? I've been searching the web for the last day or so and nothing seems to address this that I've found.
Here's an example of the api I need to add -
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
Thanks for the help in advance!
Please make sure to put your reference outside of the <!-- bower:js --><!-- endbower --> block in your HTML. This section is overwritten by grunt-wiredep when you build your application

Adding a Fuelux wizard to an Angular project

I'm reading https://github.com/ExactTarget/fuelux in order to get familiar with the Fuelux wizard, and how I can integrate it with my AngularJS project.
In the non-AMD section it says :
Non-AMD
If you'd prefer not to use AMD, simply add the loader script to the head tag of your page:
<script src="http://www.fuelcdn.com/fuelux/2.6.1/loader.min.js" type="text/javascript"> </script>
but something in jquery is conflicting with my angular routes.
I'm also using this as a guide, and adding the necessary css links and requirejs links; however the wizard does not render properly (as if it were missing the css styling).
wizard
UPDATE:
In my latest attempt, after downloading from https://github.com/ExactTarget/fuelux/tree/3.0.0-wip , I'm still getting the non-formatted wizard. Please see screen shot :
FuelUX 2.x is AMD only. The loader.js is a polyfill of sorts (almond.js- a minimal AMD API implementation) that allows AMD, just so you don't have to load require.js yourself, but it's still there.
The latest version FuelUX 3 is a WIP branch and is UMD (Universal Module Definition) which means it can be used with/without AMD via tags with only Bootstrap and JQuery as dependencies. You might try it.

Resources