Building Native Mobile Apps with NativeScript and Angular 2

Course details

NativeScript is an open-source framework for building native iOS and Android apps. Web developers who are familiar with Angular 2 can get introduced to NativeScript in this course and learn how to develop an application for iOS and Android by leveraging the NativeScript framework with Angular 2. Join Alex Ziskind as he guides you from the initial installation of NativeScript through architecting an application. He explains how to declare the most common user interface widgets while styling them with CSS. Plus, he demonstrates how to set up the Faker library, and how to programmatically tap into the native navigation engine for iOS and Android.

Learning objectives
Setting up the development environment
Using the NativeScript CLI
Using Angular with NativeScript
Angular bootstrap
Application architecture
Components
User interface
NativeScript widgets
Application lifecycle
Data and event binding
Navigation

Concepts

0. Introduction

01 - Welcome
02 - What you should know
03 - About the exercise files
04 - Touring the demo application

1. Getting Started and Tooling

05 - Setting up the development environment
06 - iOS and Android prerequisites
07 - Using the NativeScript CLI
08 - NativeScript Visual Studio Code extension

2. Introduction to NativeScript with Angular

09 - Introduction to NativeScript
10 - Using Angular with NativeScript
11 - Angular bootstrap
12 - Code organization - Global setup
13 - Code organization - Feature modules
14 - Code organization - Models and settings

3. Application Architecture

15 - Components
16 - Component template
17 - Component styles
18 - Template variables
19 - Handling Listview tap
20 - Backlog item template
21 - Nested layouts
22 - Directives - ngIf
23 - Directives - ngFor
24 - Dependency injection - Part 1
25 - Dependency injection - Part 2
26 - Application lifecycle
27 - Modules
28 - Barrels

4. User Interface

29 - NativeScript widgets
30 - Details component
31 - Segmented bar
32 - Scroll view
33 - Layouts
34 - Layout example
35 - Containers
36 - Side drawer setup
37 - Style overrides
38 - Dynamic styling
39 - Styling main content
40 - Themes
41 - Images
42 - File system images
43 - Base64 images
44 - Gestures
45 - Animating button state
46 - Login animation setup
47 - Declarative animation
48 - Imperative animation

5. Data and Event Binding

49 - Setting up the Faker library
50 - Generating users
51 - Property binding
52 - Event binding
53 - ngModel basics
54 - ngModel forms
55 - Component communication 101
56 - Component output
57 - Component input
58 - List component filtering
59 - Angular pipes

6. Navigation

60 - Native navigation
61 - Master detail
62 - AuthGuard
63 - Angular style navigation
64 - Back navigation

Conclusion

65 - Next steps