Angular 2 and NativeScript
Download as PPTX, PDF0 likes9 views
This document discusses using NativeScript and Angular 2 together to build native mobile apps with a single JavaScript codebase. NativeScript allows writing native iOS and Android apps in JavaScript while providing access to native APIs. Angular 2 is decoupled from the DOM, enabling its use in mobile apps. Together NativeScript and Angular 2 allow leveraging Angular's framework on mobile while using native UI elements and layouts. Examples demonstrate creating an alert dialog in NativeScript alone and with Angular 2. The document encourages trying sample apps and learning more resources.
![Same functionality, {N} + ng2
// main.ts
import {nativeScriptBootstrap} from "nativescript-angular/application";
import {Component, View} from "angular2/angular2";
import {dialogs} from "ui/dialogs";
@Component({})
@View({
directives: [],
template: `
<stack-layout>
<button
(tap)="showAlert()"
text="Hello World"></button>
</stack-layout>
`
})
class HelloPage {
showAlert() {
dialogs.alert({ message: "NativeScript rocks!" });
}
}
export function loaded() {
nativeScriptBootstrap(HelloPage, []);
}](https://image.slidesharecdn.com/angular2nsittinginatree-231015210627-c768a091/85/Angular-2-and-NativeScript-26-320.jpg)
![One syntax for all
Attribute Binding: [attribute]
Event Binding: (event)
Intercepting input: #idhandler
Conditions: *ng-if="expression"
Loops: *ng-for="expression"
Styling: [class.style1]="expression"](https://image.slidesharecdn.com/angular2nsittinginatree-231015210627-c768a091/85/Angular-2-and-NativeScript-29-320.jpg)
Angular 2 and NativeScript
- 1. NativeScript and Angular 2, Sitting in a Tree Jen Looper (Telerik DevRel) @jenlooper
- 2. • Ph.D. … in Medieval French (13th century prose romance FTW) • Retrained! • Worked in startup, nonprofit, big corporate 14 yrs+ • A lot of side projects ladeezfirstmedia.com • Now DevRel@Telerik
- 3. • I’m a developer & I like mobile apps!
- 6. Tobias Bosch Hristo Deshev
- 8. What is NativeScript? • A runtime for building and running native iOS, Android, and (soon) Windows Phone apps with a single, JavaScript code base
- 10. • No cross compilation != • Direct access to native APIs in JS != != • No DOM
- 11. Why NativeScript? • Skills reuse • JavaScript and CSS • Angular2 • Code reuse • npm modules, 3rd-party iOS and Android libraries • Easily use native APIs • No wrappers to access native APIs • Use native UI elements • Open source!
- 12. • Bridge
- 16. How does this even?
- 19. But…who wants to write native iOS or Android code?
- 21. NativeScript modules Code Modules Platform API 2016
- 24. Why NativeScript + Angular 2? • Angular 1 = a technology that relies on browser tech to manipulate the DOM. • NativeScript has no DOM to manipulate • Angular 2 decoupled the Angular framework from the DOM • The door is open to new mobile-friendly tech to leverage this newly decoupled framework!!
- 25. A standard {N} app snippet <!-- main.xml --> <page> <StackLayout> <Button text= "Hello World" tap= "showAlert" /> </StackLayout> </page> /* main.js */ var dialogs = require("ui/dialogs"); exports.showAlert = function() { dialogs.alert({ message: "NativeScript rocks!" }); };
- 26. Same functionality, {N} + ng2 // main.ts import {nativeScriptBootstrap} from "nativescript-angular/application"; import {Component, View} from "angular2/angular2"; import {dialogs} from "ui/dialogs"; @Component({}) @View({ directives: [], template: ` <stack-layout> <button (tap)="showAlert()" text="Hello World"></button> </stack-layout> ` }) class HelloPage { showAlert() { dialogs.alert({ message: "NativeScript rocks!" }); } } export function loaded() { nativeScriptBootstrap(HelloPage, []); }
- 27. Destination Implementation Abstraction Layer The big picture XMLHttpRequest <NS Module> Native iOS call Native Android call iOS App Android App
- 28. Destination Implementation Abstraction Layer The bigger picture ({N}+NG2) HTTP <Angular Component> XMLHttpRequest <NS Module> Native iOS call Native Android call Ajax call iOS App Android App Web App XMLHttpRequest <Browser>
- 29. One syntax for all Attribute Binding: [attribute] Event Binding: (event) Intercepting input: #idhandler Conditions: *ng-if="expression" Loops: *ng-for="expression" Styling: [class.style1]="expression"
- 30. The difference is in the UI Web UI != Mobile UI
- 31. Native Layouts Absolute Dock Grid Stack Wrap
- 32. Let’s take it for a spin! Use a template to create a sample app: $ tns create myNewAngularApp --template https://github.com/NativeScript/template-hello-world-ng $ tns emulate ios
- 33. Clone a repo: TodoMVC – git clone https://github.com/NativeScript/sample-ng-todomvc $ npm install $ tns platform add ios $ tns platform add ios $ tns emulate ios PocketRave https://github.com/jlooper/pocketrave-app
- 34. Learn more & enjoy! NativeScript.org NativeScript Slack Community http://bit.ly/nativescript-slack Really useful article: http://bit.ly/n-ng2 @nativescript @jenlooper