Angular Native

aka. NativeScript + Angular

Project Setup

https://nativescript.org/angular

tns create project-name --ng


// Definitely install the core theme

cd project-name
npm i nativescript-theme-core --save

Setup Routes

1. Add components folder

2. Add components.module

3. Define routes (in same file or separate)

4. Define COMPONENTS convenience

5. Import ComponentsModule into main.ts

Setup a ListView

1. Add list.component for '/list' route

2. Add ListView and bind to items without styling and run...

3. Then add 'list-group' and 'list-group-item'

4. Then override 'list-group' for 'height:100%'

Setup a Modal

1. Add modal.component

2. Discuss entryComponents, declarations, etc. for modal setup and NgModule

Setup Firebase

1. Add GoogleService-Info.plist

2. Add google-services.json

3. Integrate nativescript-plugin-firebase

4. Add:

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

npm i nativescript-plugin-firebase --save

Get in the Zone.js

- Angular change detection

- 3rd party plugins: NgZone

- Observables with OnPush

Custom plugin registration

Facebook Shimmer Effect

npm i nativescript-shimmer --save

import {registerElement} from
   "nativescript-angular/element-registry";
registerElement("Shimmer", () =>
  require("nativescript-shimmer").Shimmer);

Redux via ngrx/store

npm i @ngrx/core @ngrx/store @ngrx/effects --save

Let's create an 'ADD' action for our list.

Quick Recap

* ComponentsModule: ease of managing components

* Routes

* ListView with different data binding considerations

* Modals

* Firebase integration

* Custom plugin registration

* Redux via ngrx/store + ngrx/effects integration

Theme skins

ShoutOutPlay

Example

npm i nativescript-dev-sass --save

Nathan Walker

@wwwalkerrun

NativeScript Slack: http://tinyurl.com/nativeScriptSlack

Angular2 seed advanced: http://github.com/NathanWalker/angular2-seed-advanced

Demo Angular Native app presented: http://github.com/NathanWalker/angular-native-demo