Topic: Multi-platform apps with Angular and NativeScript
Introduction
NativeScript is an open source framework for building native mobile apps with JavaScript. For a long time, when you needed to build apps for multiple platforms, you had to create and maintain separate projects. The Angular and NativeScript teams teamed up to create nativescript-schematics, a tool that allows you to build both web and mobile apps from a single, code-sharing project.
In this article, we will learn how we can use code sharing to build multi-plaform apps with Angular and NativeScript.
Prerequisites
Node.js: https://nodejs.org/en/
Configuration for Android/iOS development:
https://mdbootstrap.com/docs/angular/mobile/getting-started/quick-start/#full-setup
Angular CLI: npm install -g @angular/cli
NativeScript CLI: npm install -g nativescript
NativeScript schematics: npm install -g @nativescript/schematics
Code sharing
A code-sharing project is one where we keep the code for the web and mobile applications in one place. It provides us with an easy way to share the business logic between web, Android and iOS platforms, but at the same time allows to add platform-specific code where necessary.
To avoid conflicts in this kind of project we should use a naming convention. Adding .tns before the file extension indicates that this file is NativeScript-specific, while the same file without .tns extension will be used for web app. Usually the file names will look like this:
app.component.ts - a shared file for all platforms
app.component.html - a web-specific template
app.component.tns.html - a mobile-specific template
app.component.css - a web-specific stylesheet
app.component.tns.css - a mobile-specific stylesheet
app.module.ts - a web-specific module
app.modules.tns.ts - a mobile-specific module
What can be shared:
- services for common business logic
- routes configuration
- component class definition
What can't be shared:
- UI layer (stylesheets and templates) -you should use different UI component for the web and mobile platforms
- NgModules - so that you can import platform-specific modules/components
Getting started
In this section we will learn how to create new code-sharing project with NativeScript schematics tool and how to build the application on different platforms.
Creating multi-platform app:
To create multi-platform application open the terminal window and execute the following command:
ng new --collection=@nativescript/schematics app-name --shared
Building applications:
Once you have a code-sharing project, you can easily build application with Angular CLI and NativeScript CLI. Execute the following commands in your terminal (you may need to use multiple instances of the terminal, because all these processes need to run simultaneously):
To build a web application:
ng serve
To build an Android application:
tns run android --bundle
To build an iOS application:
tns run ios --bundle
As you can see, both web and mobile applications use the same title variable stored in home.component.ts file, but the rendered templates are slightly different on both platforms thanks to separate home.component.html and home.component.tns.html files.
What's next
Go ahead and give code sharing a try by extending the starter project that we previously created. You can add different styles for your web and mobile apps, add new typescript logic and include platform-specific components by importing them in the separate modules.
We created many ready-to-use Angular UI components for both web and mobile platforms that can be useful in your project:
Summary
As you can see, building apps for both the web and mobile with NativeScript and Angular is very easy thanks to NativeScript schematics tool. The ability to use Angular skills to create applications for many platforms significantly speeds up the development process.
- Category: Angular