Navigating A NativeScript App With The Angular Router

Unless you want a very boring single page application, you’re going to want some form of page navigation with multiple pages available. Previously I wrote a tutorial for navigating between routes in a vanilla JavaScript NativeScript application, but with Angular in full force, it probably makes sense to demonstrate navigation with the very different Angular Router component.

Anyone who has been following Angular since beta knows that the navigation components have changed drastically in pretty much every release. Anyone who has been following NativeScript and Angular knows that Telerik likes to use any and all Angular in its vanilla state. This means that navigation in NativeScript Angular applications has changed quite a bit over the past year. However, with Angular now in general availability (GA), the Angular Router is no longer beta and should no longer be changing.

We’re going to take a look at simple navigation between two Angular components in a NativeScript Android and iOS mobile application using the now stable Angular Router.

Upgrading Your Hybrid Apps To Native With NativeScript

As someone who has developed both hybrid web applications and native applications, I understand the differences and advantages each brings to the table. While I agree that you can do some pretty neat things with a hybrid web application built with frameworks like Ionic, I no longer think it is as great of a solution as it once was.

With hybrid web frameworks like Ionic 2 and native mobile frameworks like NativeScript both using Angular, you have to step back and ask yourself what you’re truly getting as an advantage as of now in hybrid. Performance is one of many reasons why native still makes more sense, and being able to use Angular, why wouldn’t you?

This is why I spent a lot of time creating an upgrade guide to demonstrate how to take your hybrid mobile application built with Ionic 2 and Angular to native with NativeScript and Angular.

Build A Time-Based One-Time Password Manager With NativeScript

Not too long ago I released a time-based one-time password manager called OTP Safe to Google Play and iTunes. That particular application was built with Ionic Framework and I even wrote a tutorial explaining how to make a similar 2FA manager with Ionic 2. Being a hybrid mobile application, there were some performance limitations that came with the Ionic 2 application. This inspired me to convert the application to something native and NativeScript seemed like a solid solution.

Let’s take time-based one-time password management to the next level and create a native mobile application with NativeScript and Angular.

Unit Testing A NativeScript Angular Android And iOS Mobile Application

Writing tests is a very important part of mobile application development, but not everyone does it. It could be laziness, it could be because you don’t know how. I fall into the category that I’m often too lazy to write tests. I don’t have time to write tests, I just want my application done. That is probably not a good answer. Unit testing will lead to overall better applications with less problems down the road.

Not too long ago, Ben Elliot wrote a guest post on The Polyglot Developer regarding unit testing a NativeScript mobile application. The thing is, that this was directed towards vanilla NativeScript. While vanilla is a very valid option when it comes to NativeScript, I prefer using Angular which is a bit different.

We’re going to see how to write unit tests for a NativeScript Android and iOS applications that use Angular and TypeScript.

Create A Mobile App From Your Angular Web App With NativeScript

Angular is all the rage right now. It is a significant step in the right direction from its predecessor AngularJS 1 for numerous reasons, one being its decoupling from the document object model (DOM). This separation allows for applications to be built beyond the web browser. Take for example, the mobile development framework NativeScript, which allows you to develop native Android and iOS applications. There is no DOM in this framework, but yet we can still use Angular to develop our applications.

We’re going to take a look at how to take an Angular web application and bring it to mobile using NativeScript.

Build An RSS Reader Mobile App With NativeScript And Angular

Rich site summary (RSS) feeds are very common on blogs or sites that have a publication type feed. These feeds are in XML format and have information such as the publication title, a summary, or other bits of information that is rather useful. There are plenty of mobile applications on Google Play and iTunes that support the aggregation of RSS feeds, but have you ever wanted to build your own? Maybe you want to create your own news application based on your own algorithms, or maybe your company has a mobile application and you’d like to include a blog section to the mobile app. Whatever the need may be, doing so is not difficult.

We’re going to see how to use Angular, Yahoo’s YQL language, and NativeScript to build a fully native RSS feed reader for Android and iOS.

Create Native iOS And Android Plugins With NativeScript

In my previous NativeScript tutorials I demonstrated how to access native platform APIs and features using JavaScript, but I never explained how to develop plugins that could accomplish this in a very maintainable fashion. By moving this native functionality to plugins, the application code remains a lot cleaner and is better for the long run.

For reference, you can see how to create Toast notifications in Android and determine the application version in Android and iOS using my previous tutorials.

This time we’re going to look at bundling that functionality into a plugin.