A few weeks ago at the AngularJS conference, ng-conf, Telerik announced that NativeScript was in a more compatible state when it comes to Angular 2. This was all the information I needed to start giving it a try.
We're going to take a look at building a simple todo-like NativeScript Android and iOS application using Telerik NativeScript and Angular 2.
Let me start by saying that as of right now, May 2016, Angular 2 is in release candidate. It has not yet become stable. This is just Angular 2 that I'm talking about.
The first thing we should do is create a new NativeScript project. Using the Command Prompt (Windows) or Terminal (Mac and Linux), execute the following:
A few important things to note in the above commands. First you'll notice we are using the
Before we start coding, there are a few directories and files that we need to create. These files and directories will represent different screens in our application. Create the following in the AngularProject directory:
Based on the above, we'll have a screen that contains a list of data and a screen that contains a form for creating data. These screens will further be referred to as components.
Creating the List Component
The list component will consist of a TypeScript logic file and an HTML file for UI. We're going to start by creating the logic file, working our way to the UI.
Open the project's app/components/list/list.component.ts file and include the following code. We're going to break it down after.
Starting with the imports, we include
Location which will allow us to track navigations and the
Router which will allow us to navigate. For simplicity we are going to use
application-settings for storing data. If you wanted, you could easily convert the storage to SQLite or Couchbase NoSQL based on my previous tutorials.
This brings us to the following chunk of code:
This is where we are defining the UI that is bound to this particular component logic. The UI will exist in an HTML file that we create soon.
Inside the components
constructor method we see the following code:
All data will be stored as serialized JSON data within the application settings storage. When the component loads, the
personList will be loaded. This variable is actually bound to the UI, but we'll get to that soon. What is really interesting here is the
subscribe that is happening to the
Location object. When an item is popped from the navigation stack, a notification will be sent to this subscription. To sum this up, when the user comes to the list component after hitting back or save, the subscription will trigger and the data can be refreshed.
Finally we have a
create function that will allow us to navigate to another component.
This brings us to the UI for the list component. You'll notice that although we're working with an HTML file, we are using NativeScript XML markup instead. Inside your project's app/components/list/list.component.html file, add the following code:
An action bar with a single button will exist in this component. The button will navigate us to the next component. Where most of the magic happens is in the
<ListView> is bound to the
personList that we created and populated in the TypeScript file. Every array item will be displayed in a
<Label> within the list rows.
Building the Create Component
Now we can look at creating data to be displayed in our list component. Just like with the list component we're going to focus on the TypeScript logic first.
Open your project's app/components/create/create.component.ts file and include the following code. Don't worry, we're going break it down after.
The first few lines aren't much different than what we saw in the list component. What we are going to focus on are the
constructor and the
constructor method we are initializing the variables that are bound to the UI. Most of the work happens in the
When the user calls the
save function we want to make sure that the
lastname properties are not empty. If they are not empty, we retrieve the serialized JSON data and add a new array item to it. After we re-save the data to the application settings storage.
After the data has been saved we can pop the current component from the navigation stack which will take us back to the list component and trigger the location subscription so we can reload the data in the list view.
Now we can look at the UI of the create component. Again this will be an HTML file, but NativeScript XML markup. Open your project's app/components/create/create.component.html file and add the following code:
This time we have an action bar with two buttons, a button for saving and a button for navigating to the previous component. In our
<StackLayout> we have two input fields, both bound with an Angular
ngModel. This creates a two way data binding, but for our use-case, it allows us to use the data when we call
Configuring the Angular 2 Router
As of right now we have two components, but neither of them are linked to the actual application. Not yet at least. Now we need to configure the Angular 2 router so navigation can happen.
Open your project's app/app.component.ts file and include the following code. We'll break down what is happening after.
Jump down to the
@Component section of the file. This particular TypeScript file will act as our main driver, so every component we make will pass through it.
In the above chunk of code, what is particularly interesting is the
template that we set. If you're familiar with AngularJS 1, the
<page-router-outlet> is like the
<div ui-view>. All components will be rendered within that tag.
Finally we need to add our possible components and link them together. This is done via the project's app/main.ts file. Open it and include the following code:
Here we define the routes, which is default, and their names so we know what to navigate to. The default route is any route that has an empty path.
A video version of this article can be seen below.