Click here to Skip to main content
14,297,239 members

Angular Mobile Apps

Rate this:
5.00 (18 votes)
Please Sign up or sign in to vote.
5.00 (18 votes)
18 Dec 2017CPOL
Angular 8 Mobile App with Cordova Project. While Cordova isn't necessary I added it for people who like to use Cordova Plugins. But this app requires NO unnecessary 3rd Party Frameworks Like React Native, Ionic, Flutter, NativeScript, etc.
Image 1
  Old Frameworks NO Longer Needed
  - NO Ionic & NO React Native - NO Intel XDK
  - NO Onsen UI - NO Trigger.IO
  - NO ng2-Bootstrap - NO TopCoat
  - NO Sencha Touch - NO NativeScript
  - NO Angular UI & NO Flutter - NO Framework 7
  - NO Kendo UI - NO Xamarin
   A Few of the Powerful Features in this    
  Sample Angular Mobile App:        
  • Animated & Fullscreen Video Backgrounds
  • PayPal BuyNow & Merchant Processing In App
  • JSONP & Observables for Remote Video Ads Server
  • Delivers Targeted Video Ads Based on Zip Code Radius
  • BarCode Scanner, UnserData & Compass Cordova Plugins
  • How to Use JQuery Plugins in Angular
  • Pinch Clouds to Expand & Contract
  • Angular Component Plays Embedded Videos
  • Allows Use of Full-Featured SASS
  • Angular ListView, Toolbars & NavBars
  • iOS7 Frosted Panels & HTML Games Like Chess
  • Angular Dialog Popup Component
  • Angular LocalStorage Component
  • How to Load External Website Using Angular
  • Angular Back Button for External Sites
  • Ability to Stream Video to Smart TV Sets


I have written a lot of Mobile Apps for clients using everything including React Native, Xarmin, Cordova, Ionic, Sencha Touch, PhoneGap, NativeScript, and all of the other common Mobile Frameworks. But these 3rd Party Frameworks are NOT needed at ALL. They are just add unnecessary bulk and create issues with each new release as I will demonstrate in this article.

The new approach to building Hybrid Apps is to create an iPhone App using Objective C or Swift in xcode and to build an Android App using C++, Java, or Kotlin in Android Studio and to place into these apps a Native-Browser Interface that will load another Non-Native language "App" that is written in JavaScript, HTML5, Angular, C# .NET, or C/C++ into that Native-Browser Interface

There are 3 Parts to a Hybrid Mobile App, namely, the Native iPhone App, the Native AndroidApp, and the Web Based Angular 8 App that is displayed in the browser interfaces in the native apps.

SwipeClouds® hybrid apps run on the device, and are written with web technologies (Angular, HTML5, CSS, JavaScript) and run inside a native container that employs the device’s browser engine (but not the browser) to render the HTML and process the JavaScript locally. A JavaScript-to-native abstraction layer, i.e., "Bridge," enables access to device features such as the accelerometer, camera and local storage. All of the native language code to access these native features has already been added for you in the SwipeClouds® sample I created for this article.

With the newest versions of XCODE for iPhone and Android Studio for Android the learning curve is about one week to build native apps for both iPhone and Android. And in SwipeClouds® the iPhone and Android Apps are given to you ready to compile. Because the methods we call from JavaScipt are all Native code it will always provide the fastest performance over any of the frameworks mentioned above.

The web based app is just plain HTML5, JavaScript and Angular. And an Angular runs much fatser than any of the referenced frameworks above.

In both the native code for the iPhone and for Android you can easily itercept any URL loaded and call any native lange methods and return back to the calling code like JavaSCript anything you want from the native language. This two-way communication from JavaScript to the native language and back to JavaScript from the native language is typically referred to as a "bridge" and eliminates any need to use any of the Frameworks above.

This "bridge" in Android in Java can be illustrated as follows:

// The shouldOverrideUrlLoading(WebView view, String url) method is deprecated in API 24
// and the shouldOverrideUrlLoading(WebView view, WebResourceRequest request) method is
// added in API 24. If you are targeting older versions of android, you need the former
// method, and if you are targeting 24 (or later, if someone is reading this in distant
// future) it's advisable to override the latter method as well.
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
    isReloading = true;
    try {
        url_actions(view, request.getUrl().toString());
    } catch (IOException e) {
    return true;

private void url_actions(WebView view, String url) throws IOException {
    if (!BOOL_OFFLINE && !DetectConnection.isInternetAvailable(MainActivity.this)) {
    //Show toast error if not connected to the network
    Toast.makeText(getApplicationContext(), getString(R.string.check_connection), Toast.LENGTH_SHORT).show();
    } else if (url.startsWith("mailto:")) {
        //By overriding this interface you can use any server to send an email
        view.getContext().startActivity(new Intent(Intent.ACTION_SENDTO, Uri.parse(url)));
    } else if (url.startsWith("tel:")) {
        //Use in hyperlink to launch phone dialer for specific number :: href="tel:+17862505136"
        Intent intent = new Intent(Intent.ACTION_DIAL, Uri.parse(url));

    //You can add Native Language Methods to do anything you want here!    

    } else {

And, this "bridge" in the iPhone in Swift code can be illustrated as follows:

func webView(_ webView: UIWebView,
             shouldStartLoadWith request: URLRequest,
             navigationType: UIWebView.NavigationType)-> Bool {
    guard let url = request.url else {
        return true

    if navigationType == UIWebView.NavigationType.linkClicked {
        let fileExtension = url.pathExtension
        if fileExtension.lowercased() == "pdf" {
            Downloader().load(URL: url, view: self.view)
            return false

    if (url.scheme == "mailto:") {
        let urlStr = (request.url!).absoluteString
        if let url = URL(string: urlStr), UIApplication.shared.canOpenURL(url) {
            if #available(iOS 10, *) {
      , options: [:], completionHandler:nil)
            } else {
        } else {
            return true
        return false
    } else if (url.scheme == "tel:") {
        let urlStr = (request.url!).absoluteString
        if let url = URL(string: urlStr), UIApplication.shared.canOpenURL(url) {
            if #available(iOS 10, *) {
      , options: [:], completionHandler:nil)
            } else {
        } else {
            return true
        return false

    //You can add Native Language Methods to do anything you want here!

    return true

The Non-Native language "App" code that loads into the browser interface in the iPhone (UIWebView or WxWebView) and in Android (WebView & WebChromeClient) can be just about any language you want. However the best languages for the hybrid portion of this approach are: JQuery Mobile, JavaScript, Angular, C# .NET, PHP, or C++. In the samples above I will use Angular and JQuery Mobile.

In Angular you can build really cool, full-feautured Angular Mobile Apps for the iPhone and Android where NO 3rd bridge is required. You can easily call from JavaScript any Native Language Objective C or Swift function and you can easily call from JavaScript any Native Language Java or Kotlin function. You DO NOT need any unnecessary 3rd Party Frameworks the the ones listed above.

This article demonstrates how to create Angular Mobile Apps that are lighter and faster and literally do anything you want them to do. For the main GUI in this Angular Mobile App I decided to use an amazing JavaScript canvas plugin by Graham Breach which I made some changes to for this project.  For scrolling I used the JQuery plugin iScroll v4.2 by Matteo Spinelli. If you are tired of the same, boring look and feel of most mobile app frameworks listed above, then checkout my approach, which doesn't have any Ionic, or any of the third-party componets listed above like Ionic.  The Angular Mobile App in this article is designed to motivate people to download the app and use the app MORE than once a week---why? Because it gives people access to millions of videos, TV shows and HD movies or their mobile phone or Smart TV where people can easily search and find any type of content they enjoy. And the app allows you to deliver videos from your YouTube Channel or any tube server that sell your product or service to anyone who has downloaded the app.

You can easily add my SwipeClouds component to any of the Frameworks listed above. like Ionic, to add floating  images in a cool canvas cloud to other Frameworks like Ionic. I will be posting several new npm options for this.  

To run the compiled code to see what the Angular Mobile App looks like just open the folder in Visual Studio as a website and you can see what the app looks like. Later, after you have created the project you can run it from Node.js. If you just want to see the working app I posted the compiled .apk file forAndroid on my website and you can just scan the QR Code below to wnload swipeclouds.apk on your Android mobile phone.

Image 2

I put a fully working demo of the SwipeClouds® Angular SwipeClouds Mobile App online on my SwipeClouds website at::

Watch a video I created to demonstrate some of the features of the SwipeClouds® Angular SwipeClouds Mobile App Video Framework at:

I believe that a mobile-app in Angular should have more than just the basics so my sample project includes:

  • Angular SwipeClouds® Interface That Works with Both Local & Remote Images
  • Access to Millions of Videos, TV Shows & HD Movies from Hundreds of Tube Servers
  • Local & Remote Ad Delivery System So You DO NOT Need AdMob or Any 3rd Party Ad System
  • Includes Chess Game & Ability to Add Any HTML5 Game
  • In App PatPal BiuyNow & Full Merchant Account Processing Screens
  • Angular Internal Browser for Loading Local & Remote HTML sources
  • Angular Cool-Looking ListViews, Toolbars & Navbars that Can Acess Any View
  • iOS7 Frosted Panels for a Really Cool iPhone Effect
  • Angular Wrapper for LocalStorage for Full-Database Features
  • Cordova Barcode Scanner (Full Java Source Code)
  • Cordova Compass to Motivate Repeated Use of App (5 Compasses & Full Java Source Code)
  • Cordova User Data Scrapper Scrapes User Data for Targeted Ads (Full Java Source Code)

Creating powerful Angular Mobile Apps is fast and easy. You just run Angular CLI and then unzip the file above and copy the contents into teh src directory created by the CLI and you have all the features above ready to go with full source code---WOW!  If you would like to download the compiled Android apk file you can find that on my SwipeClouds website at:

Main GUI - Angular Pinch to Resize Cloud

The main GUI is a SwipeCloud of floating images and you can swirl this cloud by swiping any of the images with your finger. Pinching the SwipeCloud with your fingers will increase and decrease the size of the SwipeCloud. This SwipeCloud is the main means of navigation for the Angular 5 Mobile App and clicking on any of the images in the SwipeCloud will load a different view, which, in most cases will load the VideoComponent View for that particular group of video feeds from any tube server that allows embedding.

Image 3
Angular 8 Mobile App with a Very Different Look & Feel
with A Novel Approach to Navigation. JQuery has a lot of
really cool, already-built CANVAS plugins like SwipeClouds, 
We set pinchZoom = true.

TouchDown(e: any) => {
  var tg = EventToCanvasId(e), tc = (tg &&[tg]), p;
  if(tc && e.changedTouches) {
    if(e.touches.length == 1 && tc.touchState == 0) {
      tc.touchState = 1;  tc.BeginDrag(e);
      if(p = EventXY(e, tc.canvas)) { = p.x; = p.y;  tc.drawn = 0;
    } else if(e.targetTouches.length == 2 && tc.pinchZoom) {
      tc.touchState = 3; tc.EndDrag();  tc.BeginPinch(e);
    } else { tc.EndDrag();  tc.EndPinch();  tc.touchState = 0; }


Cloud Collections... Each Cloud is a Theme

In the figure below you can see a variety of SwipeClouds® where each SwipeCloud represents a Theme. and each floating image, when clicked, loads into a ListView MILLIONS of Videos from over 100 tube servers like and others, TV SHows and HD Movies from hundreds of Tube Servers around the world that you can watch either on your mobiel phone or on any Smart TV.

All Of These SwipeClouds Are In Our Demo Mobile App in This Project

Image 4 

For eample you might might make one of the floating images your Channel on YouTube or any Channel you have on any Tube Server. Or, you might create a SwipeCloud of Medical Images where each image is a different Channel of the best Medical Videos on YouTube or any Tube Server. Or you might create a SwipeCloud of Beauty Images where each image loads all of the video from Beauty Blog Channels. let's face it, in today's world people want to watch a video as opposed to reading inormation and this Angular SwipeClouds® Framework allows you to easily deliver MILLIONS of targeted videos. The images in the SwipeCloud can be local in the app or retrieved remotely from different servers or you can use text instead of an image in the SwipeCloud of any size, font, or color. In the figure below you change from one SwipeCloud to another using the SwipeClouds Button in the header next to the button for changing backgrounds.

Animated & Fullscreen Video Backgrounds

Since our main GUI is a HTML5 Canvas we can easily apply animated gif files as backgrounds or a fullscreen video background. We can fill the entire background of our canvas with a video stream from a variety of sources such as local or remote video files or from the front or back camera on the phone itself.  To add a video background simply use Fabric.js video functions applied to the canvas. To add video or animations INSIDE the SwipeCloud you would use the centreFunc in the options array oopts that allows you to create your own callback function to draw on the canvas between the front and back tags with an animation or video.​​​​​​ as follows.

oopts = { ...  centreFunc: this.RSquare, ... }

RSquare(context2D, width, height, centreX, centreY) {
  // your code here

// In our Angular App we have a RSquare function 
// to demonstrate adding an animation:
RSquare(c, w, h, cx, cy) {
  let d = ((new Date).getTime() % 10000) * Math.PI / 2500;
  c.setTransform(1, 0, 0, 1, 0, 0);
  c.translate(cx, cy);
  ... etc.

Image 5

As shown in the figure above, you can create Your Own Animations or Stream Fullscreen Video from the camera or other source using the centreFunc property in the options array oopts as follows:

oopts = { ... centreFunc: this.RSquare, ... }

The figure on the left shows an animated square rotating using the callback funtion RSquare  as the centreFunc. You can create any callback function to create animations or to add a video layer with any opacity and size using Fabric.js video functions. 

In the SwipeCloudsHeaderComponent when the Backgrounds Button shown above is clicked we cycle through to the next background as show below.   Image 6

nextBackground(event: any) => {
  let g = this.LocalStorage.get('settings_swipeclouds');
  if (g) {
    if (g.bgimage + 1 < Config.DATA_BACKGROUNDS.length) { 
      g.bgimage = g.bgimage + 1; } else { g.bgimage = 0; }
      this.LocalStorage.set('settings_swipeclouds', g);
      document.getElementById('swipeCanvas').style.backgroundColor = '#000000';
      document.getElementById('swipeCanvas').style.backgroundImage = 'url(./assets/img/'
      + Config.DATA_BACKGROUNDS[g.bgimage] + ')';
      document.getElementById('swipeCanvas').style.backgroundSize = 'cover';

In the SwipeCloudsComponent below we have loadBackground that was called from the SwipeCloudsHeaderComponent above.

loadBackground() => {
    let g = this.LocalStorage.get('settings_swipeclouds');
    document.getElementById('swipeCanvas').style.backgroundColor = '#000000';
    document.getElementById('swipeCanvas').style.backgroundImage = 
       'url(./assets/img/' + Config.DATA_BACKGROUNDS[g.bgimage] + ')';
    document.getElementById('swipeCanvas').style.backgroundSize = 'cover'; // 100% 100%;
    document.getElementById('swipeCanvas').style.cursor = 'pointer';
    // $('swipeCanvas').css({ 'cursor': 'pointer' });
} // end loadBackgroun

Video Layouts for Portrait & Landscape Views

Layouts for Portrait vs. LandscapeI decided that the best layout for video and the other views was to retain the Toolbar and Navbar in the Portrait Orientation and to Hide them in the Landscape Orientation. You can see this below. I added a button and code to stream the selected video from your mobile phone to any smart TV set using pairing from the tube server's site.

Image 7

I also used this approach for the SwipeClouds view. It made sense that if the user needs access to the Toolbar or Navbar from the Landscape Orientation the user just rotates the phone to the portrait and the controls appear.

Image 8

Create This Angular App - Install Node.js

Let's get started to building this Angular Mobile App by downloading Node.js which includes npm at

At this point if you tried using npm it will most likely give you the dreaded and now famous error:

npm ERR! Windows_NT 6.1.7601  

There are numberous working fixes for this error if you are behind a proxy but if you are'n't behind a proxy then trying to fix this error can make you crazy. Run the the commands below in a CMD window launched as ADMINISTRATOR:

npm config delete http-proxy
npm config delete https-proxy
npm config delete proxy -g
npm config delete http-proxy -g

npm config set registry ""
npm config set strict-ssl false

If you still get this error after installing npm: 

        throw er; // Unhandled 'error' event</code>

It is most likely due to your not using the correct CodePage on Window 7 or higher. On Windows the Code Page should be set to 850, NOT 437, BUT be careful in setting the Code Page to 850 since if you do this incorrectly your Windows computer may NOT boot up again. Research the correct way to set Code Page to 850 before attempting this.

Angular-CLI for Angular

I really dislike companies like Google telling me what my app should look like or what IDE I should use.  The purpose of this article is to walk beginners through creating an Angular App using CLI so let's start.

Install Angular CLI which will also install Angular's "ng" command globally on your system as shown below.

At this time Angular should install with the commands below. I won't go into installing Angular at this time because you can find plenty of documentation on it on the Internet. I will keep the focus of this article on the source code for Angular Mobile Apps.

Directions for installing Angular-CLI are at:

// This will install Angular-CLI
npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

To verify whether your installation
completed successfully, you can run:

ng version

@angular/cli: 8.2.2
node: 10.16.0
os: win32 x64

Install Angular SwipeClouds® Mobile App

Download and unzip the file "" at the top of this article and place the unzipped folder 'mobile-app' into whatever directory you use for your Angular projects.  On my computer I have a directory called "Angular." The name of this directory can be anything you want to call it. From inside that directory using the CMD prompt in administrator mode and run the following command in the mobile-app folder as follows:

Select a folder - I used C:\Angular and put the unzipped 'mobile-app' folder in there and run:

C:\Angular>mobile-app>npm install 

This will install the node_modules folder which is very large so be patient. Next we will use Visual Studio Code IDE which works nicely on both Winows and Mac computers. and build the SwipeClouds Mobile App in this editor.

Installing & Using Visual Studio Code IDE

I used Microspoft's Visual Studio Code IDE which you can easily download and install from:

Open Visual Studio Code and select the project folder "mobile-app" and open the Integrated Terminal Window as shown below. In the Integrated Terminal Window in Visual Studio Code run the command below which will create your "dist" directory for your finished project.

Image 9

Then run from the IDE the following commands:

C:\Angular>mobile-app>ng build
C:\Angular>mobile-app>ng serve

This will start our Node.js server running on port 4200 so if you open your Chrome Web Browser to http://localhost:4200 you will see the application running. This will run the default Angular App that comes with Angular CLI. 

What Can Wrong When You Run The App?

Be caeful in Angular when working with Router. If you get the ERROR Mesage:

// ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'startsWith' of undefined

Then it is almost always a Router error like 'isActive' because of changes in Angular 5 to Router funtionality. For example there is no more 'events.url' property:

this.router.isActive(evemts.url, false)      ERROR: 'startsWith' error
this.router.isActive('/swipeclouds', false)  WORKS!

Many users will also get the error:

Module build failed: TypeError: Cannot read property 'newLine' of undefined

When you get this error it is typically caused by either an incorrect version of Angular-CLI. One fix that works is to run:

npm uninstall-g @angular/cli
npm clean cache
npm install Last-g @angular/cli@
then remove the local node_modules folder and run:
install npm–Save-dev @angular/cli @Last
npm install

You must stay current with the latest changes at:

In the sample project I left the includes for Cordova. If you leave these Cordova includes in the "index.html" then you will get the message below - DO NOT HIT THE "OK" BUTTON or the app will not load. Just hit the "CANCEL" button and the app will run in the browser.  Just slash out these two include lines in devlopment and unslash them when you build for production.

Image 10

How to Compile Angular 5 Apps as Mobile Apps Using Ahead-of-Time Compilation (aot)

Next we will add the source code for the source code for our mobile app to this default project. Download the zipped file posted above and empty the contents of the zipped "src" folder into the src folder of the project.  And again run the command:

C:\Angular>mobile-app>ng serve

I will jump ahead here to explain how to build your "www" folder for mobile. The BIG SECRET to compilling an Angular App for Mobile that isn't obvious. To build an Amgular App so it will work as a Mobile App in xcode or Android Studio is setting up the pathways correctly. Look at the index.html from the src folder you added to the project and notice the following:

<script>document.write('<base href="' + document.location + '" />');<script>

Next go into the ".angular-cli.json" file and change the value for the "outDir" property from "dist" to "www"as shown below.

"apps": [                              
      "root": "src",                             
      "outDir": "dist",  Change to: "outDir": "www",

Next we want to bundle our Angular Moble App for importing into XCODE (iPhone) or Android Studio. I will just discuss Android Studio here to keep this article shot since xcode is very similar. Bundles are generated by default to projectFolder/dist/. But this won't work for our mobile app. To create our MOBILE production build we need to use some extra commands: --base-href --aot.
It is NO LONGER NECESSARY TO SPECIFY --aot since it is now the default with --prod.

Run in command line when directory is projectFolder
flag prod bundle for production & flag aot enables the
ahead-of-time compilation also known as offline compilation.

ng build --prod --base-href /$ROOT/Angular/mobile-app/www/

In the pathway above you will notice that I created a folder "Angular" on my "C" drive and created my "mobile-app" folder inside that directory. If you have your project in a different folder then adjust the pathway above accordingly. The contents of the generated "www" folder will go into our "www" folder in Android Stuidio and all the pathways will actually work. Viola!

Routing in Our Angular Mobile App

We have only a few simple views in our app, namely, swipeclouds, video, legal, cordova, and blank. In the VideoView the user can select videos to watch in the responsive Angular video Player contained in the video view. And blank is used as a fudge to keep down the codding.

// We have three real views and one fake view, i.e., blank:
let NavigationExtras: Array;
const routes: Routes = [
    {path: '', pathMatch: 'prefix', redirectTo: 'swipeclouds'},
    {path: 'swipeclouds', component: SwipeCloudComponent},
    {path: 'video', component: VideoComponent},
    {path: 'cordova', component: CordovaComponent},
    {path: 'browser', component: BrowserComponent},
    {path: 'rss', component: RssComponent},
    {path: 'reader', component: ReaderComponent},
    {path: 'ads', component: AdsComponent},
    {path: 'blank', component: BlankComponent}

Getting Url from Router Events to Set
Headers & Navbars for Each View

We need to place the Headers and Navbars above our <router-outlet> so we will read the url and view from the Router. The angular router events has different classes, and what gets passed to the subscription from the observable can either be NavigationEnd, NavigationCancel, NavigationError, or NavigationStart.
The one that will actually trigger a routing update will be NavigationEnd so we will stay away from using instanceof or because after minification class names will get mangled it will not work correctly. We will use the router's isActive function instead, to show and hide the Headers and Navbars based upon the loaded view as shown below:

// Correct way to subscribe router events and get url from router event
this.routerEventSubscription = any) => {
     this.show_swipecloud = false;
     // etc. ...
     // if (this.router.isActive(event.url, false)) {  NO Longer Works in Angular 5
     // Fixed
     if (this.router.isActive('/swipeclouds', false)) {
          // true if url route is active
          if (event instanceof NavigationStart) {
               // this.previousUrl = event.url;
               if (event.url.indexOf('/swipeclouds') > -1) {
                    this.show_swipecloud = true;
                    // etc...

Angular 8 Wrapper for LocalStorage as Service to Pass Data from Java or Objective-C Threads WITHOUT Cordova? Yes!

For use throughout our mobile app to pass data I decided to use localstorage so I created this simple class for localstorage that imports Injectable. So when you see references to localstorage we are just calling this class in our app.  

With our sample app is launched it runs a thread in Java or Objective C to scrap User Data before the app is launched and then our app passes that data to a web page init.html designed to received URL Parameters and store the data in localStorgae from JavaScript inside init.html. In our app init.html after receiving and storing the URL Parameters in localStorgae, init.html then launches our index.html. I decided to run a thread in Java and Objective that listens for some event and then I pass some data related to that event to my JavaScript by simple passing the data as URL Parameters to init.html with a parameter to tell init.html NOT to call index.html after storing the passing data in localStored using JavaScript and to my amzement it doesn't interfere with the app in any way and the data appeasrs instantly in the app. in localStorage. This the best method I have found to return data from listening threads in Java or Objective C back to JavaScript that doesn't require Cordova or any user initiated action.

import { Injectable } from '@angular/core';

export class LocalStorageService {
  private isLocalStorageEnabled: boolean;
  private isLocalStoragePresent: boolean;

  constructor() {
... etc

Using JQuery & JQuery Plugins in Angular

There are several ways to add JQuery and JQuery Mobile to Angular 5 but I use a simple one that has always worked for me. I place the links right inside the header of the index.html file and all of the supporting .js files and .css files inside the "assests" folder in the project. 

The Angular SwipeCloudComponent Canvas

To create this Angular component we use Microsoft's typeScript as follows: To do this we move into our "components" folder and generate the basic files using the command below in another instance of our Integrated Terminal Window.

C:\Angular>mobile-app>src>app>components>ng generate component swipe-clouds 

And in our typescript file, swipe-cloud.component.ts, we add our canvas and JQuery with a simple declaration at the top of this file as follows:

declare var TagCanvas: any;
declare var jQuery: any;
declare var $: any;

We instantiate our canvas as follows in the constructor
where 'swipeCanvas' is the ID of our canvas elemnt:

try {
  TagCanvas.Start('swipeCanvas', Config.DATA_CLOUDS[0], Config.DATA_CLOUD_OPTS);
} catch(e) {}

We can access our canvas either through JQuery or directly using plain JavaScript through "TagCanvas" which is very straightforward. In a similar manner we create a SwipecloudHeaderComponent that has buttons to rotate through our array of clouds and to chnage the backgrounds of our canvas. The click event of the Clouds Button in this header component is shown below. I used query parameters and ActivatedRoute to receive those parameters in the same view we are sending them from as shown below:

nextCloud(event) {
   let s = this.LocalStorage.get('cloud_swipeclouds');
   if (s) {    
      if (s.cloudid + 1 < Config.DATA_CLOUDS.length) { 
         s.cloudid = s.cloudid + 1; 
      } else { s.cloudid = 0; }
      this.LocalStorage.set('cloud_swipeclouds', s);
   setTimeout( () => {
          {action: 'nextcloud', actionid: s.cloudid }]);
   }, 1);        

In the click event above we get the ID of the next cloud in our cloud array, Config.DATA_CLOUDS, we cheat a bit by telling our router that we want to load our "blank" view and then we tell our router to go back to our current view passing the parameters "action" and "actionid" to our current view.

oopts = {shape: 'sphere',zoom: 1.0,maxSpeed: .04,...}  
// get URL parameters
this.sub = this.route
.subscribe(params => {
    const _action: any = params['action'];
    const _actionid: any = params['actionid'];
    // alert('_action: '+_action);
    if ((_action === 'undefined') || 
          (_actionid === 'undefined')) {
    } else if(_action === 'nextcloud') {
    try { this.cloudID = _actionid; } catch(e) { }
    } else if(_action === 'drag') {
    this._drag = _actionid;
    if(_actionid === 'on') { this.oopts.dragControl = true; } 
    if(_actionid === 'off') { this.oopts.dragControl = false; }
    try { TagCanvas.Start('swipeCanvas',
                               Config.DATA_CLOUDS[this.cloudID], this.oopts);
    } catch (e) { }
    } else if(_action === 'shape') {
    const s = _actionid;
    try { TagCanvas.Start('swipeCanvas',
                              Config.DATA_CLOUDS[this.cloudID], this.oopts);
    } catch (e) { }
(err) => { 
console.log('error!', err);

I should point out that there are many ways for the swipe-cloud-header to send the click event to the swipe-cloud component but because of the relative positioning of these componets it turns out that this approach worked best for me. For changing backgrounds I decided to directly change the background using getElementById('swipeCanvas'):

nextBackground(event: any) => {
  let g = this.LocalStorage.get('settings_swipeclouds');
  if (g) {          
    if (g.bgimage + 1 < Config.DATA_BACKGROUNDS.length) {
         g.bgimage = g.bgimage + 1; } else { g.bgimage = 0; }
     this.LocalStorage.set('settings_swipeclouds', g);
        = '#000000';
        = 'url(../../assets/img/'
          + Config.DATA_BACKGROUNDS[g.bgimage] + ')';
        = 'cover'; 

Angular Data Service & VideoComponent

The VideoComponent will retrieve video feeds from the hundreds of tube servers that allow enbedding in webpages. In addition to displaying millions of movies and all kinds of videos this code will also display YOUR monetized videos from these Tube Servers like YouTube among movies and other videos.  The structure for our feeds is as follows:

let s = this.LocalStorage.get('feeds_swipeclouds');
if (s) {
    let s = this.LocalStorage.get('feeds_swipeclouds');
              this._category = s.category; // feed category
              this._mcat = s.mcat;         // movie or video subcategory
              this._start = s.start;       // number of ad to start with
              this._max = s.max;           // maximum feeds to retrieve
          this._pc = s.pc;             // postal code for ads
          this._rad = s.rad;           // postal code radius

Notice that I used the postal code above and the postal code radius for delivery of trageted ads to the phoneuser's current location. I have found that selling video ads (TV Spots) to air  in a mobile app like this one works best by selling a collection of zip codes and a zip code radius of say 50 miles. That means that the video ads retied from the server will be ads set to match those zip codes and zip code radius from local advertisers. Let's begin by looking at how we load the Video Compoent View. In our Swipe Clous Component, clicking on any of the floating images in our Swipe Cloud that load videos causes the CallRoute method to be called as shown below:

<a ((click)="CallRoute($event,'dtv_flyingbikes')" href="#" title="Hover Boards" type="button">
   <img alt="Icon 01" src="assets/img_drones/1_flyingbikes.png" />

CallRoute(event, categoryRef: string) {
let s = this.LocalStorage.get('feeds_swipeclouds');
if (s) {
    s.category = categoryRef; 
    s.start = 0;
    this.LocalStorage.set('feeds_swipeclouds', s);
this.cloudsrouter.navigate(['/video', {category: categoryRef, start: 0}]);

As you can see above we call navigate on the cloudsrouter and pass in our url parameters, namely, "category" and "start" into the Video View. In the Video Component we receive the passed url parameters and call getFeedsl() or getFeedsLocal() from our data service as follows:

// get URL parameters
this.sub = this.route
  .subscribe(params => {
  this._category = params["category"];
  this._start = params["start"];
  // This allows you to stream to Digital TV sets!
  if (this._category === 'playontv') {
    let z = this.LocalStorage.get('selected_video_swipeclouds');
    if (z) {
      if (z.linkType === 'embed_youtube') {'' + 
                      z.linkValue, '_self', '', true);
        // add this to make back button work correctly!
      } else if (z.linkType === "channel_youtube") {'' + 
                     z.linkValue, '_self, '', true);
        // add this to make back button work correctly
  // You should retrieve data using JSONP
  if (Config.DATA_SOURCE === 'remotejsonp') {
  if (Config.DATA_SOURCE === 'localjson') {

The call to our data service, DataObservableService, will retrieve a list of videos locally or remotely from Tube Servers that allow embedding of videos in web pages.  The retrieval of data locally is trivial so I will focus on retrieval of remote data and this app's use of JSONP to accomplish which is the preffered method for retrieving data as shown below:

constructor(private http: Http,
  private _jsonp: Jsonp,
  private sanitizer: DomSanitizer,
  private LocalStorage: LocalStorageService) {
    this.headers = new Headers(
    'Content-Type': 'application/json',
    'Accept': 'q=0.8;application/json;q=0.9',
    'async': true,
    'dataType': 'jsonp'
  this.options = new RequestOptions({ headers: this.headers });
getServiceFeedsJsonp(): Observable<any> {
  let s = this.LocalStorage.get('feeds_swipeclouds');
    if (s) {
      let s = this.LocalStorage.get('feeds_swipeclouds');
      this._category = s.category; // feed category
      this._mcat = s.mcat;         // movie or video subcategory
      this._start = s.start;       // number of ad to start with
      this._max = s.max;           // maximum number of feeds to retrieve
      this._pc = s.pc;             // postal code for ads
      this._rad = s.rad;           // postal code radius
  const jsonp_base = Config.JSONP_DOMAIN1;
  let jsonp_param = 'cat=' + this._category +  '&mcat=' + 
    this._mcat + '&start=' + this._start + '&max=';
  jsonp_param = jsonp_param + this._max + '&pc=' + this._pc 
    + '&rad=' + this._rad + '&methodName=Feeds&jsonp=JSONP_CALLBACK';
  let jsonp_rnd = '&rnd=' + this.getRandomInt(1, 500);
  let jsonp_url = jsonp_base + jsonp_param + jsonp_rnd;
    return this._jsonp
      .get(jsonp_url, this.options)
      // .retry(this.retryCount) NO Longer in Angular 5
      .map( (res) => {
        const feeds = res.json();
        return feeds;

JSONP Video Server for Angular Advertsing

Some people may have trouble getting JSONP to work so I will explain some of the things you need to know. You can run a JSONP server easily on your server with a few lines of PHP code or you can use C# .NET etc.

The design concept I used for my JSONP server was that instead of having multiple generic handlers or a single handler with lots of switch/if statement I decided to use a single generic handler with Factory Design Pattern. The Factory returns a class based upon the methodName that is passed which is used to only handle that request. The Factory reads the methodName and its class from the web.config file and instantiates the handler. The generic handler requests the Factory for the handler and performs some pre/post processing.

Here is a link to an article I wrote on creating a JSONP Videos & TV Commercials server using C# .NET which is what I used in testing the JSONP code in this Angular Mobile App to stream MILLIONS of tube servers videos, movies, TV shows, and TV commercials:

JSONP Server to Stream Videos. Movies, TV Shows, Tube Channels, and TV Ads from Hunndreds of Tube Servers:
 C# .NET JSONP Server

Most people have problems getting this one part of the url correct:


Look at the "jsonp" in the line above - the letters is determined by your JSONP sever and will vary from server to server. In my C# JSONP Server I used "jsonp" but you will also see in other servers "callback", or just "c" but its value is based on the server. In other words, don't just use what you commonly see in articles like "callback" but check to see what the JSONP server you are connecting to requires.

The Angular Cool-Looking ListViews

This is pretty straightforward and we simply use *ngFor to create our ListView in our Video componet as follows:

<li *ngFor="let feed of feeds;let i = index" data-icon="false"
    data-role="listview" []="i == selectedRow"&g 
   <div [ngClass]="['duration-cover']" (click)="clicked($event, feed, i)">
      <div [ngClass]="['duration-left']">{{feed.duration}}</div>
      <img [ngClass]="['rounded-img']" src="{{feed.image}}" />
    <h3 [ngClass]="['ellipsis']">{{feed.title}} </h3>
    <p [ngClass]="['ellipsis2']">{{feed.shortDescription}} </p>

Unlike most listviews I decided to place the Click on the image in the row INSTEAD of the row itself so that I can easily move the list up and down without accidently click the row. I will be updating the code to load this listview in the near future with lots of options to modify how this listview displays your monetized video ads from your channels on tube servers among the videos and movies users request so you can make money from views and selling your own products in the videos from your channels on these tube servers.

There are 2 very different ListViews in our sample Angular Mobile App, namely, one that displays feeds that when clicked with load the view in the same view and another type that load html and text information with only links to videos. For example, if you click on any image in the Medical Cloud it will load text and HTML information about that topic in the RssComponent View created to display text and HTML as opposed to video.

Inserting TV Ads Into ListViews with Spacing

We insert TV Ads into the ListViews on a repetitive basis where after inserting a TV Ad we skip 4 rows and then repeat. This allows us to include TV commercials in a non-intrusive way as show below:

  getFeeds() {
    this.loading = true;
        (res) => {
          this.loading = false;
          if ((res) && (res !== 'undefined')) {
            this.feeds = res;  // feeds: Object[];
            const ads = this.LocalStorage.get('insert_ads');
            if (ads) {
              const skip_n = 4; // skip every 4 videos then insert ad
              let insertIndex = skip_n;
              for (let adsIndex = 0; adsIndex < ads.length; adsIndex++) {
                if (insertIndex < this.feeds.length) {
                  this.feeds.splice(insertIndex, 0, ads[adsIndex]);
                  insertIndex = insertIndex + skip_n + 1;
            const atabs = res;
            if ( atabs[0].link ) {
              this.selectedLink = atabs[0].link;
     = this.sanitizer.bypassSecurityTrustResourceUrl(this.selectedLink);
        (err) => { this.loading = false; console.log('error!', err); },
    this.selectedIdx = 0;

Playing Embed Videos in Angular

This is pretty straightforward and we simply use bypassSecurityTrustResourceUrl in our Video componet to retrive a safe "url" object as follows:

clicked(event, pageRef: any, zindex: any) {
    this.setClickedRow(zindex); = this.sanitizer.bypassSecurityTrustResourceUrl(;
    let z = this.LocalStorage.get('selected_video_swipeclouds');
    if (z) {
        z.linkType = pageRef.linkType;
        z.linkValue = pageRef.linkValue;
        this.LocalStorage.set('selected_video_swipeclouds', z);

I created an Angular Tabbed NavBar Compoent, namely, VideoNavbarComponent, and for our Video Compoent we have Prev and Net Tabs that work as shown below to next the next group of videos from out JSONP Server:

<li type="button" class="bcolor_red"><a (click)="prev($event, 'prev')" data-icon="arrow-l">Prev</a>
<li type="button" class="bcolor_blue"><a (click)="next($event, 'next')" data-icon="arrow-r">Next</a>

next(event, pageRef: string) { 
let s = this.LocalStorage.get('feeds_swipeclouds');
if (s) {
  s.start = s.start + s.max;
  this.LocalStorage.set('feeds_swipeclouds', s);
  setTimeout( () => {
    this.videonavbarrouter.navigate(['/video', { start: s.start }]);
    }, 1);

BrowserComponent, Chess & HTML5

I also added to this Angular Mobile App a fantastic html Chess Game Stefano Gioffre. The big advantage to adding JQuery to Angular is that there are hudreds of cool html games like chess that can be easily dropped into the sample prject by simply loading them into an iFrame. So I decided to add a BrowserComponet that contains an iFrame in the html as shown below that can be loaded with local or remote webpage. 

<iframe id="iframe" name="iframe" [src]='page' scrolling="yes"
    marginheight="0" frameborder="0" webkitallowfullscreen
    [attr.width]='_zwidth' [attr.height]='_zheight'
    mozallowfullscreen allowfullscreen></iframe>

And in the BrowserComponent we subscribe to route as follows; 

    this.sub = this.route
      .subscribe(params => {
        this._zwidth = window.innerWidth;
        this.zurl = params['url'];

And loading the html chess is as simple as the following:

    this.cloudsrouter.navigate(['/browser', {name: 'chess', 
      url: './assets/chess/chess.html'}])

Using the Browser Component you can easily drop in already existing html5 games thata you don't have time to rewrite in Angular. The BrowserComponent lets you easily display html that is local or remote from your license agreement to existing games like chess shown below.

Image 11

In App PayPal BuyNow & Order Processing

In my SwipeClouds® Framework I used the Angular Browser Component to add In App PayPal BuyNow and General Merchant Account Processing by simply loading the JavaScript Web Pages I use for both PayPal and my other merchant accounts.

Image 12

Mobile App Themes & Frosted Panels

In my SwipeClouds® Framework I used JQuery Mobile's ThemeRoller to create the following themes as shown below:

  • light
  • dark
  • ios7light
  • ios7dark

The Toolbars and Navbars are shown below for these themes.

Image 13

The next question I had to answer was how I woulkd switch between these themes in the mobile app and the technique that worked the best was to set in the index.html page the following:

<link id="link_swipeclouds" href="" rel="stylesheet" type="text/css" />

Then to change a theme we would simply call changeTheme as shown below::

// (click)="changeTheme($event, 'ios7light')"
changeTheme(event, themeRef: string) {
    let s = this.LocalStorage.get('settings_swipeclouds');
    if (s) { 
        s.themeid = themeRef;
        this.LocalStorage.set('settings_swipeclouds', s);
    const _path = './assets/styles/themes/' + themeRef + '.css';
    $('#link_swipeclouds').attr('href', _path);

How to Create iOS7 Frosted Panel Look

By clicking the "Setup" button on the top-left of the main screen you will slide out the frosted control panel where you can set other options for this Angular Mobile App.

Image 14

I really like the frosted panel look and feel in iPhones
so I added to this mobile app. To create the cool
iOS7 Frosted Panel Look I found there are 3 "tricks"
that I used, namely:

  • Set panel z-index to -1 in order to
    prevents controls from being blurred
  • Set Panel's Background to Transparent
  • Blur what is under the panel

In order to blur or frost what is under the sliding panel
I used 2 classes, namely, backfrost_on and backfrost_off,
that I add and remove to scroller_player which is the
<div> tag that holds the screen content and you can
see this code working nicely in the Angular Mobiel App.

You will also notice that I placed the controls on a
sliding frosted panel in this mobile app with its
own custom scrollbar.

This is accomplised in the app as foolows using a simple class:

class="frosted ui-panel"

Cordova & PhoneGap Plugins

I included 3 Cordova Plugins with full Java Souirce Code in this project. You DO NOT have to include these plugins in your own project. If you do want to add these Cordova Plugins then download the android file at the top of this article and which includes the Java Source Code for the Cordova Plugins below and add that to Android Studio. I will post in the next week or so the Objective C versions of these plugins for the iPhone and XCODE coompilier. Notice that since we are adding the Java Source Code directly to Android Studio for these plugins all we need to call them is to use "cordova.exec" in javascript.

  • User Data Plugin - SCRAPES user data including zip code & cross references with free databases to retrieve over 400 data points about each mobile user so you can target your monetized video ads from YouTube and other Tuber Servers to that user at no cost to you.
  • BarCode Scanner Plugin - Uses camera's zoom to help scan QR Codes on Smart TVs for order processwing & installing our mobile app
  • Compass Plugin - Gives users 5 different compasses to choose from to motivate user to repeatedly use mobile app
  • Coming Soon - I will be adding another plugin with full source code to this sample mobile app shortly that will install from the app my free SwipeClouds® Cable Guide on Smart TVs that will display your monetized videos in addition to regular TV programming in a cable guide you can customize on any smart TV.

Clicking on a floating image in the swipecloud can directly launch a Cordova Plugin. But for the purposes of illustrating the Cordova Plugins in the attached sample Anuglar Mobile App I thought I would create a scrolling list of all of the included Cordova Plugins from an array that describes the plugins in our app as shown below.

this.cordovatools  = [
  title: 'Cordova User Data Plugin Dialog',
  description: 'Displays Scrapped User Data in Java Dialog',
  linkValue: 'showUserDataListView',
  image: '1_infodialog.png',
  rank: 100
  title: 'Cordova User Data Plugin JSON',
  description: 'Returns Scrapped User Data in JSON Format',
  linkValue: 'getUserDataJson',
  image: '1_infojson.png',
  rank: 99
  title: 'Cordova Compass Plugin',
  description: 'Different Compasses',
  linkValue: 'compass',
  image: '1_compass.png',
  rank: 98
  title: 'Cordova Barcode Scanner Plugin',
  description: 'Barcode Scanner',
  linkValue: 'scanner',
  image: '1_scan.png',
  rank: 97

I created this list of plugins to illustrate to the reader how to make *ngFor work with data arrays by converting the data using the following:

  generateArray(obj) {
    return Object.keys(obj).map((key) => {
      return obj[key];

So by using "generateArray(obj)" we can then use *ngFor to create our list of Cordova Plugins.

Image 15

In this Angular Mobile App I call these Cordova Plugins from a listView of Cordova Plugins shown above. We have to create an Array from our static data describing these plugins using "generateArray" in order for our *nfFor loop to work as shown below. I recommend writing your own Java Cordova cdoe in Android Studio and using Cordova's bridge to call it as shown below.

// Our listView of Cordova Plugins Using *ngFor in html
<li *ngFor="let tool of generateArray(cordovatools)" data-icon="false" data-role="listview">
  <div [ngClass]="['duration-cover']" (click)="CordovaPlugin($event, linkValue)">
    <img [ngClass]="['rounded-img']" src="../../../assets/img/{{tool.image}}" />
  <h3 [ngClass]="['ellipsis']">{{tool.title}}</h3>
  <p [ngClass]="['ellipsis2']">{{tool.description}}</p>

// In our cordova.component.ts file
import ...
declare var cordova: any;

  CordovaPlugin(event, categoryRef: string) {
    let _param = 'User Data';
    if (categoryRef === 'showUserDataListView') {
      cordova.exec(this.showUserDataSuccess, this.showUserDataFailure, 'UserDataPlugin', 
      'showUserDataListView', [_param]);
    } else if (categoryRef === 'getUserDataJson') {
      cordova.exec(this.getUserDataJson, this.showUserDataFailure, 'UserDataPlugin', 
      'getUserDataJson', []);
    }else if (categoryRef === 'compass') {
      _param = 'Compass';
      cordova.exec(this.showCompassSuccess, this.showCompassFailure, 'CompassPlugin', 
      'showCompass', [_param]);
    } else if (categoryRef === 'floatcompass') {
      _param = 'float';
      cordova.exec(this.showCompassSuccess, this.showCompassFailure, 'CompassPlugin', 
      'floatCompass', [_param]);
    } else if (categoryRef === 'scanner') {
      // this.cordovarouter.navigate(['/scanner']);
      cordova.exec(this.showScannerSuccess, this.showScannerFailure, 'BarcodeScanner', 'scan', []);
  } // end CordovaPlugins

Cordova TV Barcode Scanner Plugin

I added a Cordova BarCode Scanner Plugin to our Angular Mobile App. You have in the download at the top of this article all of the Java source code for all of the Cordova Plugins for Android including this barcode scanner. You should be aware that since you have all of the source code for all of the plugins and your are adding that Java code to your Android Studio that you can now call these DIRECTLY by just calling "cordova.exec" and which makes things easier.

One Way to Help Distribute Your Angular SwipeClouds Mobile Apps

My company has tested various ways of distributing and making money with mobile apps in the last few years and one way that does work is to create a one- to two-minute videowith an aspect ratio of 1280 x 720 that has a QR Code to allow viewers to download and install your mobile app. Use one QR Code for both Android and iPhone where your link in the QR Code goes to a web service that records type of device then redirects to your Andoid .apk or iPhone .ipa file on your own server or on one of the many shareware sites that allow mobile apps.

I don't reccommend using your Google's Play Store or Apple's App Store links for your QR Codes. Your download links for QR Codes should be to your own server or to sites that won't close down your accopunt if you aren't politically coorect enough for them.

Put your video with your QR Code on and which are the two best tube server sites we have found for this purpose. Youku is the largest television network in the world and it reaches consumers who will buy almost anything.

The Android Mobile App in the sample project with this article includes a Cordova BqarCode Scanner that uses the camera zoom to make it easy for people to scan QR Codes on their Smart TV Sets from from their sofas without having to get up close to their TV set. After a TV viewer has scanned the QR Code on their TV Set and install your mobile app you can then easily stream TV Commercials, i.e., videos, to their mobile phones and Smart TV sets if those users grant you permission to do so. We have found in testing that most people don't mind the occassional ads because among those video ads are videos and movies that they want to watch.

Add QR Codes to Your YouTube Videos

If you have any videos on YouTube or elsewhere on the web that sell products then you should have a QR Code on those videos that allow viewers to order your products when the QR Code is scanned. I will add to this article shortly a sample QR Code and Angular code behind it that will do the following when scanned:

  • Allow Viewers to Order Your Product
  • Popup That Offers Viewers Your Incentive to Install Your Mobile App
  • Installs Your Mobile App After Order is Placed with Viewer's Consent


Image 16

Cordova UserDataPlugin for Zip Radius Ads

Although making Cordova Plugins is NOT part of this article I will briefly outline one of the incuded Cordova Plugins in this project the reader may find helpful. It is important when a user downloads your app to collect, with the user's permission, as much useful data as possible. You should provide a clear and easy-to-understand description of the data you collect and how you use it in your Terms of Service (TOS) and make users scroll your TOS and click they have read and understand it.

In my Android UserDataPlugin I call a AlertDialog in Java on Android and Objective C on the iPhone with a scrolling list of this data. The ability to deliver targeted advertising in your app always increase revenues. In my own expereince I have found that retrieving the user's zip code is the best way of delivering targeted ads within a given zip radius of the user's zip code. The UserDataPlugin collects the data below and uploads part of that data to a server for cross referencing with various databases such as the census database, the Polical Action Committe databases (PAC database from the GAO), the state databases like the DMV (Dept of Motor Vehicles), etc. Of all these databases we have found the U.S. Government's free PAC database to provide the most detailed and intimate information on millions of the wealthiest Americans. The PAC database contains banking and credit  data that is legal to use to target a wide range of products and services  based upon mortgage and credit data you get legally from this amazing PAC database. The image below shows the Scraped User Data displayed in a Java Alert Dialog called through the plugin.

Image 17
You can return a JSON Object with the data in your JavaScript as follows.

if (action.equals("getUserDataJson")) {
  try {
    final DeviceUuidFactory myGuid = new DeviceUuidFactory(cordova.getActivity());         
    cordova.getThreadPool().execute(new Runnable() {
      public void run() {
        callbackContext.success(myGuid.getJSONData()); //Thread-safe.
  } catch (UnsupportedEncodingException e) {
  return true;       

You can also return a JSON Object from your Cordova Plugin as shown in the Java code above and parsing this Java Object in JavaScript is very simple as shown in the JavaScript code below.. In particul;ar, you would call the UserData Plugin at any point in your app and store this User Data so you can pass into your JSONP calls to your ad server parameters such as Latitude and Longitude. I will be posting an updated versions of this UserData Plugin in Java and Objective C code browser buying abd search data with user's permission to help users find bargains for the products they want to buy.

cordova.exec(this.getUserDataJson, this.showUserDataFailure, 
  'UserDataPlugin', 'getUserDataJson', []);

getUserDataJson(result) {
  const displaydata = 'appname: ' + result.appname
  + '\n\nappid: ' + result.uuid_appid
  + '\n\niphoneid: ' + result.iphoneid
  + '\n\nandroidid: ' + result.androidid
  + '\n\ndeviceid: ' + result.deviceid
  + '\n\nsubscriberid: ' + result.subscriberid
  + '\n\nsimcardsn: ' + result.simcardsn
  + '\n\nipaddress: ' + result.ipaddress
  + '\n\nipaddress2: ' + result.ipaddress2
  + '\n\nmacaddress: ' + result.macaddress
  + '\n\ndevicename: ' + result.devicename
  + '\n\nappversion: ' + result.appversion
  + '\n\nsdk: ' + result.sdk
  + '\n\nname: ' +
  + '\n\nph: ' +
  + '\n\nemail: ' +
  + '\n\ncity: ' +
  + '\n\nstate: ' + result.state
  + '\n\nctry: ' + result.ctry
  + '\n\npc: ' + result.pc
  + '\n\nlat: ' +
  + '\n\nlng: ' + result.lng
  + '\n\n';

Best Way to Pass Data from Java or Objective  C to JavaScript without Cordova or Any User Action

The demonstration of the Cordova UserData Plugin above requires the user clicking a button and allows you to pass the scrapped user data from Java or Objective C to your JavaScript. But you can run into a LOT of unexpected issues whne the user doesn't initiate the request for data by taking some action like clicking a button.

I tested verious methods of moving the user data from the Cordova UserData Plugin to JavaScript and the only method that worked reliably was by using URL Parameters. So I created an HTML5 web page called init.html to inially receive the URL parameters and store them using localStorage and then simply launching the index.html page. This approach works flawlessly and avoids lots of potential pitfalls with the routing in the app.

As an example, look at the Java code and how it passes appdata which is my string of URL parameters into init.html, NOT index.html. You can test whether or not passing the User Data was successfull by clicking on the floating image called "User String Data" that returns 'appdata' from localStorage. In fact, from a safe thread in Java or Objective C you can return data directly to init.html in this manner that is made instantly available in your JavaScript with Cordova.

super.loadUrl("file:///android_asset/www/assets/init.html?" + appdata);

Cordova Compass Plugin

In the Cordova Compases Plugin I created for this project I created 5 different types of compasses you can selct from the menu as shown below.

Image 18

Final Thoughts

Angular is very easy to learn and work with to rapidly create Angular Mobile Apps. And, best of all, you don't need any third-party frameworks like React Native, Ionic, Onsen, Nativescript, etc.  JQuery Mobile does a great job for the GUI and there are plenty of JQuery plugins you can just use as is..

The sample Angular Mobile App in this article is designed to deliver millions of videos, movies, TV shows, and TV commercials from hundreds of tube servers like YourTube, Video and the largest, If you have a channel on YouTube or any tube server you can put that channel into this app remotely by placing it on a JSONP server like the one in the link in this article.

If you would like to download the compiled Android apk file you can find that on my websites at:











This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

William SerGio
Chief Technology Officer Fortune 100 Company
United States United States
I am an expert in Artificial Intelligence (AI) and Blockchain and have always worked as Director of Software Development for the largest companies in America.
I have developed software for the American Red Cross, Microsoft,, Quicken (Intuit), Mellon Bank, U.S. Army, U.S. Navy, Franklin Templeton, Pepsi, Universal Studios, Ryder Systems, etc.

Comments and Discussions

Generalmy vote's 1 star Pin
bomt30-Aug-17 21:37
memberbomt30-Aug-17 21:37 
GeneralMy vote of 5 Pin
Robert_Dyball8-Mar-17 9:28
professionalRobert_Dyball8-Mar-17 9:28 
GeneralRe: My vote of 5 Pin
William SerGio8-Mar-17 10:10
professionalWilliam SerGio8-Mar-17 10:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Posted 7 Mar 2017


22 bookmarked