Angular for NativeScript

NativeScript doesn’t require Angular, but it’s even better when you use it.
You can fully reuse skills and code from the web to build beautiful, high performance native mobile apps. NativeScript features deep integration with Angular 2, the latest and greatest (and fastest) Angular framework.

 

We've put together a handy tutorial to get you started.

Angular + NativeScript Tutorial

Overview Video

Tips

tips
  • When starting a new NativeScript Angular project, make sure to use the -ng flag to get the skeleton code.

  • In your views, do not use self-closing XML like <Label [text]="binding" />. Instead close all elements with a discrete closing tag: <Label [text]="binding"></Label> 

  • If you're planning to add NativeScript to an existing Angular "web" codebase, keep in mind window does not exist in NativeScript, therefore ensure to remove any explicit dependencies on the browser's global window object in your code.

  • Learn from the nativescript-angular project examples on the NativeScript Angular examples repository

  • Instead of using Angular's `ROUTER_PROVIDERS` and `ROUTER_DIRECTIVES`, use these:

    import {NS_ROUTER_PROVIDERS, NS_ROUTER_DIRECTIVES} from 'nativescript-angular/router';

     

Tricks

tricks
  • Remember, there is no DOM in NativeScript, so separate layout from business logic for maximal reuse.

  • Use the NativeScript Angular Plugin Seed to quickly create your own NativeScript plugins for features your project needs.

  • Angular "Decorators" are powerful. Learn how to utilize them to maximize code sharing between web and native platforms.

  • Utilize Angular's `provide` api when setting up the dependency injector to provide substitutes for libraries/services that may have been built for the web. See an example

  • If you have a function callback that should be updating your view and it is not, you may need to run your callback through `zonedCallback`, a global defined by the NativeScript runtime. Potentially problematic code:

    1. this.someEventEmitter.on(‘someEvent’, (eventData: any) => {
    2.  // no bindings will update in the view
    3. });


    Since `zonedCallback` is a global, you can just declare it at the top of your file to suffice the `tsc` compiler:

    1. declare var zonedCallback: Function;
    2. this.someEventEmitter.on(‘someEvent’, zonedCallback((eventData: any) => {
    3.  // this will fire angular’s change detection properly
    4. }));

Stay connected with NativeScript

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© 2016 Progress Software Corporation. All Rights Reserved.