Download to read offline
![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/ngoogle-231015211228-c94f69f4/85/NativeScript-and-Angular-13-320.jpg)
![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/ngoogle-231015211228-c94f69f4/75/NativeScript-and-Angular-13-2048.jpg)
Uploaded byJen Looper
NativeScript and Angular
This document summarizes NativeScript and how it can be used with Angular 2 to build native mobile apps. NativeScript is an open source framework that allows developers to create native iOS and Android apps using JavaScript and Angular 2. It decouples the Angular framework from the DOM, allowing Angular 2 to be used with NativeScript to build truly native mobile apps that can leverage native device APIs and share most of their code between iOS and Android. The document outlines the benefits and integration of NativeScript and Angular 2, provides code samples, and discusses adoption goals and roadmaps.
EngineeringâŚ
More Related Content
Similar to NativeScript and Angular
NativeScript and Angular
- 1. NativeScript + Angular2 Jen Looper Developer Advocate @jenlooper
- 2. What is NativeScript? â˘Open source framework ⢠Create native mobile apps for iOS, Android (and eventually Windows Universal) ⢠Use JavaScript (âweb skillsâ) ⢠Write once, run everywhere ⢠Share 100% code between iOS/Android ⢠Share 80% code with web ⢠Reuse popular plugins from NodeJS/iOS/Android ⢠Integrates deeply with Angular and TypeScript
- 3. + Xamarin (owned by Microsoft) Fuse Tools ReactNative (owned by Facebook) Ionic (+ PhoneGap) âNative Hybridâ âCross-compileâ âWeb Hybridâ
- 4. Rich, animated, âno compromiseâ nativeUI Cross platform)
- 5. Two ways towrite NativeScript 1) 2) Standard JS + CSS + XML Angular 2
- 9.
- 10. ngConf Fast facts: â May4th to 6th in Salt Lake City â Largest Angular developer event in US (~1300 developers)
- 11. 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!!
- 12. 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!" }); };
- 13. 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, []); }
- 14. The big picture {N}Module Native iOS call Native Android call iOS App Android App
- 15. 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>
- 16.
- 17. Adoption Goals (2016) Goalfor 2016: Grow NativeScript adoption by 15x Jan Feb Mar Apr May Jun Jul Aug Sept Oct Nov Dec Aug Sept Oct Nov Dec 2x 2016 5x 3x Google Angular2 event (ângConfâ); NativeScript Angular2 push begins Measured* active developers (via NativeScript CLI)
- 18. ⢠Active monthlyCLI users doubled Aug to Dec â15 ⢠Doubled again Dec to Feb â16 ⢠Steady increase of CLI use and new users
- 19. Angular Roadmap Jan FebMar Apr May Jun Jul Aug Sept Oct Nov Dec Microsoft BUILD ngConf Angular 2 RC {N} ng beta Angular 2 (final) {N} ng (final) AngularConnect (London)
- 20. We have anamazing community!
- 21. Join the growing NativeScript communityon Slack bit.ly/nativescript-slack
- 22. Modulus Sachse ConstructionDay Care This or That! PocketSmith