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.
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
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.
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:
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:
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:
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:
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.
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:
This will create a new Angular NativeScript application using the name test-application with the following file structure:
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:
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:
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.
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:
This will create a new module in our project called module-example which will show up inside your app/ directory:
This is a simple module.ts file, which contains the following code:
As we can see it created the `NGModule` which takes in the following metadata:
- Declarations: This is what components, directives, and pipes are in the module and makes them available to other modules.
- Imports: What other modules are required for this module.
- Schemas: Just specifies what schemas are allowed (can be NO_ERRORS_SCHEMA and CUSTOM_ELEMENTS_SCHEMA).
- Providers: This is the same as imports but for Services.
- 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:
This will create a new component in the folder `component-example` in the `app/` directory:
As you can see there are 3 files that are created:
- component-example.component.css: This is the CSS style file for the component/template.
- component-example.component.html: This is the HTML/template for the component.
- 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:
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:
To create a component we use the @Component call, this is imported from @angular/core. This takes a couple of parameters:
- Selector: This is the unique identifier for this element. Since we could have many components in the screen at one time.
- TemplateURL: This is the location of our HTML template for the component we are creating.
- StyleURLS: This is the location of our CSS file for the template.
- 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.
- 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:
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:
This creates the following files:
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:
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:
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:
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:
We can see that we define an array of Routes, each of the routes consist of:
- path: What path needs to match to redirect to the component
- redirectTo: Which component to redirect to if you access this, path this allows for multiple paths redirecting to the same spot
- pathMatch: Does the full path have to match with the path?
- 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]="['/
This will then allow us to swap between the 2 components.
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.