Beginners' NativeScript + Angular to develop Android apps - Getting started guide

NativeScript (https://github.com/NativeScript) is a java script framework that enables you to create native Android or IOS mobile applications. It is considered to be faster than Cordova or PhoneGap (which is webview based frameworks as opposed to native code generated from java script).


Best features of NativeScript

- NativeScript supports Angular (4/5) , TypeScript , regular java script and it also has a plugin for Vue.JS
- NativeScript can generate native applications for Android and IOS with one code base.
- NativeScript playground https://play.nativescript.org - this is a platform like jsfiddle, plunkr to write and execute and see the result of small NativeScript applications.


NativeScript Performance Comparison:

The following link shows a simple ios app comparison benchmarks with these other frameworks.

Native - Xcode 6.3.2
NativeScript - NativeScript for iOS 1.6.0
Xamarin - Xamarin Studio 5.10.2
Appcelerator - Appcelerator CLI 4.1.0
Cordova - Apache Cordova 5.1.1
React Native - 0.19
https://github.com/NativeScript/sample-iOS-Profiling/tree/performance-tests

The result shows in many cases performance in the following order.
Native (ios)
Xamarin
NativeScript

Getting Started with NativeScript:

Pre requisites for NativeScript based Android apps: 
Node.js
JDK (1.8)*** (NatvieScript works ONLY with JDK 1.8. So don't try 1.9 or 1.7 etc.)
Android SDK (ADK 22)
Environment Path variables:
JAVA_HOME (JAVA_HOME Must be pointing to JDK 1.8)
Android_HOME

Installing NativeScript: 
** Documentation to follow use https://github.com/NativeScript. As of today nativescript.org website documentation looks older.

npm install nativescript -g

This will install nativescript-core-module which include a Command line interface (CLI) command as tns (Telerick Native Script) or nativescript  

To check the installation, use

tns doctor

This command will check if all the prerequisites are met . If not it offers to install them.

Now you can start creating an application with these tns commands.

tns create [your - app - name] --ng   (to create an Angular based mobile Application)
tns run android 

This tns run android is equal to these steps  and executes all these below steps in the order, which you can run them individually if you prepare to do so.

tns platform add android
tns prepare android
tns build android
tns device
tns deploy android

The seed code for nativescript for angular  app will look like this picture.

Step one: 

C:\demo_tutorials>tns create MyApaibot1 --ng
Installing  tns-template-hello-world-ng
C:\demo_tutorials\MyApaibot1
`-- tns-template-hello-world-ng@3.4.1
  +-- @angular/animations@5.0.5
  | `-- tslib@1.8.1
  +-- @angular/common@5.0.5
  +-- @angular/compiler@5.0.5
  +-- @angular/core@5.0.5
  +-- @angular/forms@5.0.5
  +-- @angular/http@5.0.5
  +-- @angular/platform-browser@5.0.5
  +-- @angular/platform-browser-dynamic@5.0.5
  +-- @angular/router@5.0.5
  +-- allow-publish@1.0.4
  +-- nativescript-angular@5.0.0
  | `-- nativescript-intl@3.0.0
  +-- nativescript-theme-core@1.0.4
  +-- reflect-metadata@0.1.10
  +-- rxjs@5.5.6
  | `-- symbol-observable@1.0.1
  +-- tns-core-modules@3.4.0
  | `-- tns-core-modules-widgets@3.4.0
  +-- UNMET PEER DEPENDENCY typescript@~2.4.2
  `-- zone.js@0.8.19


> nativescript-dev-typescript@0.6.0 postinstall C:\demo_tutorials\MyApaibot1\node_modules\nativescript-dev-typescript
> node postinstall.js

Adding 'es6' lib to tsconfig.json...
Adding 'dom' lib to tsconfig.json...
Adding 'es2015.iterable' lib to tsconfig.json...
Adding tns-core-modules path mappings lib to tsconfig.json...
Project already targets TypeScript ~2.4.2
C:\demo_tutorials\MyApaibot1
+-- nativescript-dev-typescript@0.6.0
| `-- nativescript-hook@0.2.2
|   +-- glob@6.0.4
|   | +-- inflight@1.0.6
|   | | `-- wrappy@1.0.2
|   | +-- inherits@2.0.3
|   | +-- minimatch@3.0.4
|   | | `-- brace-expansion@1.1.8
|   | |   +-- balanced-match@1.0.0
|   | |   `-- concat-map@0.0.1
|   | +-- once@1.4.0
|   | `-- path-is-absolute@1.0.1
|   `-- mkdirp@0.5.1
|     `-- minimist@0.0.8
`-- typescript@2.4.2

Project MyApaibot1 was successfully created.

Step 2:

Now let us install NativeScript Android platform and more steps as see above.

tns run android

Here is the output you will see when you run tns run android. You can find full console logs at https://gist.github.com/moorthi07/4e185430c2b2b56c41024b5800497103

C:\demo_tutorials\MyApaibot1>tns run android
Searching for devices...
Executing before-liveSync hook from C:\demo_tutorials\MyApaibot1\hooks\before-liveSync\nativescript-angular-sync.js
Copying template files...
  \ Installing tns-androidInstalling  tns-android
  / Installing tns-android[    ..............] - loadRequestedDeps: sill install loadAllDepsInto  - Installing tns-android[    ..............] - loadRequestedDeps: sill install loadAllDepsInto
  \ Installing tns-android[    ..............] - loadRequestedDeps: sill install loadAllDepsInto  | Installing tns-android[    ..............] - loadRequestedDeps: sill install loadAllDepsInto 

...................................................................................................................


C:\demo_tutorials\MyApaibot1
`-- babel-traverse@6.4.5
  +-- babel-code-frame@6.26.0
  | +-- chalk@1.1.3
  | | +-- ansi-styles@2.2.1
  | | +-- escape-string-regexp@1.0.5
  | | +-- has-ansi@2.0.0
  | | | `-- ansi-regex@2.1.1
  | | +-- strip-ansi@3.0.1
  | | `-- supports-color@2.0.0
  | +-- esutils@2.0.2
  | `-- js-tokens@3.0.2
  +-- babel-messages@6.23.0
  | `-- babel-runtime@6.26.0
  |   +-- core-js@2.5.3
  |   `-- regenerator-runtime@0.11.1
  +-- babel-runtime@5.8.38
  | `-- core-js@1.2.7
  +-- babel-types@6.26.0
  | +-- babel-runtime@6.26.0
  | +-- lodash@4.17.4
  | `-- to-fast-properties@1.0.3
  +-- babylon@6.18.0
  +-- debug@2.6.9
  | `-- ms@2.0.0
  +-- globals@8.18.0
  +-- invariant@2.2.2
  | `-- loose-envify@1.3.1
  +-- lodash@3.10.1
  `-- repeating@1.1.3
    `-- is-finite@1.0.2
      `-- number-is-nan@1.0.1
/ Installing tns-android[               ...] - remove:lodash: sill vacuum-fs quitting because
- babel-runtime@6.26.0 node_modules\babel-types\node_modules\babel-runtime
- lodash@4.17.4 node_modules\babel-types\node_modules\lodash
  - Installing tns-androidC:\demo_tutorials\MyApaibot1
`-- babel-types@6.4.5

  / Installing tns-android[    ..............] - loadRequestedDeps: sill install loadAllDepsInto  - Installing tns-android[    ..............] - loadRequestedDeps: sill install loadAllDepsInto  \ Installing tns-android[    ..............] - loadRequestedDeps: sill install loadAllDepsInto  | Installing tns-android[    ..............] - loadRequestedDeps: sill install loadAllDepsInto  / Installing tns-android[    ..............] - loadRequestedDeps: sill install loadAllDepsInto  - Installing tns-android[    ..............] - loadRequestedDeps: sill install loadAllDepsInto  \ Installing tns-android[    ..............] - loadRequestedDeps: sill install loadAllDepsInto  | Installing tns-android[    ..............] - loadRequestedDeps: sill install loadAllDepsInto  / Installing tns-android[    ..............] - loadRequestedDeps: sill install loadAllDepsInto  - Installing tns-android[    ..............] - loadRequestedDeps: sill install loadAllDepsInto  \ Installing tns-android[    ..............] - loadRequestedDeps: sill install loadAllDepsInto  | Installing tns-android[       ...........] - loadRequestedDeps: verb afterAdd C:\Users\senduC:\demo_tutorials\MyApaibot1
`-- babylon@6.4.5

  \ Installing tns-android[   ...............] \ cloneCurrentTree: sill cloneCurrentTree Finishi  | Installing tns-android[    ..............] \ loadRequestedDeps: sill install loadAllDepsIntoC:\demo_tutorials\MyApaibot1
`-- lazy@1.0.11

Project successfully created.
Executing before-prepare hook from C:\demo_tutorials\MyApaibot1\hooks\before-prepare\nativescript-dev-typescript.js
Found peer TypeScript 2.4.2
Preparing project...

Successfully prepared plugin nativescript-angular for android.
Successfully prepared plugin nativescript-theme-core for android.
Successfully prepared plugin tns-core-modules for android.
Successfully prepared plugin nativescript-intl for android.
Successfully prepared plugin tns-core-modules-widgets for android.
Project successfully prepared (Android)
Building project...
Gradle build...

Installing...
Successfully installed on device with identifier 'emulator-5554'.
Successfully transferred all files.
Refreshing application...
Successfully synced application org.nativescript.MyApaibot1 on device emulator-5554.
Executing before-watch hook from C:\demo_tutorials\MyApaibot1\hooks\before-watch\nativescript-dev-typescript.js
Found peer TypeScript 2.4.2
ActivityManager: Start proc 15651:org.nativescript.MyApaibot1/u0a86 for activity org.nativescript.MyApaibot1/com.tns.NativeScriptActivity
9:56:37 AM - Compilation complete. Watching for file changes.



JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ANGULAR BOOTSTRAP DONE. 24044


This will take quiet some time as it does above 4 or 5 tasks all at once. If you have connected device or Simulator, this command will also start the emulator  and install the app in the device.
And it keep watching for the changes in the code and for every changes made it dynamically build and deploy the app in the device or emulator.

So enjoy your Mobile app now.