Introduction to Angular and NativeScript

This is a set of notes for working with Angular for Android and IOS Development. I have recently been working on projects that have required cross-platform applications, the cost of developing native Java and Swift applications can often lead teams to avoid working on native phone applications leaving their product as a web based application. NativeScript solves this problem by allowing for compilation for both Android and iOS.

Setting Up

Since this is a JavaScript based framework we need to install NodeJS. We can do this by following the instructions found on the official website but I will run through the current instructions for Linux (please check with the NodeJS Site for up to date instructions). You are honestly better off installing nodejs with NVM (node version manager) as it will save you countless headaches with handling multiple node versions. At the writing of this article the newest version of node was not supported by NativeScript, but it was useful to have the newest version of Node for other projects.

Step 1 - Installing NVM

Again the instructions can be found on the official github repo which are useful as it is likely that there will be updates to this script, and **you shouldn't trust stranger's code on the internet**. (Although I wouldn't blame you if you ran this code ;) ). Official Repository: https://github.com/nvm-sh/nvm

Install NVM

This gets and runs the installation script for NVM. You then need to refresh your environment or close and re-open your shell. You can then run the following to check to see if it is working properly.

Checking if NVM is Installed Properly

Step 2 - Install NodeJS

Again please check the updated setup notes for NativeScript before just downloading any version of Node. The current version of Node required is 12.*.* LTS (Long Term Support), so we can run the following to install the required version:

Installing NodeJS

Step 3 - Use the Installed Version of NodeJS

This one gets a lot of people, if you have multiple versions of node installed you have to set the version each time you open a new terminal. This can be done by running:

Use Installed version of NodeJS

Step 4 - Install NPM

NPM or Node Package Manager is used a lot when working with Node and even if you (somehow) never use it, it is required to install the NativeScript CLI. We can install NPM by running:

Install NPM

Step 5 - Install NativeScript

Before this was a simple instruction for how to install Node, if you don't care about NativeScript this is where you can stop and be happy! Now to start developing applications using NativeScript we need the NativeScript CLI:

Install NativeScript

Note that the -g has been added, this installs this package globally instead of in the current directory. If you want to check to see if it is installed properly, you can run the second command which should show help output. .

Step 6 - Install Schematics

We need the angular CLI for this as we are using NativeScript and angular, along with the NativeScript schematics.

Install Schematics

Congrats! You have now installed the basics. NativeScript suggests installing their 'PlayGround' but I find that developing inside of a VM or on your own device is preferable.

Hello World of NativeScript

Since I want to get you started with NativeScript I will run through the basic commands required to create a templated application.

Step 1 - Create New Application

The easiest way of creating a new application is to run the following:

Create New Application

This will create a new Angular NativeScript application using the name test-application with the following file structure:

File Structure for Application

I have expanded the app folder in this image, as this is where the source for your application will be. Inside of the home folder is the html/css/ts for one of the components in your application.

The app-routing.module.ts is the file that handles all of the routes for your application, meaning the different paths or components that you can change to.

The app.component.ts file is the TypeScript for the default component which is loaded when the application is created/launched.

The app.module.ts is a TypeScript file for a module for the app.

Step 2 - Running the Application

Since we have our default application we can test if it will run! If you are running this on a VM you will need to have installed Android Studio and have an Android VM set up beforehand. For the Android VM you can run:

Running the Application

If you have your phone plugged into your computer you can simply allow file transfers on your phone and run the following command to find out the ID of your device:

Getting the Device ID and Running on a Phone

Once you have the device ID you can run the second command to start and install the application on your phone.

Congrats your environment is set up!

Basic Angular Concepts

What can we do with our new shiny environment? Well first let's understand some basics about Angular.

Modules

As angular applications are modular, we want to have little containers for all of our code (similar to how you would use classes in OOP to group code together). In Angular modules are defined using `NgModules`. Although you can create a module using the AngularCLI, we are going to use the NativeScript CLI to create one:

Create a Module

This will create a new module in our project called module-example which will show up inside your app/ directory:

Module File Structure

This is a simple module.ts file, which contains the following code:

Module File

As we can see it created the `NGModule` which takes in the following metadata:

  1. Declarations: This is what components, directives, and pipes are in the module and makes them available to other modules.
  2. Imports: What other modules are required for this module.
  3. Schemas: Just specifies what schemas are allowed (can be NO_ERRORS_SCHEMA and CUSTOM_ELEMENTS_SCHEMA).
  4. Providers: This is the same as imports but for Services.
  5. Bootstrap: Specifies other components to create and insert into the DOM (view). You can see an example of this in the app.module.ts file.

Components and Templates

Since we now have our module, we can create some visuals in our application. This can be done using Components and the created templates for those components. To create a components in NativeScript we can run:

Create a Component

This will create a new component in the folder `component-example` in the `app/` directory:

Component File Structure

As you can see there are 3 files that are created:

  1. component-example.component.css: This is the CSS style file for the component/template.
  2. component-example.component.html: This is the HTML/template for the component.
  3. component-example.component.ts: This is the TypeScript class file for the component.

This will also add the following line to the app.module.ts file:

Changes to the app.module.ts file

This imports the new component into our app so that you are able to display the component in the application. Let's take a peek at the contents of the component-example.component.ts file:

Component TS File

To create a component we use the @Component call, this is imported from @angular/core. This takes a couple of parameters:

  1. Selector: This is the unique identifier for this element. Since we could have many components in the screen at one time.
  2. TemplateURL: This is the location of our HTML template for the component we are creating.
  3. StyleURLS: This is the location of our CSS file for the template.
  4. Template: Instead of specifying a TemplateURL we can directly pipe in the template to the component. It is often better practice to use the TemplateURL as you can keep your code clean and separate.
  5. Styles: Instead of specifying a StyleURLS we can directly pipe in the CSS file to the component. Again it is better to separate your code into a separate file.

Currently this would display the screen with a button that has the text 'component-example works!'. If we want this to display instead of the default template we can open the app-routing.module.ts file and change the following lines so they look like the second example below:

Routing to the Right Page in app-routing.module.ts

You should be able to build and run the application on your android device.

Services and Dependency Injection

As we often need to use certain code in multiple modules, we can use services and dependency injection to inject code into our modules that is not associated with a specific component or module. This is often used when you are pulling data from an API as you will need to access data across the application and it is not tied to a specific component or module in the application. We can create a new service in NativeScript by running:

Create Service

This creates the following files:

Service File Structure

Note that this will create a *.spec.ts file which is for testing and for our example can safely be deleted. If we want to create a new function within that service, we can simply change the example-service.service.ts file to contain:

Creating New Service Function

This is a class that has a function inside of it called myTestFunction which takes in any amount of numbers and outputs the sum of them. We can then go in and use this service in our component-example by changing our component-example.component.ts component file to be:

Using New Service Function

The constructor within the class is called when we create an instance of the object. In our case we want the service to only be run when we create the class, so we can run our Service inside of the constructor, which sets this.value to the sum of the numbers 1, 2, 3, and 4. And we can change the template to have the value that we have created by using the service function myTestFunction:

Changes to template to display value

Routing and Navigation

Since we also want to be able to change screens in our application we need to be able to use routing. To define routes we can modify the app-routing.module.ts, we did this earlier when we created a new component. We will be looking at that example:

Routing File Contents

We can see that we define an array of Routes, each of the routes consist of:

  1. path: What path needs to match to redirect to the component
  2. redirectTo: Which component to redirect to if you access this, path this allows for multiple paths redirecting to the same spot
  3. pathMatch: Does the full path have to match with the path?
  4. component: Which component does this point to?

Since this is also a Module we have the imports and exports below inside of the NgModule.

How exactly do we use this inside of a component? If we want to make the buttons on both of our components change back and fourth between the two components we can add [nsRouterLink]="['/']" to both html templates:

Changes to templates to enable routing

This will then allow us to swap between the 2 components.

Wrapping Up

This summarized how to set up an environment for developing NativeScript Angular applications for Android and iOS, along with a brief tutorial on the basics of Angular/NativeScript.