Phonegap - opening href links in a browser

Convert text from href links into ng-click.

//input: <a href="xxx">
        //output: <a ng-click="GotoLink('xxx')">
        function convert2ngclick(str) {          
            var res = str.replace(/<a href=\"(.+?)\">/g, '<a ng-click="GotoLink(\'$1\')">');
            return res;
        }

How to deploy .apk (Android)

Build.
1. gulp build
2. phonegap build android

Deploy with signed.

1. Open Android Studio.
2. Open Angular js project folder >> platforms >> android
3. Follow pics below.

Deploy to apk fails when unsigned.

http://stackoverflow.com/questions/20402818/build-android-release-apk-on-phonegap-3-x-cli/22979830#22979830

How to install Android emulator on MAC

Follow this link to install Android SDK
http://www.petefreitag.com/item/763.cfm

Change $PATH to run sdk anywhere
http://stackoverflow.com/questions/5526470/trying-to-add-adb-to-path-variable-osx

http://hathaway.cc/post/69201163472/how-to-edit-your-path-environment-variables-on-mac


When I do below, I got error complaining
phone gap build android

[Error: Please install Android target: "android-22".

I found a solution here.
http://stackoverflow.com/questions/29396252/cordova-error-please-install-android-target-android-21

You should change target in 3 places.

Then phone gap build android starts working.

phonegap build android - error

After doing Angular js coding for a while, suddenly, the below line didn't work.
phonegap build android

How I bang my head on wall

The build command returned error. iOS was working fine. But phonegap run android returned broken pages and WEB API returned nothing.

I removed android platform and added again. Didn't help.
I installed phonegap again with latest. Didn't help

I started deleting entire www folder. Because I thought 'gulp build' makes whole www again. I was wrong!!!

The icon in res\redrawable-hd folder generated and deleted.

At one stage, I thought the above was this error in below link. But it wasn't.
http://javalearnersproblems.blogspot.com.au/2011/11/androidmanifestxml-has-error-no.html

Then I found I am missing folders and files under www. See how js folder only is regenerated when you run 'gulp build'.

The error below is irrelevant. I don't know what it means. Maybe my index.html had problem.

I have copied some of my head banging cmd dump in this HTML file. Look at the red color lines.

Solution

I found that after 'phonegap build android', actually the error message shows 'FAIL' at first time, complaining about 'administrator's Macbook's index.html'. What the xxx?? I found that that strange file exists in www folder. It must be generated while I was doing some copy/paste.

1. I deleted that file.
2. gulp build
3. phonegap build android
=> platforms, androidManifest.xml etc is generated. I guess. Emulator is not refreshing without build.
4. phonegap run android.

All worked good!

See the 'Other' text shows on top? That's from web api!!!

After a few days later ...

When I worked well in iOS for a while and came back to windows for Android test, it started showing error again when I 'phonegap build android'. The error message was ..

C:\Users\matthew.oh\Dropbox\my-app\angularui\platforms\android\AndroidManifest.xml:27:9 Error:
        Element service#com.adobe.phonegap.push.GCMIntentService at AndroidManifest.xml:27:9 duplicated with element declared at AndroidManifest.xml:19:9
 FAILED

It complained about GCM push something.
This is what I did to fix it.

1. phonegap platforms remove android
2. phonegap platforms add android
3. phonegap plugin remove phonegap-plugin-push
4. phonegap plugin add phonegap-plugin-push
5. gulp build
6. phonegap build android

Then it was ok.

ADFS Login Process

Refer to Doc, how to copy ADFS from Neil.

No1 is required to make javascript to point the correct value.

Without No2, there was 'dangerous ...' error.

Without No3, there was error.

Web.config should be different from local and live.

When  login button is clicked, it goes to correct login screen.

App Login Process

Angular JS compile in iOS/Android

Angular JS compile in iOS

1. go to your app-folder
2. gulp build
3. phonegap build ios
4. go to Xcode
5. connect / run to your phone


No2 creates www folder (Phonegap folder) from src folder (Angular JS code)
No3 creates app-folder\platforms\ios\XXX.xcodeproj

Angular JS compile in Android

1. go to your app-folder

Never do below!! (Some of the files in www are essentially necessary eg, icon.png. And they do not recover by 'gulp build')

2. cd www
del *
cd ..

3. gulp build
4. phonegap build android 
(build was necessary to run emulator properly)

5. phonegap run android

Install phonegap into iOS (screenshots)

Start Angular JS (Angular JS Install)

Grand Prix drivers example
http://www.toptal.com/angular-js/a-step-by-step-guide-to-your-first-angularjs-app
C:\phonegap_apps\angular-seed

angular-seed install and run
https://github.com/angular/angular-seed



A simple example => not working, but read some.
http://www.sitepoint.com/getting-started-mobile-angular-ui/
Source code
https://github.com/sitepoint-editors/MobileAngularUIApp_Part_1
C:\phonegap_apps\MobileAngularUIApp_Part_1-master


Another nice example
http://coenraets.org/blog/2013/11/sample-mobile-application-with-angularjs/

Editing AngularJS in visual studio
http://blogs.msdn.com/b/visualstudio/archive/2015/02/05/using-angularjs-in-visual-studio-2013.aspx

Mobile Angular UI
https://github.com/mcasimir/mobile-angular-ui

Mobile Angular UI - Getting started (install)
http://mobileangularui.com/docs/getting-started/


<USEFUL LINKS>

Angular JS, Hello World (Very nice series)
http://viralpatel.net/blogs/angularjs-introduction-hello-world-tutorial/

scope / controller
http://viralpatel.net/blogs/angularjs-controller-tutorial/

ng-view

http://stackoverflow.com/questions/16028678/angularjs-access-elements-outside-of-ng-view

 http://plnkr.co/edit/8LwPRy3ssdT6wWLuvqNB?p=preview

 http://liamkaufman.com/blog/2013/11/11/understanding-angularjs-directives-part2-ng-view/

Angular JS 5 examples
http://tutorialzine.com/2013/08/learn-angularjs-5-examples/

scope.apply
http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

factory
http://blog.manishchhabra.com/2013/09/angularjs-service-vs-factory-with-example/

scope value watch
http://www.bennadel.com/blog/2852-understanding-how-to-use-scope-watch-with-controller-as-in-angularjs.htm

scope function watch
http://www.bennadel.com/blog/2658-using-scope-watch-to-watch-functions-in-angularjs.htm

Phonegap with AngularUI

Your first Phonegap App with Mobile Angular Ui

http://mobileangularui.com/blog/using-the-generator/

https://github.com/mcasimir/generator-mobileangularui

The Git Example had some errors.
https://github.com/mcasimir/generator-mobileangularui/issues/21


I followed below but stopped because of too much time waste.

Install nvm
http://stackoverflow.com/questions/25654234/node-version-manager

Install nvmw
https://github.com/hakobera/nvmw

Restart cmd to recognize nvmw path.

Although it looks like an error, it seems good.

Phonegap iOS Cross Domain issue

Webservice using external domain didn't work phonegap ios (phonegap android was fine)

People say...

Phonegap should support cross domain:

http://stackoverflow.com/questions/17491185/access-control-allow-origin-error-when-getting-wordpress-posts-in-phonegap-app

 http://docs.phonegap.com/en/edge/guide_whitelist_index.md.html

 JSONP is a solution (but may be not for the POST?) => No

http://stackoverflow.com/questions/5943630/basic-example-of-using-ajax-with-jsonp

phonegap ios ajax not working

Moving to xhr => No
http://stackoverflow.com/questions/9379220/calling-web-service-using-phonegapios


The below site saved my life!! NSAppTransportSecurity

Ajax Not working in IOS 9.0 Cordova
http://stackoverflow.com/questions/32706656/ajax-not-working-in-ios-9-0-cordova

Another nice URL:
http://enable-cors.org/server.html

How to deploy phonegap to android device

When deploying phonegap project to device, my old android device was not recognized (Nexus S, Android os 4.1.2)

I checked Developer Option >> Enable USB Debug, but still adb returned no device.

I get to know that I have to install Google USB Driver to catch my phone.

Then my phone showed up.
Now when I run the following, it doesn't go to emulator any more but goes directly to the phone! It's because my phone is connected with USB cable.

C:\Users\matthew.oh\Dropbox\my-app\hello\platforms\android>phonegap run android

You can run below also. I guess it's samething. Choose a simple one.

C:\Users\matthew.oh\Dropbox\my-app\hello\platforms\android>adb install build/outputs/apk/android-debug.apk

Voila!

The message.html shows nothing because it didn't have WebAPI codes in there yet.

<The below is needed when your dubugging WepAPI URL is different from Live url>

You have to both update WebAPI and phonegap's message.html to deploy properly in my case. This is because my WepAPI URL had cross domain issue.

Copy any source code change from your debugging environment to phongap project folder.

 Make sure that message.html points to the correct URL.

Change WebAPI project to use a correct url and test it compile correctly.

Publish WebAPI project and copy across to live Web API url. You may need to copy across through FTP only the files you changed.

Now, WebAPI is ready to use.
Check if the live url works fine.

Run phone gap again. You don't need to compile again. It seems it builds first and deploy to device.

Voila again!