NativeScript and Angular 2
Alexander Vakrilov
NativeScript Angular Integration
Angular Architecture
- Modules
- Components
- Templates
- Data-binding
- Directives
- Services
- Dependency Injection
- Pipes
Modules
- Root Module
- Feature Modules
NativeScript Modules
- NativeScriptModule
// The main NativeScript module. Equivalent to BrowserModule for a web app
import { NativeScriptModule } from "nativescript-angular/nativescript.module";- Forms
- Router
// Exports FormsModule from "@angular/forms".
// NB: Two-way binding lives here
import { NativeScriptFormsModule } from "nativescript-angular/forms";// Exports RouterModule from "@angular/router"
import { NativeScriptRouterModule } from "nativescript-angular/router";Modules - Bootstrap
- Dynamic Platform (JIT compilation)
- Static Platform (AOT compilation)
Demo
Components
- Component Class
- Metadata
- Template*
Templates
NativeScript specifics:
- Same syntax
- Different tags
- Different Layouts
Tips:
- No self-closing tags 😱
- You can use lower or kebab case 🍖
- VS Code snippets extension 🛠️
Demo
Data-binding
- Interpolation*
- Property binding
- Event binding
- Two-way binding
<Label text="{{ todo.text }}"></Label><Label [text]="todo.text"></Label><Button text="+" (tap)="addTodo()"></Button><TextField [(ngModel)]="todoText"></TextField>Demo
Directives
- Structural Directives
- Attribute Directives
<Button *ngIf="isComplete"
text="save"></Button>
<Label *ngFor="let tag of tags"
[text]="tag"></Label>
<Label [class.highlight]="isSelected"
text="My item"></Label>Demo
Services
A service is typically a class with a narrow, well-defined purpose.
It should do something specific and do it well.
Dependency Injection
- Constructor injection
- Injector
- Providers
@Component({ ... })
export class TodoListComponent {
constructor(service: TodoService) { }
}
@NgModule({
//...
providers: [ TodoService ],
})
Demo
Pipes
Pipes transform displayed values within a template.
Pipes
Simple pipe
<Label [text]="todo.dueDate | date | uppercase"></Label>Can have params
<Label [text]="todo.text | uppercase"></Label><Label [text]="todo.dueDate | date:'MM/dd/yy'"></Label>Can be chained
<Label [text]="todos | json"></Label>
<td-todo *ngFor="let todo of (todos$ | async)" [todo]="todo"></td-todo>Cool pipes
Demo
The Code
Q & A
NativeScript and Angular 2
By Alexander Vakrilov
