Tips and Tricks for NativeScript and {N} + Angular 2

Native11. Introduction: NativeScript

By Nathan Walker, Telerik Developer Expert for NativeScript at Progress.

NativeScript is an open source framework for building truly native mobile apps with Angular, TypeScript, or JavaScript. When using the term *native*, what we mean is a truly *native* UI. Instead of using HTML to mark up your view, you can use a clean and concise XML markup language to code views that will use the corresponding *native* UI elements on Android or iOS. Beyond just view markup, NativeScript provides an entire runtime for building/running native mobile apps as well as a rich suite of modules that can be imported/required to make consistent API calls to Android or iOS and under the hood, truly native API calls are made to the respective platforms.

About the Author

Nathan Walker, a Telerik Developer Expert for NativeScript at Progress and senior software engineer at Infowrap, has a varied background rooted in the world of design and the arts combined with 15 years’ experience in Web/mobile application development to provide a unique foundation to problem solving. From Javascript, Objective C, Swift, Java, Ruby, and Angular to NativeScript, Nathan crafts his code like he would design an ad, craft a cinematic, story or write a billboard hit. Always striving to balance his right brain approaches with his left brain sensibilities, he focuses on bringing solid results to a diversity of business environments. Look out for the official ‘NativeScript + Angular’ / ‘Angular Native’ book by Nathan Walker and Nathanael Anderson to be published in the spring of 2017.

Native22. Using Templates

When creating new projects with NativeScript, use the handy ‘–template’ option. There are many different types of templates, including standard JavaScript, TypeScript, master-detail, tab setups, and more. Learn more about the rich set of templates available here.

Native33. Using Core Themes

When designing your NativeScript views, you may want to get ahead of the game by installing the ‘nativescript-theme-core’ npm plug-in to provide bootstrap-like classes and utilities. Some examples include using ‘btn btn-primary’ classes to make a ‘Button’ look nice and consistent across both Android and iOS. You can learn more here.

Native44. Using Data Binding

Data binding uses a similar syntax that you are likely familiar with from other frameworks. Here is an example using a TypeScript class extending ‘Observable’, which comes from the NativeScript ‘data/observable’ module.

Native55. Changing the Statusbar

A common desire you may run into with iOS development is to simply change the statusbar style at the top of the iPhone. You can use the example snippet above as a guide. The ‘UIBarStyle’ options can be found here.

Native66. Using Font Icon Collections

You can use custom font icon collections in your native mobile app, like font-awesome, for instance. Install ‘nativescript-fonticon’ and configure as seen above to get going. You can add the ‘fonticon’ pipe to application resources to use custom font icons by name in your views like this:

<Label class="fa" text="{{'fa-bluetooth' | fonticon}}"></Label>

Native77. Pairing with Angular

When paired with Angular, your horizons expand even brighter because it opens your application up to the rich community surrounding Angular as well as allows you to use familiar binding syntax. Additionally, you can architect your app with rich Angular components and services taking full advantage of the powerful dependency injection system.

Native88. Using Angular Components

You can use Angular components as you would with standard Web development. However, you are free to code NativeScript view markup into your components (or use external ‘templateUrl’) and bind away as normal. With this pair in hand, you also are able to share an entire Web application code base with a NativeScript app. To learn more, see this example seed project utilizing custom component decorators that handle automatic templateUrl swapping for web views or NativeScript views, respectively, for whichever platform the code is run on.

Native99. Registering Custom Components

If you come across a NativeScript custom component plug-in, like ‘nativescript-slides’, for instance, you can use the components inside NativeScript + Angular by importing the ‘registerElement’ utility and register those custom components and give them an element name to be used inside a NativeScript XML view.

More by Author

Must Read