Implementing a Social Sharing in Ionic using cordova plugins - angularjs

I'm trying to implement social sharing in ionic. I followed this tutorial https://www.thepolyglotdeveloper.com/2014/10/implement-social-media-sharing-ionicframework/
I'm getting the error as
TypeError: Cannot read property 'socialsharing' of undefined
at Object.share (ng-cordova.min.js:9)
at Scope.$scope.shareAnyWhere (shareController.js:10)
at $parseFunctionCall (ionic.bundle.js:21037)
at ionic.bundle.js:53344
at Scope.$get.Scope.$eval (ionic.bundle.js:23093)
at Scope.$get.Scope.$apply (ionic.bundle.js:23192)
at HTMLButtonElement.<anonymous> (ionic.bundle.js:53343)
at HTMLButtonElement.eventHandler (ionic.bundle.js:11706)
at triggerMouseEvent (ionic.bundle.js:2863)
at tapClick (ionic.bundle.js:2852)
I have install the plugins which was mentioned in the tutorial.

First make sure you include ng-cordova before cordova.js. Then take a look at the working example here, try that.
Secondly, Make sure you are doing your tests on a real device or on an emulator, Social sharing plugin is intended for native sharing functionality on the OS you are targeting, it is not intended and it will not work on the browser. If you are on a browser then that is why!
You can use the Ionic CLI to run your tests.

You can make use of window.plugins.socialsharing object and call the functions like shareViaFacebook etc ..this is working for me right now in all my projects.
For more details and full code you can check the video here Social Sharing Plugin: Ionic App

Related

sencha architect production build : Uncaught TypeError: c is not a constructor

I am having Extjs6 App. I am using Sencha Architect for UI . When I am building web using build setting , testing build was getting following error after build is done and onclick of my index.html.
Uncaught Error: [Ext.createByAlias] Unrecognized alias: interaction.itemhighlight
at Ext.Inventory.instantiateByAlias (app.js:13520)
at Object.factory (app.js:7711) at constructor.applyInteractions (app.js:213699)
at constructor.setter [as setInteractions] (app.js:9056)
at constructor.addItemHighlight (app.js:206608)
at constructor.updateTooltip (app.js:206589)
at constructor.setter [as setTooltip] (app.js:9062)
Please help me to resolve this error.
Regards
This will be due to not requiring a class that you use, in development they are loaded dynamically.
To figure out what class is missing, you should run sencha app build testing which will not minify the code, and your error message will be more meaningful.
I had a similar issue, the problem seems to be that sencha is not importing the library when is creating the production or testing builds, you should add the library you are missing in "requires" section of the view that uses it in this case i think the library is 'Ext.chart.interactions.ItemHighlight' after this all your builds should work properly because sencha now knows that it needs this library in the build.
Sorry for my english, hope it helps.

Use AngularJS (Angular1) module from Angular2 project

Just started a demo Angular2 project (no previous experience with Angular1/AngularJS. Have followed and extended from the online quickstart and tutorials, and all was fine. However I'm at the point where I would like to use some components from a library which is designed for AngularJS, and having no end of problems!
Most of the information available about AngularJS/Angular2 compatibility assumes that you have an AngularJS project that you're adding Angular2 components to - not the other way around - so what I'm hoping to do may not even be possible. What I've tried so far involves a simple stripped-back project based on the Angular2 quickstart, with a single Angular2 component that loads into the index.html. I'd then like to integrate components from the existing library (AngularJS-based) into this.
I've tried using UpgradeAdapter.upgradeNg1Component to create components from the library and add them directly into my Angular2 component
I've tried installing angularjs through npm, importing it in a script tag into my index.html and then using a combination of UpgradeAdapter.downgradeNg2Component and UpgradeAdapter.bootstrap to load my Angular2 as a downgraded module
Neither of these seem to work - the component fails to show, and the browser console tells me I've got an Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/angular2/upgrade
Error loading http://localhost:3000/app/main.js
My best guess at the moment is that this is actually an unsupported scenario, and I need to have a 'proper' AngularJS app in order to use the UpgradeAdapter functionality from Angular2. Can anyone confirm this? Or is there something stupid I'm missing here?
Here is a working plunkr describing how to mix Angular1 and Angular2 elements:
http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview
An important point is to bootstrap your main component on the UpgradeAdapter. This way all elements are available in providers (services / factories) and in directives (components / directives):
upgrade.bootstrap(document.body, ['heroApp']);
These two answers could help you:
angular 1.x and angular2 together
How to inject upgraded Angular 1 service/factory to Angular 2 component in ES5?
So the major problem in this case turned out to be the fact that it appears that the upgrade components aren't included as part of the basic angular 2 bundle. After adding:
<script src="node_modules/angular2/bundles/upgrade.min.js"></script>
to my index.html file the error I was seeing disappeared.
Thanks to the answer here for pointing me in the right direction!

Getting Angular Twitter API app working

I have been trying to get the following angular twitter API app to work out of the box but am running into an error on startup.
I am running node v0.10.36, npm 1.4.28
I just wanted to throw it out to the wider community to see if anyone could help me out.
I am trying to get the app working and am running into the error below. I tried a couple of things eg changing port, changing package.json to reflect a newer version of npm but I just don't seem to be able to get it to work. Any assistance would be appreciated. Thanks in advance.
It looks like all the node modules installed correctly.
/Users/billyjlennon/sample-angular-node/routes/tweets.js:36
var i = 0, len = tweets.length;
^
TypeError: Cannot read property 'length' of undefined
at /Users/billyjlennon/sample-angular-node/routes/tweets.js:36:28
at responseHandler (/Users/billyjlennon/sample-angular-node/node_modules/twit/lib/oarequest.js:362:14)
at passBackControl (/Users/billyjlennon/sample-angular-node/node_modules/twit/node_modules/oauth/lib/oauth.js:374:13)
at IncomingMessage.<anonymous> (/Users/billyjlennon/sample-angular-node/node_modules/twit/node_modules/oauth/lib/oauth.js:386:9)
at IncomingMessage.emit (events.js:117:20)
at _stream_readable.js:944:16
at process._tickCallback (node.js:442:13)
It would be such a handy app if I could get it to work!!!
Have you done this per the readme:
Create a config.js file using config.sample.js as a template. Fill in your Twitter App API Keys. You will need to create a Twitter application.
The fact that length is undefined indicates you aren't getting any data back.

window.plugins.AdMob always undefined in ionic app

I'm trying to include this admob plugin.
I've tried everything, but whatever I do, the window.plugins.AdMob is always undefined.
I checked it on my android device and also on the ios simulator (I know it's not working in the browser).
What I did:
I added the plugin with the following command:
cordova plugin add com.google.cordova.admob
Then I tried following the instructions from the plugin, but also used the code example from here.
But whatever I do, window.plugins.AdMob is always undefined.
I also tried loading it with a 3000ms timeout (because some answers say that the plugin is not initially ready and takes some time).
I really don't have a clue what to try next or what step I missed.
I also tried the google analytics plugin and followed the tutorial here but again, the "analytics" object is undefined. What do I miss here?
Instead of using window.plugins.AdMob, please directly use AdMob, or window.AdMob.
It's defined in the plugin.xml:
<js-module src="www/AdMob.js" name="AdMob">
<clobbers target="window.AdMob" />
</js-module>
The example code you see, is for the old AdMob plugin.
1.install admob phonegap plugin
cordova plugin add https://github.com/admob-google/admob-cordova
init admob plugin
init plugin after deviceready event
admob.initAdmob("admob banner ID","admob interstitial ID");
3.show admob ads
admob.showBanner(admob.BannerSize.BANNER,admob.Position.TOP_APP);//show banner at the top of app
Take a look at this https://github.com/Dharmoslap/ng-cordova. You can use AdMob Pro as well.

AngularJS 1.3 with ngbp framework doesn't load in chrome browser when using ng-strict-di

I'm working on an AngularJS web app using the ngbp framework (formerly ng-boilerplate) which by default uses AngularJS 1.2. The project is in early stages so we're experimenting with using AngularJS 1.3 instead of 1.2, as it has some nice features we'd like to make use of. We're also working under the assumption that AngularJS 1.3 will likely be the release version by the time we go live.
So I simply switched the AngularJS version number in the bower.json file and everything seems to work fine in Chrome, Safari, and Firefox except for when I enable strict dependency injection (ng-strict-di). When strict DI mode is on I get the error below (more detail here), but it only occurs in Chrome (FF & Safari both still work as expected).
Failed to instantiate module ng due to:
Error: [$injector:strictdi] function($provide) is not using explicit annotation and cannot be invoked in strict mode
http://errors.angularjs.org/1.3.0-build.3121+sha.a4520a7/...)
at http://localhost:8080/assets/ngbp-0.3.2.js:87:12
at annotate (http://localhost:8080/assets/ngbp-0.3.2.js:3352:17)
at Object.invoke (http://localhost:8080/assets/ngbp-0.3.2.js:4036:21)
at runInvokeQueue (http://localhost:8080/assets/ngbp-0.3.2.js:3964:35)
at http://localhost:8080/assets/ngbp-0.3.2.js:3973:11
at forEach (http://localhost:8080/assets/ngbp-0.3.2.js:338:20)
at loadModules (http://localhost:8080/assets/ngbp-0.3.2.js:3954:5)
at createInjector (http://localhost:8080/assets/ngbp-0.3.2.js:3894:11)
at doBootstrap (http://localhost:8080/assets/ngbp-0.3.2.js:1494:20)
at bootstrap (http://localhost:8080/assets/ngbp-0.3.2.js:1509:12
It seems that for some reason the angular source code itself is failing the strict DI test and thus won't load in the Chrome browser from within the ngbp framework. The above error comes from a fresh clone of ngbp with the only change being the version of AngularJS (1.3), not from our actual project (though the error is the same in both cases). I know that this version of ngbp doesn't officially support Angular 1.3 but as I said the app seems to work just fine with this change, even though it fails this test. I'm wondering if anyone might have some insight into what is causing this error and whether or not it would be ill-advised to proceed with this combination of AngularJS 1.3 and ngbp (version: 0.3.2)? Is there something else within ngbp that needs to be changed along with the version of AngularJS?
If it helps I'm serving up the files locally via cd ../bin; http-server -p 8080. If any other information would help just let me know and I'd be happy to provide it if possible.
Thanks for your time.
EDIT: If it helps I tested on OS X 10.9.4 with the following browser versions:
Chrome (Version 36.0.1985.143)
64-bit Chrome (Version 37.0.2062.94)
Firefox (31.0)
Safari (Version 7.0.5 (9537.77.4))
Looks like you might be using batarang, it does not work well with ng-strict-di. Try disabling batarang from google chrome developer tools and the app should start normally again.
[edit] AngularJS batarang now support ng-strict-di since v0.5.0. This error should no longer happen.

Resources