Create a simple HelloWorld application with NativeScript

What is NativeScript?

NativeScript is a framework that let you to build cross-platform, native iOS and Android apps without web views. Use Angular, TypeScript or modern JavaScript to get truly native UI and performance while reusing the skills and the code from your web projects. Get 100% access to native APIs via JavaScript and reuse of packages from npm, CocoaPods and Gradle. Open source project maintained by Progress.

Getting Started With NativeScript

To get start with NativeScript, It require setup NativeScript CLI on your system. There are two way to setup NativeScript CLI, Quick Setup and Full Setup. Go through the System Requirements and CLI Setupdocumentation of NativeScript to set up your system.

Information Source - Set Up Your System

I am on a Widows 10 machine so I followed the Full Setup approach and followed below setup install all prerequisites to start with NativeScript:

  1. Open command prompt as an administrator on you system.
  2. copy and paste the script below into your command prompt and press Enter:
    @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://www.nativescript.org/setup/win'))"

Note: Please be sure that you run this command in cmd as an administrator (Windows key > type "cmd" > right click > Run as Administrator).

After the installation, your system will have following tools available:

  • The latest stable official release of Node.js (LTS)
  • Google Chrome
  • JDK 8
  • Android SDK
  • Android Support Repository
  • Google Repository
  • Android SDK Build-tools 28.0.3 or a later stable official release
  • Android Studio
  • Set up Android virtual devices to expand your testing options

The two environment variables JAVA_HOME and ANDROID_HOME are required for Android development, which should have automatically added as part of the installation:

Creating first program using NativeScript

tns create HelloWorld --template https://github.com/NativeScripting/template-ng-getting-started-hello

Now open project in the Visual Studio code using below command:

cd HelloWorld 
code .


image

It will open the project in the Visual Studio Code. Now you can edit the project file and also can add some plugin for NativeScript Angular snippets.

Running the Application

If you do not required libraries in the project folder then use “npm install” command to download the dependencies.

You can now bundle your project by passing --bundle flag to NativeScript

CLI commands:

- tns build android --bundle

- tns build ios --bundle

- tns run android --bundle

- tns run ios –bundle

Run the command “tns run android –bundle” to test your first application in the emulator.


It is all done with creating a simple application in using the NativeScript.

Introduction to Angular 4 and TypeScript- Your First Angular App

clip_image001
In this article, you are going to learn that how to create and run an Angular application using Angular CLI.

TABLE OF CONTENT

  • Introduction
    • What is Angular?
    • Why do we need Angular?
    • Architecture and Building Blocks of Angular Apps
  • Setting Up the Development Environment
  • =>Your First Angular App
  • Structure of Angular Projects
  • Webpack
  • TypeScript Fundamentals
    • What is TypeScript?
    • Creating First TypeScript Program
    • Declaring Variables
    • Types
    • Type Assertions
    • Arrow Functions
    • Interfaces
    • Classes
    • Objects
    • Constructors
    • Access Modifiers
    • Access Modifiers in Constructor Parameters
    • Properties
    • Modules
  • Angular Fundamentals
    • Creating Components
    • Generating Components Using Angular CLI
    • Templates
    • Directives
    • Services
    • Dependency Injection
    • Generating Services Using Angular CLI
  • Exercise

Introduction
Angular CLI is the new approach to work with Angular. It helps to create new projects as well as deployment of the packages through command line interface(CLI). In this article we install Angular CLI using node package manager and then create a new Angular 4 project.


Creating a new Angular Project
To create a new Angular project, first you must setup your development environment and the Angular CLI which can be configured using below command.

npm install -g @angular/cli

Now open the command prompt and go to the directory where you want to create your first Angular application. Now run below command on the command prompt.
ng new Angular4App

clip_image002

After ng new xxxxxx, this xxxxxx is the application name which all depend on you that what you want to name your application.
Now open current project folder in Visual Studio Code by running below command:
code .

clip_image004

Finally, it is the time to check if your newly created application is running or not. To run your first application switch back to command prompt and run “ng server” command within project directory. Below is the command to run the Angular server which package and load the current application on the server so that you can run it in the browser.

ng server

clip_image006

After running this command, you will see in the output window where you will find that Angular live development server is listening on “localhost:4200” So go to the browser and type “localhost:4200” and you will find that your application is running as seen in above image.

Along this you will see a message in last that webpack: compiled successfully. In the next article We will discuss about webpack and project structure.

Conclusion
In this article you have learned to create and run an Angular project using Angular CLI.

Previous: Setting Up the Development Environment Next: Structure of Angular Projects