├── .gitignore ├── README.md ├── angular-tutorial ├── .editorconfig ├── .gitignore ├── .vscode │ └── extensions.json ├── App_Resources │ ├── Android │ │ ├── app.gradle │ │ └── src │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ └── res │ │ │ ├── drawable-hdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-ldpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-mdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-nodpi │ │ │ └── splash_screen.xml │ │ │ ├── drawable-xhdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-xxhdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-xxxhdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable │ │ │ └── ic_launcher_foreground.xml │ │ │ ├── mipmap-anydpi-v26 │ │ │ └── ic_launcher.xml │ │ │ ├── mipmap-hdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-mdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxxhdpi │ │ │ └── ic_launcher.png │ │ │ ├── values-v21 │ │ │ ├── colors.xml │ │ │ └── styles.xml │ │ │ ├── values-v29 │ │ │ └── styles.xml │ │ │ └── values │ │ │ ├── colors.xml │ │ │ ├── ic_launcher_background.xml │ │ │ └── styles.xml │ └── iOS │ │ ├── Assets.xcassets │ │ ├── AppIcon.appiconset │ │ │ ├── Contents.json │ │ │ ├── icon-1024.png │ │ │ ├── icon-20.png │ │ │ ├── icon-20@2x.png │ │ │ ├── icon-20@3x.png │ │ │ ├── icon-29.png │ │ │ ├── icon-29@2x.png │ │ │ ├── icon-29@3x.png │ │ │ ├── icon-40.png │ │ │ ├── icon-40@2x.png │ │ │ ├── icon-40@3x.png │ │ │ ├── icon-60@2x.png │ │ │ ├── icon-60@3x.png │ │ │ ├── icon-76.png │ │ │ ├── icon-76@2x.png │ │ │ └── icon-83.5@2x.png │ │ ├── Contents.json │ │ ├── LaunchScreen.AspectFill.imageset │ │ │ ├── Contents.json │ │ │ ├── LaunchScreen-AspectFill.png │ │ │ ├── LaunchScreen-AspectFill@2x.png │ │ │ └── LaunchScreen-AspectFill@3x.png │ │ └── LaunchScreen.Center.imageset │ │ │ ├── Contents.json │ │ │ ├── LaunchScreen-Center.png │ │ │ ├── LaunchScreen-Center@2x.png │ │ │ └── LaunchScreen-Center@3x.png │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── build.xcconfig ├── README.md ├── nativescript.config.ts ├── package.json ├── references.d.ts ├── src │ ├── app.scss │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── core │ │ │ ├── index.ts │ │ │ ├── models │ │ │ │ ├── flick.model.ts │ │ │ │ └── index.ts │ │ │ └── services │ │ │ │ ├── flick.service.ts │ │ │ │ └── index.ts │ │ └── features │ │ │ ├── details │ │ │ ├── details-routing.module.ts │ │ │ ├── details.component.html │ │ │ ├── details.component.ts │ │ │ └── details.module.ts │ │ │ └── home │ │ │ ├── home-routing.module.ts │ │ │ ├── home.component.html │ │ │ ├── home.component.ts │ │ │ └── home.module.ts │ ├── assets │ │ ├── anastasia.png │ │ ├── beetlejuicemusical.png │ │ └── bookofmormon.png │ ├── main.ts │ └── polyfills.ts ├── tailwind.config.js ├── tsconfig.json └── webpack.config.js ├── plain-js-tutorial ├── .editorconfig ├── .gitignore ├── .vscode │ └── extensions.json ├── App_Resources │ ├── Android │ │ ├── app.gradle │ │ ├── before-plugins.gradle │ │ └── src │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ └── res │ │ │ ├── drawable-hdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-ldpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-mdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-nodpi │ │ │ └── splash_screen.xml │ │ │ ├── drawable-xhdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-xxhdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-xxxhdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable │ │ │ └── ic_launcher_foreground.xml │ │ │ ├── mipmap-anydpi-v26 │ │ │ └── ic_launcher.xml │ │ │ ├── mipmap-hdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-mdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxxhdpi │ │ │ └── ic_launcher.png │ │ │ ├── values-v21 │ │ │ ├── colors.xml │ │ │ └── styles.xml │ │ │ ├── values-v29 │ │ │ └── styles.xml │ │ │ └── values │ │ │ ├── colors.xml │ │ │ ├── ic_launcher_background.xml │ │ │ └── styles.xml │ └── iOS │ │ ├── Assets.xcassets │ │ ├── AppIcon.appiconset │ │ │ ├── Contents.json │ │ │ ├── icon-1024.png │ │ │ ├── icon-20.png │ │ │ ├── icon-20@2x.png │ │ │ ├── icon-20@3x.png │ │ │ ├── icon-29.png │ │ │ ├── icon-29@2x.png │ │ │ ├── icon-29@3x.png │ │ │ ├── icon-40.png │ │ │ ├── icon-40@2x.png │ │ │ ├── icon-40@3x.png │ │ │ ├── icon-60@2x.png │ │ │ ├── icon-60@3x.png │ │ │ ├── icon-76.png │ │ │ ├── icon-76@2x.png │ │ │ └── icon-83.5@2x.png │ │ ├── Contents.json │ │ ├── LaunchScreen.AspectFill.imageset │ │ │ ├── Contents.json │ │ │ ├── LaunchScreen-AspectFill.png │ │ │ ├── LaunchScreen-AspectFill@2x.png │ │ │ └── LaunchScreen-AspectFill@3x.png │ │ └── LaunchScreen.Center.imageset │ │ │ ├── Contents.json │ │ │ ├── LaunchScreen-Center.png │ │ │ ├── LaunchScreen-Center@2x.png │ │ │ └── LaunchScreen-Center@3x.png │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── build.xcconfig ├── README.md ├── app │ ├── app-root.xml │ ├── app.css │ ├── app.js │ ├── assets │ │ ├── anastasia.png │ │ ├── beetlejuicemusical.png │ │ └── bookofmormon.png │ ├── details │ │ ├── details-page.js │ │ ├── details-page.xml │ │ └── details-view-model.js │ ├── home │ │ ├── home-page.js │ │ ├── home-page.xml │ │ └── home-view-model.js │ ├── main-page.js │ ├── main-page.xml │ ├── main-view-model.js │ └── services │ │ └── flick.service.js ├── jsconfig.json ├── nativescript.config.ts ├── package.json └── webpack.config.js ├── plain-tutorial ├── .editorconfig ├── .gitignore ├── .vscode │ └── extensions.json ├── App_Resources │ ├── Android │ │ ├── app.gradle │ │ └── src │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ └── res │ │ │ ├── drawable-hdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-ldpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-mdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-nodpi │ │ │ └── splash_screen.xml │ │ │ ├── drawable-xhdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-xxhdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-xxxhdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable │ │ │ └── ic_launcher_foreground.xml │ │ │ ├── mipmap-anydpi-v26 │ │ │ └── ic_launcher.xml │ │ │ ├── mipmap-hdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-mdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxxhdpi │ │ │ └── ic_launcher.png │ │ │ ├── values-v21 │ │ │ ├── colors.xml │ │ │ └── styles.xml │ │ │ ├── values-v29 │ │ │ └── styles.xml │ │ │ └── values │ │ │ ├── colors.xml │ │ │ ├── ic_launcher_background.xml │ │ │ └── styles.xml │ └── iOS │ │ ├── Assets.xcassets │ │ ├── AppIcon.appiconset │ │ │ ├── Contents.json │ │ │ ├── icon-1024.png │ │ │ ├── icon-20.png │ │ │ ├── icon-20@2x.png │ │ │ ├── icon-20@3x.png │ │ │ ├── icon-29.png │ │ │ ├── icon-29@2x.png │ │ │ ├── icon-29@3x.png │ │ │ ├── icon-40.png │ │ │ ├── icon-40@2x.png │ │ │ ├── icon-40@3x.png │ │ │ ├── icon-60@2x.png │ │ │ ├── icon-60@3x.png │ │ │ ├── icon-76.png │ │ │ ├── icon-76@2x.png │ │ │ └── icon-83.5@2x.png │ │ ├── Contents.json │ │ ├── LaunchScreen.AspectFill.imageset │ │ │ ├── Contents.json │ │ │ ├── LaunchScreen-AspectFill.png │ │ │ ├── LaunchScreen-AspectFill@2x.png │ │ │ └── LaunchScreen-AspectFill@3x.png │ │ └── LaunchScreen.Center.imageset │ │ │ ├── Contents.json │ │ │ ├── LaunchScreen-Center.png │ │ │ ├── LaunchScreen-Center@2x.png │ │ │ └── LaunchScreen-Center@3x.png │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── build.xcconfig ├── README.md ├── app │ ├── app-root.xml │ ├── app.css │ ├── app.ts │ ├── assets │ │ ├── anastasia.png │ │ ├── beetlejuicemusical.png │ │ └── bookofmormon.png │ ├── details │ │ ├── details-page.ts │ │ ├── details-page.xml │ │ └── details-view-model.ts │ ├── home │ │ ├── home-page.ts │ │ ├── home-page.xml │ │ └── home-view-model.ts │ ├── models │ │ ├── flick.model.ts │ │ └── index.ts │ └── services │ │ ├── flick.service.ts │ │ └── index.ts ├── nativescript.config.ts ├── package.json ├── references.d.ts ├── tsconfig.json └── webpack.config.js ├── react-tutorial ├── .editorconfig ├── .gitignore ├── .vscode │ └── extensions.json ├── App_Resources │ ├── Android │ │ ├── app.gradle │ │ └── src │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ └── res │ │ │ ├── drawable-hdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-ldpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-mdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-nodpi │ │ │ └── splash_screen.xml │ │ │ ├── drawable-xhdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-xxhdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-xxxhdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable │ │ │ └── ic_launcher_foreground.xml │ │ │ ├── mipmap-anydpi-v26 │ │ │ └── ic_launcher.xml │ │ │ ├── mipmap-hdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-mdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxxhdpi │ │ │ └── ic_launcher.png │ │ │ ├── values-v21 │ │ │ ├── colors.xml │ │ │ └── styles.xml │ │ │ ├── values-v29 │ │ │ └── styles.xml │ │ │ └── values │ │ │ ├── colors.xml │ │ │ ├── ic_launcher_background.xml │ │ │ └── styles.xml │ └── iOS │ │ ├── Assets.xcassets │ │ ├── AppIcon.appiconset │ │ │ ├── Contents.json │ │ │ ├── icon-1024.png │ │ │ ├── icon-20.png │ │ │ ├── icon-20@2x.png │ │ │ ├── icon-20@3x.png │ │ │ ├── icon-29.png │ │ │ ├── icon-29@2x.png │ │ │ ├── icon-29@3x.png │ │ │ ├── icon-40.png │ │ │ ├── icon-40@2x.png │ │ │ ├── icon-40@3x.png │ │ │ ├── icon-60@2x.png │ │ │ ├── icon-60@3x.png │ │ │ ├── icon-76.png │ │ │ ├── icon-76@2x.png │ │ │ └── icon-83.5@2x.png │ │ ├── Contents.json │ │ ├── LaunchScreen.AspectFill.imageset │ │ │ ├── Contents.json │ │ │ ├── LaunchScreen-AspectFill.png │ │ │ ├── LaunchScreen-AspectFill@2x.png │ │ │ └── LaunchScreen-AspectFill@3x.png │ │ └── LaunchScreen.Center.imageset │ │ │ ├── Contents.json │ │ │ ├── LaunchScreen-Center.png │ │ │ ├── LaunchScreen-Center@2x.png │ │ │ └── LaunchScreen-Center@3x.png │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── build.xcconfig ├── LICENSE ├── README.md ├── nativescript.config.ts ├── package.json ├── patches │ └── @types+react+16.9.34.patch ├── references.d.ts ├── src │ ├── app.css │ ├── app.ts │ ├── assets │ │ ├── anastasia.png │ │ ├── beetlejuicemusical.png │ │ └── bookofmormon.png │ ├── components │ │ ├── DetailsScreen.tsx │ │ ├── HomeScreen.tsx │ │ ├── NavigationParamList.ts │ │ └── Navigator.tsx │ ├── models │ │ ├── flick.model.ts │ │ └── index.ts │ └── services │ │ ├── flick.service.ts │ │ └── index.ts ├── tsconfig.json └── webpack.config.js ├── screenshots └── tutorial-example-app-preview.png ├── svelte-tutorial ├── .editorconfig ├── .gitignore ├── .vscode │ └── extensions.json ├── App_Resources │ ├── Android │ │ ├── app.gradle │ │ └── src │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ └── res │ │ │ ├── drawable-hdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-ldpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-mdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-nodpi │ │ │ └── splash_screen.xml │ │ │ ├── drawable-xhdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-xxhdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable-xxxhdpi │ │ │ ├── background.png │ │ │ └── logo.png │ │ │ ├── drawable │ │ │ └── ic_launcher_foreground.xml │ │ │ ├── mipmap-anydpi-v26 │ │ │ └── ic_launcher.xml │ │ │ ├── mipmap-hdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-mdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxxhdpi │ │ │ └── ic_launcher.png │ │ │ ├── values-v21 │ │ │ ├── colors.xml │ │ │ └── styles.xml │ │ │ ├── values-v29 │ │ │ └── styles.xml │ │ │ └── values │ │ │ ├── colors.xml │ │ │ ├── ic_launcher_background.xml │ │ │ └── styles.xml │ └── iOS │ │ ├── Assets.xcassets │ │ ├── AppIcon.appiconset │ │ │ ├── Contents.json │ │ │ ├── icon-1024.png │ │ │ ├── icon-20.png │ │ │ ├── icon-20@2x.png │ │ │ ├── icon-20@3x.png │ │ │ ├── icon-29.png │ │ │ ├── icon-29@2x.png │ │ │ ├── icon-29@3x.png │ │ │ ├── icon-40.png │ │ │ ├── icon-40@2x.png │ │ │ ├── icon-40@3x.png │ │ │ ├── icon-60@2x.png │ │ │ ├── icon-60@3x.png │ │ │ ├── icon-76.png │ │ │ ├── icon-76@2x.png │ │ │ └── icon-83.5@2x.png │ │ ├── Contents.json │ │ ├── LaunchScreen.AspectFill.imageset │ │ │ ├── Contents.json │ │ │ ├── LaunchScreen-AspectFill.png │ │ │ ├── LaunchScreen-AspectFill@2x.png │ │ │ └── LaunchScreen-AspectFill@3x.png │ │ └── LaunchScreen.Center.imageset │ │ │ ├── Contents.json │ │ │ ├── LaunchScreen-Center.png │ │ │ ├── LaunchScreen-Center@2x.png │ │ │ └── LaunchScreen-Center@3x.png │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── build.xcconfig ├── README.md ├── app │ ├── App.svelte │ ├── app.css │ ├── app.ts │ ├── assets │ │ ├── anastasia.png │ │ ├── beetlejuicemusical.png │ │ └── bookofmormon.png │ ├── models │ │ └── flick.ts │ ├── pages │ │ ├── Details.svelte │ │ └── Home.svelte │ └── services │ │ └── flickService.ts ├── nativescript.config.ts ├── package.json ├── references.d.ts ├── svelte.config.js ├── tsconfig.json └── webpack.config.js └── vue-tutorial ├── .editorconfig ├── .gitignore ├── .vscode └── extensions.json ├── App_Resources ├── Android │ ├── app.gradle │ └── src │ │ └── main │ │ ├── AndroidManifest.xml │ │ └── res │ │ ├── drawable-hdpi │ │ ├── background.png │ │ └── logo.png │ │ ├── drawable-ldpi │ │ ├── background.png │ │ └── logo.png │ │ ├── drawable-mdpi │ │ ├── background.png │ │ └── logo.png │ │ ├── drawable-nodpi │ │ └── splash_screen.xml │ │ ├── drawable-xhdpi │ │ ├── background.png │ │ └── logo.png │ │ ├── drawable-xxhdpi │ │ ├── background.png │ │ └── logo.png │ │ ├── drawable-xxxhdpi │ │ ├── background.png │ │ └── logo.png │ │ ├── drawable │ │ └── ic_launcher_foreground.xml │ │ ├── mipmap-anydpi-v26 │ │ └── ic_launcher.xml │ │ ├── mipmap-hdpi │ │ └── ic_launcher.png │ │ ├── mipmap-mdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xhdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xxhdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xxxhdpi │ │ └── ic_launcher.png │ │ ├── values-v21 │ │ ├── colors.xml │ │ └── styles.xml │ │ ├── values-v29 │ │ └── styles.xml │ │ └── values │ │ ├── colors.xml │ │ ├── ic_launcher_background.xml │ │ └── styles.xml └── iOS │ ├── Assets.xcassets │ ├── AppIcon.appiconset │ │ ├── Contents.json │ │ ├── icon-1024.png │ │ ├── icon-20.png │ │ ├── icon-20@2x.png │ │ ├── icon-20@3x.png │ │ ├── icon-29.png │ │ ├── icon-29@2x.png │ │ ├── icon-29@3x.png │ │ ├── icon-40.png │ │ ├── icon-40@2x.png │ │ ├── icon-40@3x.png │ │ ├── icon-60@2x.png │ │ ├── icon-60@3x.png │ │ ├── icon-76.png │ │ ├── icon-76@2x.png │ │ └── icon-83.5@2x.png │ ├── Contents.json │ ├── LaunchScreen.AspectFill.imageset │ │ ├── Contents.json │ │ ├── LaunchScreen-AspectFill.png │ │ ├── LaunchScreen-AspectFill@2x.png │ │ └── LaunchScreen-AspectFill@3x.png │ └── LaunchScreen.Center.imageset │ │ ├── Contents.json │ │ ├── LaunchScreen-Center.png │ │ ├── LaunchScreen-Center@2x.png │ │ └── LaunchScreen-Center@3x.png │ ├── Info.plist │ ├── LaunchScreen.storyboard │ └── build.xcconfig ├── README.md ├── app ├── app.scss ├── app.ts ├── assets │ ├── anastasia.png │ ├── beetlejuicemusical.png │ └── bookofmormon.png ├── components │ ├── Details.vue │ └── Home.vue ├── models │ └── Flick.ts └── services │ └── FlickService.ts ├── nativescript.config.ts ├── package.json ├── tsconfig.json ├── types ├── references.d.ts └── shims.vue.d.ts └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | package-lock.json 3 | yarn.lock -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # NativeScript Tutorials 2 | 3 | tutorial app preview 4 | 5 | ## Getting Started 6 | 7 | More information can be found on the READMEs of each specific flavor: 8 | 9 | - [Plain](./plain-tutorial) 10 | - [Angular](./angular-tutorial) 11 | - [React](./react-tutorial) 12 | - [Svelte](./svelte-tutorial) 13 | - [Vue](./vue-tutorial) 14 | -------------------------------------------------------------------------------- /angular-tutorial/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | trim_trailing_whitespace = true 7 | charset = utf-8 8 | 9 | [*.json] 10 | indent_style = space 11 | indent_size = 2 12 | 13 | [*.js] 14 | indent_style = space 15 | indent_size = 2 16 | 17 | [*.ts] 18 | indent_style = space 19 | indent_size = 2 -------------------------------------------------------------------------------- /angular-tutorial/.gitignore: -------------------------------------------------------------------------------- 1 | # NativeScript 2 | hooks/ 3 | node_modules/ 4 | platforms/ 5 | 6 | # Logs 7 | logs 8 | *.log 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | 13 | # General 14 | .DS_Store 15 | .AppleDouble 16 | .LSOverride 17 | .idea 18 | .cloud 19 | .project 20 | tmp/ 21 | typings/ 22 | package-lock.json 23 | 24 | # Visual Studio Code 25 | .vscode/* 26 | !.vscode/settings.json 27 | !.vscode/tasks.json 28 | !.vscode/launch.json 29 | !.vscode/extensions.json 30 | -------------------------------------------------------------------------------- /angular-tutorial/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["nativescript.nativescript"] 3 | } 4 | -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/app.gradle: -------------------------------------------------------------------------------- 1 | // Add your native dependencies here: 2 | 3 | // Uncomment to add recyclerview-v7 dependency 4 | //dependencies { 5 | // implementation 'com.android.support:recyclerview-v7:+' 6 | //} 7 | 8 | // If you want to add something to be applied before applying plugins' include.gradle files 9 | // e.g. project.ext.googlePlayServicesVersion = "15.0.1" 10 | // create a file named before-plugins.gradle in the current directory and place it there 11 | 12 | android { 13 | defaultConfig { 14 | minSdkVersion 17 15 | generatedDensities = [] 16 | } 17 | aaptOptions { 18 | additionalParameters "--no-version-vectors" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/drawable-hdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/Android/src/main/res/drawable-hdpi/background.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/drawable-hdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/Android/src/main/res/drawable-hdpi/logo.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/drawable-ldpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/Android/src/main/res/drawable-ldpi/background.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/drawable-ldpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/Android/src/main/res/drawable-ldpi/logo.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/drawable-mdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/Android/src/main/res/drawable-mdpi/background.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/drawable-mdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/Android/src/main/res/drawable-mdpi/logo.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/drawable-nodpi/splash_screen.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/drawable-xhdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/Android/src/main/res/drawable-xhdpi/background.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/drawable-xhdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/Android/src/main/res/drawable-xhdpi/logo.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/drawable-xxhdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/Android/src/main/res/drawable-xxhdpi/background.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/drawable-xxhdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/Android/src/main/res/drawable-xxhdpi/logo.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/drawable-xxxhdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/Android/src/main/res/drawable-xxxhdpi/background.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/drawable-xxxhdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/Android/src/main/res/drawable-xxxhdpi/logo.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/drawable/ic_launcher_foreground.xml: -------------------------------------------------------------------------------- 1 | 6 | 10 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/mipmap-anydpi-v26/ic_launcher.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/Android/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/Android/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/Android/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/Android/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/Android/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/values-v21/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #65ADF1 4 | -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/values-v21/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10 | 11 | 13 | 14 | 15 | 18 | 19 | 20 | 23 | 24 | 28 | -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/values-v29/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 11 | 12 | -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #F5F5F5 4 | #757575 5 | #65ADF1 6 | #272734 7 | -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/Android/src/main/res/values/ic_launcher_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #FFFFFF 4 | -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-1024.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20@2x.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20@3x.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@2x.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@3x.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@2x.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@3x.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@2x.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@3x.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76@2x.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-83.5@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-83.5@2x.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "LaunchScreen-AspectFill.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "filename" : "LaunchScreen-AspectFill@2x.png", 11 | "scale" : "2x" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "filename" : "LaunchScreen-AspectFill@3x.png", 16 | "scale" : "3x" 17 | } 18 | ], 19 | "info" : { 20 | "version" : 1, 21 | "author" : "xcode" 22 | } 23 | } -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@2x.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@3x.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "LaunchScreen-Center.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "filename" : "LaunchScreen-Center@2x.png", 11 | "scale" : "2x" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "filename" : "LaunchScreen-Center@3x.png", 16 | "scale" : "3x" 17 | } 18 | ], 19 | "info" : { 20 | "version" : 1, 21 | "author" : "xcode" 22 | } 23 | } -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@2x.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@3x.png -------------------------------------------------------------------------------- /angular-tutorial/App_Resources/iOS/build.xcconfig: -------------------------------------------------------------------------------- 1 | // You can add custom settings here 2 | // for example you can uncomment the following line to force distribution code signing 3 | // CODE_SIGN_IDENTITY = iPhone Distribution 4 | // To build for device with XCode you need to specify your development team. 5 | // DEVELOPMENT_TEAM = YOUR_TEAM_ID; 6 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 7 | -------------------------------------------------------------------------------- /angular-tutorial/README.md: -------------------------------------------------------------------------------- 1 | # NativeScript for Angular 2 | 3 | tutorial app preview 4 | 5 | ## Development 6 | 7 | This app is built with the NativeScript CLI. Once you have the [CLI installed](https://docs.nativescript.org/start/quick-setup), start by cloning the repo: 8 | 9 | ``` 10 | npm i -g nativescript 11 | ``` 12 | 13 | Clone the repo and go to the project's directory: 14 | 15 | ```bash 16 | git clone https://github.com/NativeScript/tutorials.git 17 | 18 | cd tutorials/angular-tutorial 19 | ``` 20 | 21 | Install the project's dependencies: 22 | 23 | ```bash 24 | npm install 25 | ``` 26 | 27 | You can then run the app on iOS and Android using the following commands: 28 | 29 | ```bash 30 | ns run ios 31 | 32 | ns run android 33 | ``` 34 | -------------------------------------------------------------------------------- /angular-tutorial/nativescript.config.ts: -------------------------------------------------------------------------------- 1 | import { NativeScriptConfig } from '@nativescript/core'; 2 | 3 | export default { 4 | id: 'org.nativescript.angular', 5 | appPath: 'src', 6 | appResourcesPath: 'App_Resources', 7 | android: { 8 | v8Flags: '--expose_gc', 9 | markingMode: 'none' 10 | }, 11 | cli: { 12 | packageManager: 'npm' 13 | } 14 | } as NativeScriptConfig; -------------------------------------------------------------------------------- /angular-tutorial/references.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /angular-tutorial/src/app.scss: -------------------------------------------------------------------------------- 1 | /* 2 | In NativeScript, the app.css file is where you place CSS rules that 3 | you would like to apply to your entire application. Check out 4 | http://docs.nativescript.org/ui/styling for a full list of the CSS 5 | selectors and properties you can use to style UI components. 6 | 7 | /* 8 | In many cases you may want to use the NativeScript core theme instead 9 | of writing your own CSS rules. You can learn more about the 10 | NativeScript core theme at https://github.com/nativescript/theme 11 | The imported CSS rules must precede all other types of rules. 12 | */ 13 | @import "@nativescript/theme/css/core.css"; 14 | @import "@nativescript/theme/css/default.css"; 15 | 16 | @tailwind base; 17 | @tailwind components; 18 | @tailwind utilities; 19 | 20 | /* Place any CSS rules you want to apply on both iOS and Android here. 21 | This is where the vast majority of your CSS code goes. */ 22 | 23 | // applied when device is in light mode 24 | .ns-light { 25 | .bg-primary { 26 | background-color: #fdfdfd; 27 | } 28 | .bg-secondary { 29 | background-color: #ffffff; 30 | } 31 | .text-primary { 32 | color: #444; 33 | } 34 | .text-secondary { 35 | color: #777; 36 | } 37 | } 38 | 39 | // applied when device is in dark mode 40 | .ns-dark { 41 | .bg-primary { 42 | background-color: #212121; 43 | } 44 | .bg-secondary { 45 | background-color: #383838; 46 | } 47 | .text-primary { 48 | color: #eee; 49 | } 50 | .text-secondary { 51 | color: #ccc; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /angular-tutorial/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from "@angular/core"; 2 | import { Routes } from "@angular/router"; 3 | import { NativeScriptRouterModule } from "@nativescript/angular"; 4 | 5 | const routes: Routes = [ 6 | { path: "", redirectTo: "/home", pathMatch: "full" }, 7 | { 8 | path: "home", 9 | loadChildren: () => 10 | import("./features/home/home.module").then(m => m.HomeModule) 11 | }, 12 | { 13 | path: "details/:id", 14 | loadChildren: () => 15 | import("./features/details/details.module").then(m => m.DetailsModule) 16 | } 17 | ]; 18 | 19 | @NgModule({ 20 | imports: [NativeScriptRouterModule.forRoot(routes)], 21 | exports: [NativeScriptRouterModule] 22 | }) 23 | export class AppRoutingModule {} 24 | -------------------------------------------------------------------------------- /angular-tutorial/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /angular-tutorial/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core' 2 | 3 | @Component({ 4 | selector: 'ns-app', 5 | templateUrl: './app.component.html', 6 | }) 7 | export class AppComponent {} 8 | -------------------------------------------------------------------------------- /angular-tutorial/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; 2 | import { NativeScriptModule } from "@nativescript/angular"; 3 | 4 | import { AppRoutingModule } from "./app-routing.module"; 5 | import { AppComponent } from "./app.component"; 6 | 7 | @NgModule({ 8 | bootstrap: [AppComponent], 9 | imports: [NativeScriptModule, AppRoutingModule], 10 | declarations: [AppComponent], 11 | schemas: [NO_ERRORS_SCHEMA] 12 | }) 13 | export class AppModule {} 14 | -------------------------------------------------------------------------------- /angular-tutorial/src/app/core/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./models"; 2 | export * from "./services"; 3 | -------------------------------------------------------------------------------- /angular-tutorial/src/app/core/models/flick.model.ts: -------------------------------------------------------------------------------- 1 | export interface FlickModel { 2 | id: number; 3 | genre: string; 4 | title: string; 5 | image: string; 6 | url: string; 7 | description: string; 8 | details: { 9 | title: string; 10 | body: string; 11 | }[]; 12 | } 13 | -------------------------------------------------------------------------------- /angular-tutorial/src/app/core/models/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./flick.model"; 2 | -------------------------------------------------------------------------------- /angular-tutorial/src/app/core/services/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./flick.service"; 2 | -------------------------------------------------------------------------------- /angular-tutorial/src/app/features/details/details-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from "@angular/core"; 2 | import { Routes } from "@angular/router"; 3 | import { NativeScriptRouterModule } from "@nativescript/angular"; 4 | import { DetailsComponent } from "./details.component"; 5 | 6 | export const routes: Routes = [ 7 | { 8 | path: "", 9 | component: DetailsComponent 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [NativeScriptRouterModule.forChild(routes)] 15 | }) 16 | export class DetailsRoutingModule {} 17 | -------------------------------------------------------------------------------- /angular-tutorial/src/app/features/details/details.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | 11 | 18 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /angular-tutorial/src/app/features/details/details.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | import { ActivatedRoute } from '@angular/router' 3 | import { FlickService, FlickModel } from "~/app/core"; 4 | 5 | @Component({ 6 | moduleId: module.id, 7 | selector: "ns-details", 8 | templateUrl: "details.component.html" 9 | }) 10 | export class DetailsComponent { 11 | 12 | flick: FlickModel | undefined = undefined; 13 | 14 | constructor( 15 | private activatedRoute: ActivatedRoute, 16 | private flickService: FlickService) {} 17 | 18 | ngOnInit(): void { 19 | const id = +this.activatedRoute.snapshot.params.id; 20 | if (id) { 21 | this.flick = this.flickService.getFlickById(id); 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /angular-tutorial/src/app/features/details/details.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; 2 | import { NativeScriptCommonModule } from "@nativescript/angular"; 3 | import { DetailsRoutingModule } from "./details-routing.module"; 4 | import { DetailsComponent } from "./details.component"; 5 | 6 | @NgModule({ 7 | imports: [NativeScriptCommonModule, DetailsRoutingModule], 8 | declarations: [DetailsComponent], 9 | schemas: [NO_ERRORS_SCHEMA] 10 | }) 11 | export class DetailsModule {} 12 | -------------------------------------------------------------------------------- /angular-tutorial/src/app/features/home/home-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from "@angular/core"; 2 | import { Routes } from "@angular/router"; 3 | import { NativeScriptRouterModule } from "@nativescript/angular"; 4 | import { HomeComponent } from "./home.component"; 5 | 6 | export const routes: Routes = [ 7 | { 8 | path: "", 9 | component: HomeComponent 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [NativeScriptRouterModule.forChild(routes)] 15 | }) 16 | export class HomeRoutingModule {} 17 | -------------------------------------------------------------------------------- /angular-tutorial/src/app/features/home/home.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | 18 | 23 | 30 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /angular-tutorial/src/app/features/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | import { ItemEventData } from "@nativescript/core"; 3 | import { RouterExtensions } from "@nativescript/angular"; 4 | import { FlickService } from "~/app/core"; 5 | 6 | @Component({ 7 | moduleId: module.id, 8 | selector: "ns-home", 9 | templateUrl: "home.component.html" 10 | }) 11 | export class HomeComponent { 12 | flicks = this.flickService.getFlicks(); 13 | 14 | constructor( 15 | private routerExtensions: RouterExtensions, 16 | private flickService: FlickService 17 | ) {} 18 | 19 | onFlickTap(args: ItemEventData): void { 20 | this.routerExtensions.navigate(["details", this.flicks[args.index].id]); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /angular-tutorial/src/app/features/home/home.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; 2 | import { NativeScriptCommonModule } from "@nativescript/angular"; 3 | import { HomeRoutingModule } from "./home-routing.module"; 4 | import { HomeComponent } from "./home.component"; 5 | 6 | @NgModule({ 7 | imports: [NativeScriptCommonModule, HomeRoutingModule], 8 | declarations: [HomeComponent], 9 | schemas: [NO_ERRORS_SCHEMA] 10 | }) 11 | export class HomeModule {} 12 | -------------------------------------------------------------------------------- /angular-tutorial/src/assets/anastasia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/src/assets/anastasia.png -------------------------------------------------------------------------------- /angular-tutorial/src/assets/beetlejuicemusical.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/src/assets/beetlejuicemusical.png -------------------------------------------------------------------------------- /angular-tutorial/src/assets/bookofmormon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/angular-tutorial/src/assets/bookofmormon.png -------------------------------------------------------------------------------- /angular-tutorial/src/main.ts: -------------------------------------------------------------------------------- 1 | import { platformNativeScript, runNativeScriptAngularApp } from '@nativescript/angular'; 2 | 3 | import { AppModule } from './app/app.module' 4 | 5 | runNativeScriptAngularApp({ 6 | appModuleBootstrap: () => platformNativeScript().bootstrapModule(AppModule), 7 | }); 8 | 9 | -------------------------------------------------------------------------------- /angular-tutorial/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * NativeScript Polyfills 3 | */ 4 | 5 | // Install @nativescript/core polyfills (XHR, setTimeout, requestAnimationFrame) 6 | import '@nativescript/core/globals'; 7 | // Install @nativescript/angular specific polyfills 8 | import '@nativescript/angular/polyfills'; 9 | 10 | /** 11 | * Zone.js and patches 12 | */ 13 | // Add pre-zone.js patches needed for the NativeScript platform 14 | import '@nativescript/zone-js/dist/pre-zone-polyfills'; 15 | 16 | // Zone JS is required by default for Angular itself 17 | import 'zone.js'; 18 | 19 | // Add NativeScript specific Zone JS patches 20 | import '@nativescript/zone-js'; 21 | -------------------------------------------------------------------------------- /angular-tutorial/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | './src/**/*.{css,xml,html,vue,svelte,ts,tsx}' 5 | ], 6 | // use the .ns-dark class to control dark mode (applied by NativeScript) - since 'media' (default) is not supported. 7 | darkMode: ['class', '.ns-dark'], 8 | theme: { 9 | extend: {}, 10 | }, 11 | plugins: [], 12 | corePlugins: { 13 | preflight: false // disables browser-specific resets 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /angular-tutorial/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esnext", 4 | "target": "es2020", 5 | "moduleResolution": "node", 6 | "experimentalDecorators": true, 7 | "emitDecoratorMetadata": true, 8 | "noEmitHelpers": true, 9 | "noEmitOnError": true, 10 | "skipLibCheck": true, 11 | "lib": [ 12 | "ESNext", 13 | "dom" 14 | ], 15 | "baseUrl": ".", 16 | "paths": { 17 | "~/*": [ 18 | "src/*" 19 | ], 20 | "@/*": [ 21 | "src/*" 22 | ] 23 | }, 24 | "removeComments": false 25 | }, 26 | "include": [ 27 | "src/tests/**/*.ts", 28 | "src/**/*.ios.ts", 29 | "src/**/*.android.ts" 30 | ], 31 | "files": [ 32 | "./src/main.ts", 33 | "./references.d.ts", 34 | "./src/polyfills.ts" 35 | ], 36 | "exclude": [ 37 | "node_modules", 38 | "platforms", 39 | "e2e" 40 | ] 41 | } -------------------------------------------------------------------------------- /angular-tutorial/webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require("@nativescript/webpack"); 2 | 3 | module.exports = (env) => { 4 | webpack.init(env); 5 | 6 | // Learn how to customize: 7 | // https://docs.nativescript.org/webpack 8 | 9 | return webpack.resolveConfig(); 10 | }; 11 | 12 | 13 | -------------------------------------------------------------------------------- /plain-js-tutorial/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | trim_trailing_whitespace = true 7 | charset = utf-8 8 | 9 | [*.json] 10 | indent_style = space 11 | indent_size = 2 12 | 13 | [*.js] 14 | indent_style = space 15 | indent_size = 2 16 | 17 | [*.ts] 18 | indent_style = space 19 | indent_size = 2 -------------------------------------------------------------------------------- /plain-js-tutorial/.gitignore: -------------------------------------------------------------------------------- 1 | # NativeScript 2 | hooks/ 3 | node_modules/ 4 | platforms/ 5 | 6 | # Logs 7 | logs 8 | *.log 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | 13 | # General 14 | .DS_Store 15 | .AppleDouble 16 | .LSOverride 17 | .idea 18 | .cloud 19 | .project 20 | tmp/ 21 | typings/ 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | -------------------------------------------------------------------------------- /plain-js-tutorial/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["nativescript.nativescript"] 3 | } 4 | -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/app.gradle: -------------------------------------------------------------------------------- 1 | // You can add your native dependencies here 2 | dependencies { 3 | // implementation 'androidx.multidex:multidex:2.0.1' 4 | } 5 | 6 | android { 7 | // compileSdkVersion 32 8 | // buildToolsVersion "32.0.0" 9 | // ndkVersion "" 10 | 11 | defaultConfig { 12 | minSdkVersion 17 13 | // targetSdkVersion 32 14 | 15 | // Version Information 16 | versionCode 1 17 | versionName "1.0.0" 18 | 19 | generatedDensities = [] 20 | } 21 | 22 | aaptOptions { 23 | additionalParameters "--no-version-vectors" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/before-plugins.gradle: -------------------------------------------------------------------------------- 1 | // this configurations is loaded before building plugins, as well as before building 2 | // the app - this is where you can apply global settings and overrides 3 | 4 | project.ext { 5 | // androidXAppCompat = "1.4.1" 6 | // androidXExifInterface = "1.3.3" 7 | // androidXFragment = "1.4.1" 8 | // androidXMaterial = "1.5.0" 9 | // androidXMultidex = "2.0.1" 10 | // androidXTransition = "1.4.1" 11 | // androidXViewPager = "1.0.0" 12 | 13 | // useKotlin = true 14 | // kotlinVersion = "1.6.0" 15 | } 16 | -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/drawable-hdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/Android/src/main/res/drawable-hdpi/background.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/drawable-hdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/Android/src/main/res/drawable-hdpi/logo.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/drawable-ldpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/Android/src/main/res/drawable-ldpi/background.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/drawable-ldpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/Android/src/main/res/drawable-ldpi/logo.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/drawable-mdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/Android/src/main/res/drawable-mdpi/background.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/drawable-mdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/Android/src/main/res/drawable-mdpi/logo.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/drawable-nodpi/splash_screen.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/drawable-xhdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/Android/src/main/res/drawable-xhdpi/background.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/drawable-xhdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/Android/src/main/res/drawable-xhdpi/logo.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/drawable-xxhdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/Android/src/main/res/drawable-xxhdpi/background.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/drawable-xxhdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/Android/src/main/res/drawable-xxhdpi/logo.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/drawable-xxxhdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/Android/src/main/res/drawable-xxxhdpi/background.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/drawable-xxxhdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/Android/src/main/res/drawable-xxxhdpi/logo.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/drawable/ic_launcher_foreground.xml: -------------------------------------------------------------------------------- 1 | 6 | 10 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/mipmap-anydpi-v26/ic_launcher.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/Android/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/Android/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/Android/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/Android/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/Android/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/values-v21/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/values-v29/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 14 | 15 | 17 | 18 | -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | #F5F5F5 5 | 6 | 7 | #757575 8 | 9 | 10 | #65ADF1 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/Android/src/main/res/values/ic_launcher_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #FFFFFF 4 | -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-1024.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20@2x.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20@3x.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@2x.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@3x.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@2x.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@3x.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@2x.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@3x.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76@2x.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-83.5@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-83.5@2x.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "LaunchScreen-AspectFill.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "filename" : "LaunchScreen-AspectFill@2x.png", 11 | "scale" : "2x" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "filename" : "LaunchScreen-AspectFill@3x.png", 16 | "scale" : "3x" 17 | } 18 | ], 19 | "info" : { 20 | "version" : 1, 21 | "author" : "xcode" 22 | } 23 | } -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@2x.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@3x.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "LaunchScreen-Center.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "filename" : "LaunchScreen-Center@2x.png", 11 | "scale" : "2x" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "filename" : "LaunchScreen-Center@3x.png", 16 | "scale" : "3x" 17 | } 18 | ], 19 | "info" : { 20 | "version" : 1, 21 | "author" : "xcode" 22 | } 23 | } -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@2x.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@3x.png -------------------------------------------------------------------------------- /plain-js-tutorial/App_Resources/iOS/build.xcconfig: -------------------------------------------------------------------------------- 1 | // You can add custom settings here 2 | // for example you can uncomment the following line to force distribution code signing 3 | // CODE_SIGN_IDENTITY = iPhone Distribution 4 | // To build for device with XCode you need to specify your development team. 5 | // DEVELOPMENT_TEAM = YOUR_TEAM_ID; 6 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 7 | -------------------------------------------------------------------------------- /plain-js-tutorial/README.md: -------------------------------------------------------------------------------- 1 | # NativeScript Plain 2 | 3 | tutorial app preview 4 | 5 | ## Development 6 | 7 | This app is built with the NativeScript CLI. Once you have the [CLI installed](https://docs.nativescript.org/start/quick-setup), start by cloning the repo: 8 | 9 | ``` 10 | npm i -g nativescript 11 | ``` 12 | 13 | Clone the repo and go to the project's directory: 14 | 15 | ```bash 16 | git clone https://github.com/NativeScript/tutorials.git 17 | 18 | cd tutorials/plain-js-tutorial 19 | ``` 20 | 21 | Install the project's dependencies: 22 | 23 | ```bash 24 | npm install 25 | ``` 26 | 27 | You can then run the app on iOS and Android using the following commands: 28 | 29 | ```bash 30 | ns run ios 31 | 32 | ns run android 33 | ``` 34 | -------------------------------------------------------------------------------- /plain-js-tutorial/app/app-root.xml: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /plain-js-tutorial/app/app.css: -------------------------------------------------------------------------------- 1 | /* app/app.css */ 2 | 3 | /* applied when device is in light mode */ 4 | .ns-light .bg-primary { 5 | background-color: #fdfdfd; 6 | } 7 | 8 | .ns-light .bg-secondary { 9 | background-color: #ffffff; 10 | } 11 | 12 | .ns-light.text-primary { 13 | color: #444; 14 | } 15 | 16 | .ns-light.text-secondary { 17 | color: #777; 18 | } 19 | 20 | /* applied when device is in dark mode */ 21 | .ns-dark .bg-primary { 22 | background-color: #212121; 23 | } 24 | 25 | .ns-dark .bg-secondary { 26 | background-color: #383838; 27 | } 28 | 29 | .ns-dark .text-primary { 30 | color: #eee; 31 | } 32 | 33 | .ns-dark .text-secondary { 34 | color: #ccc; 35 | } -------------------------------------------------------------------------------- /plain-js-tutorial/app/app.js: -------------------------------------------------------------------------------- 1 | /* 2 | In NativeScript, the app.js file is the entry point to your application. 3 | You can use this file to perform app-level initialization, but the primary 4 | purpose of the file is to pass control to the app’s first module. 5 | */ 6 | 7 | import { Application } from '@nativescript/core'; 8 | 9 | Application.run({ moduleName: 'app-root' }) 10 | 11 | /* 12 | Do not place any code after the application has been started as it will not 13 | be executed on iOS. 14 | */ 15 | -------------------------------------------------------------------------------- /plain-js-tutorial/app/assets/anastasia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/app/assets/anastasia.png -------------------------------------------------------------------------------- /plain-js-tutorial/app/assets/beetlejuicemusical.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/app/assets/beetlejuicemusical.png -------------------------------------------------------------------------------- /plain-js-tutorial/app/assets/bookofmormon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/tutorials/fc246f251ab33540b356484aefa719c4fde2daba/plain-js-tutorial/app/assets/bookofmormon.png -------------------------------------------------------------------------------- /plain-js-tutorial/app/details/details-page.js: -------------------------------------------------------------------------------- 1 | import { DetailsViewModel } from './details-view-model' 2 | 3 | export function navigatingTo(args) { 4 | const page = args.object 5 | page.bindingContext = new DetailsViewModel(page.navigationContext) 6 | } -------------------------------------------------------------------------------- /plain-js-tutorial/app/details/details-page.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /plain-js-tutorial/app/details/details-view-model.js: -------------------------------------------------------------------------------- 1 | // app/details/details-view-model.js 2 | 3 | import { Observable } from '@nativescript/core' 4 | import { FlickService } from '../services/flick.service' 5 | 6 | // Add the contents of HomeViewModel class 👇 7 | export class DetailsViewModel extends Observable { 8 | #flick 9 | 10 | // the passed in context object during the navigation will be here 11 | constructor(_context) { 12 | super() 13 | 14 | this.#flick = FlickService.getInstance().getFlickById(_context.flickId) 15 | } 16 | 17 | get flick() { 18 | return this.#flick 19 | } 20 | } -------------------------------------------------------------------------------- /plain-js-tutorial/app/home/home-page.js: -------------------------------------------------------------------------------- 1 | // app/home/home-page.js 2 | 3 | import { HomeViewModel } from './home-view-model' 4 | 5 | export function navigatingTo(args) { 6 | if (args.isBackNavigation) { 7 | return 8 | } 9 | 10 | const page = args.object 11 | page.bindingContext = new HomeViewModel() 12 | } -------------------------------------------------------------------------------- /plain-js-tutorial/app/home/home-page.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | 23 | 24 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /plain-js-tutorial/app/home/home-view-model.js: -------------------------------------------------------------------------------- 1 | // app/home/home-view-model.js 2 | 3 | // Update this 👇 4 | import { Frame, Observable, ObservableArray } from '@nativescript/core' 5 | import { FlickService } from '../services/flick.service' 6 | 7 | // Add the contents of HomeViewModel class 👇 8 | export class HomeViewModel extends Observable { 9 | #flicks; 10 | 11 | constructor() { 12 | super() 13 | this.populateFlicks() 14 | } 15 | 16 | // this will be used as the data source of our ListView 17 | get flicks() { 18 | return new ObservableArray(this.#flicks) 19 | } 20 | 21 | populateFlicks() { 22 | this.#flicks = FlickService.getInstance().getFlicks(); 23 | } 24 | 25 | // Add this 👇 26 | onFlickTap(args) { 27 | Frame.topmost().navigate({ 28 | moduleName: 'details/details-page', 29 | context: { flickId: this.#flicks[args.index].id } 30 | }) 31 | } 32 | } -------------------------------------------------------------------------------- /plain-js-tutorial/app/main-page.js: -------------------------------------------------------------------------------- 1 | import { createViewModel } from './main-view-model'; 2 | 3 | export function onNavigatingTo(args) { 4 | const page = args.object 5 | page.bindingContext = createViewModel() 6 | } 7 | -------------------------------------------------------------------------------- /plain-js-tutorial/app/main-page.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |