nativescript: cross-platform mobile apps with javascript and angular
TRANSCRIPT
![Page 1: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/1.jpg)
NativeScriptCross-platform mobile apps with JavaScript
![Page 2: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/2.jpg)
Todd Anglin@toddanglin
Burke Holland@burkeholland
![Page 3: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/3.jpg)
Workshop Agenda
• Intro to NativeScript• NativeScript core concepts• “Hello World”• Defining Views• Debugging JavaScript• Basic data binding• Styling views with CSS
• Intro to Angular 2 concepts• Angular 2 + NativeScript• Navigating views• BONUS
• Extending with plugins• Adding animations• Using Telerik Platform
Ante Meridiem (9AM to Noon) Post Meridiem (1PM to 4PM)
![Page 4: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/4.jpg)
Intro to NativeScript”How did we get here?”
![Page 5: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/5.jpg)
2013 2014 2015 2016 2017
Early prototypes
“Core” engineering
Public launch
Adoption ramp-up
Mass adoption
Project Timeline
![Page 6: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/6.jpg)
Delivering on the overdue promise of
“hybrid.”
![Page 7: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/7.jpg)
Swift/Obj-C Java .NET
![Page 8: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/8.jpg)
Mobile WebHybridNative
("1st Gen" x-plat native)
![Page 9: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/9.jpg)
We ❤Web.But…
We need:• Better offline support• Access to device APIs• Home screen icons• Push notifications• App monetization• …
![Page 10: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/10.jpg)
Hybrid Promise
100% Web
100% NativeHybrid
ReachCode/Skill Reuse
RichnessPremium experience
Device APIs
Best of both?
![Page 11: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/11.jpg)
Hybrid Reality
![Page 12: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/12.jpg)
80% coded 20%remaining
80% of dev time
Hybrid Reality
![Page 13: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/13.jpg)
80% coded 20%remaining
80% of dev time 80% of dev time
Hybrid Reality
![Page 14: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/14.jpg)
Hybrid "Peak"
![Page 15: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/15.jpg)
Hybrid Promise
100% Web
100% NativeHybrid
ReachCode/Skill Reuse
RichnessPremium experience
Device APIs
Compromises
![Page 16: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/16.jpg)
Binary Choice
NativeHybrid
😎 Best experience🐢 One platform at a time
🔥 Fast to market😭 Compromise on UX
![Page 17: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/17.jpg)
Binary Choice
NativeHybrid
🔥 Fast to market😎 Best experience
![Page 18: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/18.jpg)
JavaScript-driven native
🔥 Fast to market😎 Best experience
![Page 19: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/19.jpg)
"Hybrid"Web UI with limited access to
native APIsNative App Shell
WebViewPlugins Plugins
Entire app lives here
![Page 20: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/20.jpg)
Native App
"JavaScript-driven Native"Native UI driven by JavaScript
Native UI
JavaScript-to-Native bridge
JavaScript Engine(Your app code runs here)
Native APIs
![Page 21: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/21.jpg)
NativeScript(by Telerik)
React Native(by Facebook)
“JavaScript-drive Native”
![Page 22: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/22.jpg)
Native App
Native UI
JavaScript-to-Native runtime
JavaScript Engine(Your app code runs here)
Native APIs
Native App
Native UI
JavaScript Engine(Your app code runs here)
Native APIsAPI
WrapperAPI
Wrapper
PluginsPlugins
API Wrapper
API Wrapper
API Wrapper
API Wrapper
Plugins created with JS/TypeScript Plugins created with native code
![Page 23: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/23.jpg)
“JavaScript-driven Native”
• Share code• Reuse existing skills/teams• Reuse existing libraries
• Native UI (no WebView!)• Full access to device APIs• Immediate access to new OS
features
🔥 Fast to market😎 Best experience
![Page 24: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/24.jpg)
What is NativeScript?
• Open source framework (ASLv2)• Create native mobile apps for iOS, Android
(and eventually Windows 10)• 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
![Page 25: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/25.jpg)
With NativeScript…
• No web views (platform native UI)• Use JavaScript (or TypeScript)• 100% access to ALL native APIs (even new APIs)• Made for “web developers” (JS, CSS, XML)• Use Angular for web AND native mobile• Reuse thousands of libraries from
Node/iOS/Android/Web
![Page 26: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/26.jpg)
The {N} difference…
![Page 27: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/27.jpg)
Demo available in the app stores in May
Rich, animated, “no compromise” native UI(with shared UI code)
1
![Page 28: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/28.jpg)
Measurable native UI performance(“no jank”)
2
![Page 29: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/29.jpg)
Maximum code and skill reusability
3
Video credit: Nathan Walker, {N} community member
![Page 30: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/30.jpg)
How does NativeScript work?Under the covers
![Page 31: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/31.jpg)
![Page 32: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/32.jpg)
Generated at build time for OS & 3rd party
native libraries
![Page 33: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/33.jpg)
NativeScript Android example
output:
JavaScript
![Page 34: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/34.jpg)
NativeScript iOS example
JavaScript
![Page 35: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/35.jpg)
![Page 36: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/36.jpg)
Runs on V8 JavaScript VM
Runs on JavaScriptCore VM
![Page 37: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/37.jpg)
![Page 38: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/38.jpg)
NativeScript Module Layer (NML)
• Abstractions on native APIs that provide unified, cross-platform API
• Dozens available out of the box• Easy for developers to add• IMPORTANT: All native APIs still available at JavaScript layer for platform-specific
scenarios
• NativeScript modules follow Node module’s conventions (CommonJS).
![Page 39: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/39.jpg)
Example: NativeScript file module
![Page 40: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/40.jpg)
![Page 41: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/41.jpg)
![Page 42: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/42.jpg)
Putting it all together
Style with CSSDefine UI with XML Logic with JavaScript
![Page 43: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/43.jpg)
![Page 44: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/44.jpg)
“Hello World”
![Page 45: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/45.jpg)
Two ways to use NativeScript
1)
2)
![Page 46: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/46.jpg)
Command Line Interface (CLI)
• Use Command Prompt (Win) or Terminal (Mac, Linux)
• Free, Part of open source project
• Requires installation, local environment setup to build for iOS/Android (requires Mac for iOS)
• Integrates with Visual Studio Code (via plugin)
WHY: More control, Free, Integrate with existing IDEs/code editors
WHO: More technical developers used to using CLI, Open source developers
![Page 47: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/47.jpg)
Telerik Platform
• Use AppBuilder or Screen Builder• Subscription required
• Build in the cloud (no local install required)
• Easiest way to get started
WHY: Richer tooling, Easier setup, Platform integrated
WHO: Less technical developers, Prefer Platform integrations, Windows developers targeting iOS
![Page 48: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/48.jpg)
Telerik PlatformPowerful visual tooling, cloud builds and
more for NativeScript app developers.
![Page 49: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/49.jpg)
NativeScript CLI requirements
https://github.com/nativescript/nativescript-cli#system-requirements
Xcode, Xcode CLI tools, iOS SDK
JDK, Apache Ant, Android SDK
$ tns doctor
![Page 50: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/50.jpg)
Choice in Architecture
JavaScriptWrite your application using plain JavaScript
TypeScriptUse TypeScript to get
Object Oriented features and compile time error
checking
AngularUse Angular to architect
application. Reuse almost all code between web and
mobile
![Page 51: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/51.jpg)
Angular & TypeScript
• Created by Google• Open source• Popular JavaScript framework
for building complex web apps• “Angular 2” ships in May
• Created by Microsoft• Open source• Popular compiler for JavaScript that
adds powerful language features• Used to create Angular 2 and {N}
![Page 52: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/52.jpg)
Starting a new project
![Page 53: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/53.jpg)
{demo}
![Page 54: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/54.jpg)
Running on iOS
or$ tns emulate ios
![Page 55: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/55.jpg)
Running on Android
or$ tns emulate android
![Page 56: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/56.jpg)
A better Android emulator
Visual Studio Android Emulator
Genymotion
![Page 57: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/57.jpg)
NativeScript LiveSync$ tns livesync //For all connected devices/emulators
$ tns livesync android //Target specific platform
$ tns livesync ios --emulator
$ tns livesync ios --emulator --watch
• Refresh app with latest changes to JS, CSS, XML
• No re-build• Works with
emulators AND device
![Page 58: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/58.jpg)
![Page 59: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/59.jpg)
app.js
![Page 60: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/60.jpg)
Defining Views
![Page 61: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/61.jpg)
Pages
• XML markup structure• Elements (e.g. <Page>, <Label>) are
NativeScript modules
![Page 62: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/62.jpg)
LayoutsUI Elements
![Page 63: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/63.jpg)
Layouts
Absolute Dock Grid Stack Wrap
![Page 64: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/64.jpg)
![Page 65: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/65.jpg)
UI Widgets
• Button• Label• TextField• TextView• SearchBar• Switch• Slider• Progress• ActivityIndicator• Image
• ListView• HtmlView• WebView• TabView• SegmentedBar• DatePicker• TimePicker• ListPicker• Dialogs
Out-of-the-boxNative UI widgetsmeans…• Native behavior• Native perf• Native accessibility• Parity with “native”
![Page 66: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/66.jpg)
Native UI widgets
Native API
{N} Module button
android.widget.Button UIButton
![Page 67: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/67.jpg)
Label
TextField
Repeater
SegmentedBar
![Page 68: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/68.jpg)
GridLayout
GridLayout
Label TextField
StackLayout
![Page 69: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/69.jpg)
{demo}
![Page 70: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/70.jpg)
Targeting Views• Target based on:
• screens size• minWH<X>, minW<X>, minH<X>
• platform• ios, android, windows
• Orientation• land, port
<file-name>[.<qualifier>]*.<extension>
styles.android.cssstyles.ios.css
mypage.minWH600.xmlmypage.xml
![Page 71: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/71.jpg)
TIP• Platform specific capabilities are always available
• JavaScript: <view>.android or <view>.ios• Markup: <android></android> or <ios></ios>• Attributes: android:<attribute> or ios:<attribute>
• Ex: <label android:class="…" ios:class="…" />
Write once by default.Target specific platform capabilities when needed.
![Page 72: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/72.jpg)
{demo}
![Page 73: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/73.jpg)
Handling EventsXML<button text="Click Me" tap="{{ onTap }}" ...
JS (ViewModel)function pageViewModel() {
var viewModel;viewModel.onTap = function() {
alert("You tapped me!");} return viewModel;
}
exports.pageViewModel = pageViewModel;
JS (View)function onViewLoad(args) {
var page = args.object; page.bindingContext = pageViewModel();
}
• Create event handlers in JavaScript
• Bind to event names
![Page 74: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/74.jpg)
Handling Eventstaplabel.on(gestures.GestureTypes.tap, function (args) {
console.log("Tap");});
swipelabel.on(gestures.GestureTypes.swipe, function (args) {
console.log("Swipe Direction: " + args.direction); });
Multiple eventslabel.on("tap, doubleTap, longPress", function (args) {
console.log("Event: " + args.eventName);});
• Tap• Double Tap• Long Press• Swipe• Pan• Pinch• Rotation• Touch
![Page 75: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/75.jpg)
{demo}
![Page 76: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/76.jpg)
Debugging
![Page 77: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/77.jpg)
“If debugging is the process of removing software bugs, then programming must be the process of putting them in.”
- Edsger Dijkstra
![Page 78: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/78.jpg)
Debugging Strategies• Debug by alert (no really)• Debug by console.log• Debug by Developer Tools• Debug by IDE
• Visual Studio• Visual Studio Code
![Page 79: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/79.jpg)
Debug By Alert
![Page 80: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/80.jpg)
{demo}
![Page 81: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/81.jpg)
Telerik UI for NativeScript
- Open source- Widgets: ListView,
SlideDrawer- No support
UI for {N}
- Widgets: Chart, Calendar, DataForm
- No support in entry pricing
- UI for {N} can buy this version for support
UI for {N} PROFREE $199/$599 (with support)
Advanced, rich, native UI widgets for iOS and Android
![Page 82: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/82.jpg)
Telerik UI for NativeScript
npm install nativescript-telerik-ui --save
• Add powerful ListView, SlideDrawer to apps
• Free native widgets
• Support available with PRO license
![Page 83: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/83.jpg)
Custom XML Components<page xmlns:custom="modules/mymodule">
<custom:MyCustomControl /></page>
• Encapsulate reusable UI in components• JS only, OR• XML + CSS + JS
• Add to pages with xmlns
modulesmymodule
.XML
MyCustomControl.js
MyCustomControl.css
MyCustomControl.xml
![Page 84: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/84.jpg)
![Page 85: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/85.jpg)
{demo}
![Page 86: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/86.jpg)
Navigating Views
![Page 87: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/87.jpg)
Basics
• Topmost frame is root-level container
• Facilitates navigation between views
"topmost frame"
var frameModule = require("ui/frame");var topmost = frameModule.topmost();
![Page 88: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/88.jpg)
Navigating with "topmost"1. By File Nametopmost.navigate("details-page");
2. With Navigation Entryvar navigationEntry = {
moduleName: "details-page",context: {info: "something"},animated: false
};topmost.navigate(navigationEntry);
3. Dynamically with Functionvar factoryFunc = function () {
var page = new pagesModule.Page();page.content = ...return page;
};topmost.navigate(factoryFunc);
• Always navigating with topmost.navigate()
• Pass context to views and parse in onNavigatedTo event
• Go back with:• topmost.goBack();
![Page 89: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/89.jpg)
View transitionsvar navigationEntry = {
moduleName: "main-page",animated: true,transition: {
name: "slide",duration: 380,curve: "easeIn" }
};topmost.navigate(navigationEntry);
• curl (same as curlUp) (iOS only)• curlUp (iOS only)• curlDown (iOS only)• explode (Android Lollipop and later)• fade• flip (same as flipRight)• flipRight• flipLeft• slide (same as slideLeft)• slideLeft• slideRight• slideTop• slideBottom
Different transitions can be set for iOS and Android
![Page 90: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/90.jpg)
{demo}
![Page 91: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/91.jpg)
Basic Data Binding
![Page 92: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/92.jpg)
Data binding
![Page 93: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/93.jpg)
{{ newTodo }}
![Page 94: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/94.jpg)
{demo}
![Page 95: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/95.jpg)
Data binding improved
![Page 96: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/96.jpg)
Data binding lists<Page>
<StackLayout><ListView items="{{ items }}" height="200">
<ListView.itemTemplate><Label text="{{ $value }}" />
</ListView.itemTemplate></ListView>
</StackLayout></Page>
• Bind to array or collection of data
• Access named properties or $value
• Access parent binding context with $parents• EX: OrderID in list of Order Details
![Page 97: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/97.jpg)
{{ todos }}
{{ $value }}
![Page 98: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/98.jpg)
{demo}
![Page 99: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/99.jpg)
Data binding expressions
Static Expression<TextField text="{{ sourceProperty, sourceProperty + ' some static text' }}" />
Ternary Operator<TextField class="{{ isConditionTrue ? 'myClass true' : 'myClass false' }}" />
Converter<TextField text="{{ testDate, testDate | dateConverter('DD.MM.YYYY') }}" />
Execute expressions during data binding to determine visual state
Source Property Binding Expression
![Page 100: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/100.jpg)
Convertersvar dateConverter = {
toView: function (value, format) {var result = format;var day = value.getDate();...//Return formatted model valuereturn result;},toModel: function (value, format) {
//Convert value from UI format to model formatreturn result;
}}
• Encapsulate more complex data binding formatting rules
• Can be one-way or two-way
• Add to page binding context OR global application context
![Page 101: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/101.jpg)
Data binding expressionsFeature Example
property access obj1.obj2.prop1
array access arrayVar[indexVar]
logical operators !var1
unary operators +var1, -var2
binary operators var1 + var2
comparison operators var1 > var2
logical comparison operators var1>1 && var2>1.
ternary operator var1 ? var2 : var3
grouping parenthesis (a + b) * (c + d)
function calls myFunc(var1, var2, ..., varN)
filters expression \| filter1(param1, ...) | filter 2
![Page 102: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/102.jpg)
{{ total, total +' items left' }}
![Page 103: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/103.jpg)
{demo}
![Page 104: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/104.jpg)
Basic Styling with CSS
![Page 105: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/105.jpg)
CSS
Convention:
app.css <-- Global styles
[viewName].css <-- View styles
[viewName].[platform].css
![Page 106: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/106.jpg)
Supported Properties• color• background-color• background-image• background-repeat• background-position• background-size• border-color• border-width• border-radius• font• font-family• font-size
• font-style• font-weight• text-align• text-decoration• text-transform• vertical-align• horizontal-align• margin• margin-top• margin-right• margin-bottom• margin-left
• width• height• min-width• min-height• padding• padding-top• padding-right• padding-bottom• padding-left• visibility• opacity
![Page 107: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/107.jpg)
Supported Selectors
• Type• button { color: red; }
• Class• .mybutton { color: green; }
• ID• #myButton { color: #FFF; }
![Page 108: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/108.jpg)
{demo}
![Page 109: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/109.jpg)
Custom Fonts1. Use TTF or OTF fonts2. Put fonts in: app > fonts3. Use in CSS
.icon { font-size: 30; font-family: 'FontAwesome';
}
![Page 110: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/110.jpg)
{demo}
![Page 111: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/111.jpg)
Sass & LESS• Use Sass or LESS syntax• Auto-compiled
$ tns install sassOR
$tns install less
![Page 112: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/112.jpg)
Pre-lunch Wrap-up
![Page 113: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/113.jpg)
![Page 114: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/114.jpg)
Bottom line• Access all native APIs with JavaScript• 0-day support for new APIs• Use modules to increase cross-platform “write
once”• Use CSS to style native UI• Use XML markup to define views• Use CLI (+ IDE integrations) or Telerik Platform to
build and debug
![Page 115: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/115.jpg)
Lunch Break Resume @ 1PM
![Page 116: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/116.jpg)
Workshop Agenda
• Intro to NativeScript• NativeScript core concepts• “Hello World”• Defining Views• Debugging JavaScript• Basic data binding• Styling views with CSS
• Intro to Angular 2 concepts• Angular 2 + NativeScript• Navigating views• BONUS
• Extending with plugins• Adding animations• Using Telerik Platform
Ante Meridiem (9AM to Noon) Post Meridiem (1PM to 4PM)
![Page 117: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/117.jpg)
![Page 118: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/118.jpg)
Adoption trendsWarm the brains-up after lunch
![Page 119: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/119.jpg)
Adoption Goals (2016)Goal for 2016: Grow NativeScript adoption by 15x
Jan Feb Mar Apr May Jun Jul Aug Sept Oct Nov DecAug Sept Oct Nov Dec
2x
2016
5x
3x
Google Angular2 event (“ngConf”);NativeScript Angular2 push begins
Measured* active developers(via NativeScript CLI)
![Page 120: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/120.jpg)
• Active monthly CLI users doubledAug to Dec ‘15
• Doubled again Dec to Feb ‘16
• On track to double again by end of April
60% increase in new users since January
![Page 121: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/121.jpg)
![Page 122: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/122.jpg)
Developer Comments
![Page 123: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/123.jpg)
Join the growing NativeScript
community on Slack
bit.ly/nativescript-slack
![Page 124: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/124.jpg)
Integrations & Ecosystem
![Page 125: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/125.jpg)
Plugin Ecosystem
![Page 126: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/126.jpg)
Plugin Ecosystem
Reusable libraries IDEs Verified Plugins
![Page 127: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/127.jpg)
![Page 128: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/128.jpg)
![Page 129: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/129.jpg)
Modulus Sachse Construction Day Care This or That!
PocketSmith
![Page 130: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/130.jpg)
“With NativeScript it became apparent quickly that we would no longer have a need for iOS and Android specialists—our Microsoft .NET team became fully functional—fast.”
Allan Kreyer, CIM Mobility Founder
![Page 131: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/131.jpg)
Angular 2 & NativeScript
![Page 132: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/132.jpg)
![Page 133: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/133.jpg)
![Page 134: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/134.jpg)
One framework. Mobile & desktop.
![Page 135: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/135.jpg)
Mobile
![Page 136: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/136.jpg)
ResponsivePWA (Progressive Web Apps)Native Mobile
![Page 137: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/137.jpg)
Why Angular 2?
![Page 138: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/138.jpg)
Template< ... >
Component{ ... }
Metadata
Directive{ ... }
InjectorService A
Service B
![Page 139: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/139.jpg)
RendererTemplate
< ... >
![Page 140: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/140.jpg)
RendererTemplate
< ... >
![Page 141: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/141.jpg)
An Intro to Angular 2
![Page 142: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/142.jpg)
![Page 143: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/143.jpg)
![Page 144: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/144.jpg)
Template< ... >
Component{ ... }
Metadata
Directive{ ... }
InjectorService A
Service B
![Page 145: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/145.jpg)
Template< ... >
Component{ ... }
Metadata
![Page 146: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/146.jpg)
<!DOCTYPE html><html>
<head><base href="/">
</head>
<body ng-app=”app">
<app>Loading...</app>
<script src="bundle.js"></script>
</body>
</html>
index.html
![Page 147: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/147.jpg)
const AppComponent = {template: `<h1>Root Component</h1>
`};
angular.module('app', []).component('app', AppCompon3ent);
app.js
![Page 148: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/148.jpg)
Root Component
![Page 149: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/149.jpg)
const AppComponent = {template: `<h1>Root Component</h1>
`};
angular.module('app', []).component('app', AppComponent);
app.js
![Page 150: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/150.jpg)
const AppComponent = {template: `<h1>Root Component</h1>
`};
angular.module('app', []).component('app', AppComponent);
app.component.ts
![Page 151: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/151.jpg)
import { Component } from ”@angular/core”
const AppComponent = {template: `<h1>Root Component</h1>
`};
angular.module('app', []).component('app', AppComponent);
app.component.ts
![Page 152: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/152.jpg)
import { Component } from ”@angular/core”
@Component({template: `<h1>Root Component</h1>
`});
angular.module('app', []).component('app', AppComponent);
app.component.ts
![Page 153: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/153.jpg)
import { Component } from ”@angular/core”
@Component({selector: 'app',template: `<h1>Root Component</h1>
`});
angular.module('app', []).component('app', AppComponent);
app.component.ts
![Page 154: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/154.jpg)
<!DOCTYPE html><html>
<head><base href="/">
</head>
<body ng-app=”app">
<app>Loading...</app>
<script src="bundle.js"></script>
</body>
</html>
index.html
![Page 155: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/155.jpg)
<!DOCTYPE html><html>
<head><base href="/">
</head>
<body>
<app>Loading...</app>
<script src="bundle.js"></script>
</body>
</html>
index.html
![Page 156: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/156.jpg)
import { Component } from ”@angular/core”
@Component({selector: 'app',template: `<h1>Root Component</h1>
`});
angular.module('app', []).component('app', AppComponent);
app.component.ts
![Page 157: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/157.jpg)
import { Component } from ”@angular/core”
@Component({selector: 'app',template: `<h1>Root Component</h1>
`});
export class AppComponent {}
app.component.ts
![Page 158: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/158.jpg)
Root Component
![Page 159: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/159.jpg)
import { Component } from ”@angular/core”
@Component({selector: 'app',template: `<h1>Root Component</h1>
`});
export class AppComponent {}
app.component.ts
![Page 160: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/160.jpg)
import { Component } from ”@angular/core”
@Component({selector: 'app',template: `<h1>Root Component</h1>
`});
export class AppComponent {message: 'Root Component'
}
app.component.ts
![Page 161: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/161.jpg)
import { Component } from ”@angular/core”
@Component({selector: 'app',template: `<h1>{{ message }}</h1>
`});
export class AppComponent {message: 'Root Component'
}
app.component.ts
![Page 162: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/162.jpg)
Root Component
![Page 163: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/163.jpg)
import { Component } from ”@angular/core”
@Component({selector: 'app',template: `<h1>{{ message }}</h1>
`});
export class AppComponent {message: 'Root Component'
}
app.component.ts
![Page 164: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/164.jpg)
import { Component } from ”@angular/core”
@Component({selector: 'app',template: `<input value=”{{ message }}”>
`});
export class AppComponent {message: 'Root Component'
}
app.component.ts
![Page 165: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/165.jpg)
import { Component } from ”@angular/core”
@Component({selector: 'app',template: `<input [value]=”message”>
`});
export class AppComponent {message: 'Root Component'
}
app.component.ts
![Page 166: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/166.jpg)
[ value ] or {{ value }} = One way binding from class to view
![Page 167: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/167.jpg)
import { Component } from ”@angular/core”
@Component({selector: 'app',template: `<input [value]=”message”>
`});
export class AppComponent {message: 'Root Component'
}
app.component.ts
![Page 168: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/168.jpg)
import { Component } from ”@angular/core”
@Component({selector: 'app',template: `<input [value]=”message”><button (click)=“showMessage()”>Show Message</button>
`});
export class AppComponent {message: 'Root Component’;showMessage() {
alert(this.message); }
}
app.component.ts
![Page 169: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/169.jpg)
Root Component Show Me
The page at http://localhost/3000 says:
Root Component
![Page 170: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/170.jpg)
( event ) = Binds an event to a function
![Page 171: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/171.jpg)
import { Component } from ”@angular/core”
@Component({selector: 'app',template: `<input [value]=”message”><button (click)=“showMessage()”>Show Message</button>
`});
export class AppComponent {message: 'Root Component’;showMessage() {
alert(this.message); }
}
app.component.ts
![Page 172: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/172.jpg)
import { Component } from ”@angular/core”
@Component({selector: 'app',template: `<input [(ngModel)]=”message”><button (click)=“showMessage()”>Show Message</button>
`});
export class AppComponent {message: 'Root Component’;showMessage() {
alert(this.message); }
}
app.component.ts
![Page 173: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/173.jpg)
[(ngModel)] = Two way binding
![Page 174: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/174.jpg)
Services And Injection
![Page 175: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/175.jpg)
export class MessageService {message: string = ”Service Message”
}
message.service.ts
![Page 176: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/176.jpg)
import { Injectable } from ”@angular/core”
export class MessageService {message: string = ”Service Message”
}
message.service.ts
![Page 177: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/177.jpg)
import { Injectable } from ”@angular/core”
@Injectable()export class MessageService {
message: string = ”Service Message”}
message.service.ts
![Page 178: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/178.jpg)
import { Component } from ”@angular/core”
@Component({selector: 'app',template: `<input [(ngModel)]=”message”><button (click)=“showMessage()”>Show Message</button>
`});
export class AppComponent {message: 'Root Component’;showMessage() {
alert(this.message); }
} app.component.ts
![Page 179: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/179.jpg)
import { Component } from ”@angular/core”import { MessageService } from ”./message.service”
@Component({selector: 'app',template: `<input [(ngModel)]=”message”><button (click)=“showMessage()”>Show Message</button>
`});
export class AppComponent {message: 'Root Component’;showMessage() {
alert(this.message); }
} app.component.ts
![Page 180: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/180.jpg)
@Component({selector: 'app',providers: [MessageService]template: `<input [(ngModel)]=”message”><button (click)=“showMessage()”>Show Message</button>
`});
export class AppComponent {message: string;showMessage() {
alert(this.message); }constructor(MessageService _messageService) {this.message = _messageService.message;
} app.component.ts
![Page 181: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/181.jpg)
Service Message Show Me
The page at http://localhost/3000 says:
Service Message
![Page 182: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/182.jpg)
Directives
![Page 183: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/183.jpg)
import { Component } from ”@angular/core”import { MessageService } from ”./message.service.ts”
@Component({selector: 'app',providers: [MessageService]template: `<input [(ngModel)]=”message”><button (click)=“showMessage()”>Show Message</button>
`});
export class AppComponent {message: string;showMessage() {
alert(this.message); }constructor(MessageService _messageService) {this.message = _messageService.message;
}} app.component.ts
![Page 184: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/184.jpg)
import { MessageService } from ”./message.service.ts”
export class MessageDirective {}
message.directive.ts
![Page 185: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/185.jpg)
import { MessageService } from ”./message.service.ts”
@Component({selector: ’message',providers: [MessageService]template: `<input [(ngModel)]=”message”><button (click)=“showMessage()”>Show Message</button>
`});
export class MessageDirective {}
message.directive.ts
![Page 186: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/186.jpg)
import { MessageService } from ”./message.service.ts”
@Component({selector: ’message',providers: [MessageService]template: `<input [(ngModel)]=”message”><button (click)=“showMessage()”>Show Message</button>
`});
export class MessageDirective {message: string;showMessage() {
alert(this.message); }constructor(MessageService _messageService) {this.message = _messageService.message;
} }
message.directive.ts
![Page 187: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/187.jpg)
import { Component } from ”@angular/core”import { MessageService } from ”./message.service.ts”
@Component({selector: 'app',providers: [MessageService]template: `<input [(ngModel)]=”message”><button (click)=“showMessage()”>Show Message</button>
`});
export class AppComponent {message: string;showMessage() {
alert(this.message); }constructor(MessageService _messageService) {this.message = _messageService.message;
}} app.component.ts
![Page 188: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/188.jpg)
import { Component } from ”@angular/core”import { MessageDirective } from ”./message.directive.ts”
@Component({selector: 'app',providers: [MessageService]template: `<input [(ngModel)]=”message”><button (click)=“showMessage()”>Show Message</button>
`});
export class AppComponent {message: string;showMessage() {
alert(this.message); }constructor(MessageService _messageService) {this.message = _messageService.message;
}} app.component.ts
![Page 189: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/189.jpg)
import { Component } from ”@angular/core”import { MessageDirective } from ”./message.directive.ts”
@Component({selector: 'app',directives: [MessageDirective]template: `<input [(ngModel)]=”message”><button (click)=“showMessage()”>Show Message</button>
`});
export class AppComponent {message: string;showMessage() {
alert(this.message); }constructor(MessageService _messageService) {this.message = _messageService.message;
}} app.component.ts
![Page 190: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/190.jpg)
import { Component } from ”@angular/core”import { MessageDirective } from ”./message.directive.ts”
@Component({selector: 'app',directives: [MessageDirective]template: `<message></message>
`});
export class AppComponent {message: string;showMessage() {
alert(this.message); }constructor(MessageService _messageService) {this.message = _messageService.message;
}}
app.component.ts
![Page 191: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/191.jpg)
import { Component } from ”@angular/core”import { MessageDirective } from ”./message.directive.ts”
@Component({selector: 'app',directives: [MessageDirective]template: `<message></message>
`});
export class AppComponent {}
app.component.ts
![Page 192: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/192.jpg)
Service Message Show Me
The page at http://localhost/3000 says:
Service Message
![Page 193: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/193.jpg)
{demo}Let’s Code
![Page 194: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/194.jpg)
an open source framework for building truly native mobile apps with JavaScript. Use web skills, like Angular and CSS, and get native UI and performance on iOS and Android.
NativeScript is…
![Page 195: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/195.jpg)
NativeScriptdelivers the promises
of “hybrid.”
![Page 196: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/196.jpg)
![Page 197: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/197.jpg)
APENDIX
![Page 198: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/198.jpg)
![Page 199: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/199.jpg)
![Page 200: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/200.jpg)
Adding TypeScript
tns install typescript
![Page 201: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/201.jpg)
{demo}
![Page 202: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/202.jpg)
Common App Patterns• Services
• An object that is responsible for getting and setting data
• Models• Super dumb objects that define the structure of the data
• ViewModels• AKA Controllers. Controls the state of the UI and performs when changes are made to model objects.
![Page 203: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/203.jpg)
Angular 2
![Page 204: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/204.jpg)
Data binding with Angular• {{ }} – still works!
• You can still use {N}'s standard binding…• But you can do it even better.
• [] – Property binding • One way.• Like array notation in JavaScript. One way
• () – Event Binding• When you want to bind to an event.
• Two Way – [(ngModel)]• Almost always used with ngModel
![Page 205: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/205.jpg)
Extra Angular Goodies• Dependency Injection• Routing• Components• Pipes• Services• FAST
![Page 206: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/206.jpg)
Using Telerik PlatformCloud-based tooling for NativeScript
![Page 207: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/207.jpg)
![Page 208: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/208.jpg)
Why?• Cloud based, zero setup• Build for iOS from Windows• Deploy to device without provisioning profiles• Manage app properties faster
![Page 209: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/209.jpg)
AppBuilder
![Page 210: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/210.jpg)
Screen Builder
![Page 211: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/211.jpg)
Companion App
![Page 212: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/212.jpg)
{demo}
![Page 213: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/213.jpg)
Animations
![Page 214: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/214.jpg)
Animation basics
Animate:• opacity• backgroundColor• translateX and translateY• scaleX and scaleY• rotate
Configure:• target (UI element)• duration (in ms)• delay• iterations• curve
![Page 215: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/215.jpg)
Simple animationvar view = page.getViewById("myLabel");
view.animate({translate: { x: 0, y: 100},duration: 1000,curve: enums.AnimationCurve.easeIn
});
• Animations can be chained together
• Multiple properties and elements can be animated
• Return a promise that can be canceled
![Page 216: NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular](https://reader030.vdocument.in/reader030/viewer/2022012320/5872ed5b1a28abfa548b77af/html5/thumbnails/216.jpg)
{demo}