Autoplay
Autocomplete
Previous Lesson
Complete and Continue
[LEGACY] NativeScript + Angular: Build Native iOS, Android & Web Apps
Introduction
Course Introduction (1:42)
What is NativeScript? (2:47)
Join our Online Learning Community
Under the Hood of NativeScript (2:49)
What is Angular & Course Requirements (2:39)
Our First NativeScript App! (6:27)
Course Outline (2:53)
How To Get The Most Out Of The Course (4:16)
Using the Course Source Code
The Academind Pro Referral Program
Optional: Angular - A Quick Refresher
Module Introduction (0:32)
What is Angular? (2:42)
Single Page Applications (SPAs) in Angular & NativeScript (3:09)
Understanding Components (1:37)
Installing Angular with the Command Line Interface (CLI) (4:29)
Installing our IDE (4:59)
Understanding the Angular Project Folder Structure (8:14)
The App Component (7:04)
Creating our First Component (4:05)
Cross Component Communication with Property Binding (5:23)
Understanding Directives & String Interpolation (4:05)
Handling User Input (4:08)
Understanding Event Binding (2:13)
Executing Methods with Local References (1:49)
Understanding Two Way Binding (5:56)
Passing Data Up With a Custom Event (3:58)
Implementing Routing (7:10)
Setting Up Services (3:15)
Using the Service with Dependency Injection (2:48)
Working with Lifecycle Hooks (3:25)
Adding a Person with Services (2:44)
Navigating Between Components (2:03)
Removing Items "On Click" (3:08)
Implementing an Active Push Mechanism (5:34)
Dive Deeper Into Observables & Subjects
Sending HTTP Requests (10:03)
Showing a Placeholder Whilst Waiting for a Response (2:05)
Wrap Up (1:17)
Useful Resources & Links
Setting Up the Development Environment
Setting up NativeScript on macOS (16:12)
Setting up NativeScript on Windows (13:59)
Building iOS Apps on Windows
Using Different Emulator Devices (7:33)
Running the App on a Real Device - What can go wrong?
Running the App on a Real Device (5:24)
What's Up With The Extra .js Files? (1:19)
Using Hot Module Replacement (HMR)
Useful Resources & Links
Understanding the Basics
Module Introduction (1:55)
Starting the Emulators (2:55)
MUST READ: The "nativescript-angular" Package
How Does The App Start? (6:21)
Understanding Components & Layouts (8:47)
Building our First own Component (6:40)
Adding Basic Element Interactions (8:07)
Understanding the Styling Basics (5:43)
Styling a Button (6:12)
Assignment - Basics (Problem) (1:07)
Assignment - Basics (Solution) (2:35)
Understanding Layouts - Theory (3:11)
The StackLayout (9:52)
The FlexboxLayout (15:22)
Assignment - Flex Layout (Problem) (1:33)
Assignment - Flex Layout (Solution) (8:07)
The GridLayout (15:35)
Assignment - Grid Layout (Problem) (3:16)
Assignment - Grid Layout (Solution) (9:42)
Understanding the AbsoluteLayout (7:24)
Implementing the Grid Layout in the Course Project (6:02)
Splitting our App Into Components (8:03)
Passing Data Between Components (7:44)
Creating a List of Items (4:30)
Making the List Scrollable (3:13)
Using the "ListView" (5:59)
Extracting & Rendering Dynamic Values (8:07)
Debugging our Application (12:13)
More on Debugging (with VS Code)
Wrap Up (1:37)
Useful Resources & Links
Diving Into App Navigation
Module Introduction (1:01)
Understanding the Different Navigation Options (3:55)
Planning the App (2:31)
Creating the App Pages (5:31)
Adding our First Route (8:10)
Implementing Page Navigation (4:29)
How to Add Forward & Backward Navigation to our App (2:54)
Understanding the Router Object (3:17)
Working with the "nsRouterLink" Directive (2:07)
Assignment - Navigation (Problem) (1:01)
Assignment - Navigation (Solution) (3:40)
Adding an Actionbar and a "Back" Button (13:28)
Creating a Shared Component for the "Back" Button (5:10)
Adding Logic to the "Back" Button (3:56)
Overwriting the Default Transition Effect (4:14)
Adding the "TabView" Component (5:19)
Displaying Dynamic Routing Content in the Tabs (11:33)
Highlighting the Currently Active Tab (1:53)
Adding a Sidedrawer (7:17)
Adding the Sidedrawer Icon (4:34)
Rendering the Button on Android Only (2:19)
Forwarding the "Button is Pressed" Info to the App Component (6:48)
Displaying the Sidedrawer (7:59)
Implementing the Logout Logic (4:58)
Passing Around Dynamic Data (5:12)
Reading Dynamic Parameters (9:03)
Using the Dynamic Parameter (4:39)
Injecting Dynamic Values Into the Action Bar on Per Page Level (7:56)
Opening a Modal (11:30)
Getting Access to the "viewContainerRef" (4:34)
Passing Data Into the Modal (7:18)
Loading Routes Lazily - Theory (1:44)
Implementing Lazy Loading (12:50)
Loading Additional Modules Lazily (6:47)
Adding a Missing Schema (1:46)
Wrap Up (1:52)
Useful Resources & Links
Styling our App
Module Introduction (1:45)
CSS in NativeScript - An Overview (2:10)
Understanding Platform Specific Inline Styles (5:25)
Platform Specific Files (7:11)
Setting Properties Via CSS (4:25)
How CSS Works Behind the Scenes (7:20)
MUST READ: Making Themes Work
Using a Theme (5:41)
Working with SASS Variables (7:04)
Styling the Action Bar (2:49)
Preparing the Form Styling (8:45)
Centralizing Common Styles (3:18)
Styling Today's Challenge (7:25)
Working on the Current Challenge (4:51)
Adding the Grid to the Current Challenge (11:53)
Populating the Grid (8:44)
Styling the Grid (7:34)
Opening the Modal when Tapping a Day (13:14)
Fixing the Sidedrawer Button & Adding Icons (10:09)
Adding Text Fonts (2:32)
Integrating Images (10:17)
Adding Icon Images (11:13)
Improving the Logout Button Look (1:38)
Wrap Up
Useful Resources & Links
Adding Forms
Module Introduction (1:54)
Configuring Form Inputs (9:54)
Adding Form Validation (5:26)
Did you Solve your Challenge? (2:28)
Submitting Form Inputs (3:12)
Adding a Login Form (4:07)
Setting up the Reactive Form (7:54)
Adding Validation & Reading Form Values (8:33)
Showing the Validation Text in the Template (8:29)
Switching Between Login & Signup (5:50)
Wrap Up (1:34)
Useful Resources & Links
Understanding State
Module Introduction (2:21)
Analyzing the Requirements (2:34)
Working on the Challenge Service (4:12)
Adding the Challenge & Day Models (10:34)
Using the Challenge Model (3:58)
Using the Challenge Service (7:28)
Rendering the Current Challenge (3:32)
Working on the Today Page & State (7:48)
Preparing the Update Day Status Logic (5:45)
Updating the Day Status for Today (4:54)
Reflecting the Day State on the Action Buttons (9:03)
Adding Animations (6:17)
Controlling the Settable Days (5:36)
Setting the Day Status via the Modal (5:09)
Reflecting the Current Day's State (8:56)
Changing the Cancel Logic in the Modal (6:37)
Resetting Today's State Correctly (1:58)
Updating an Existing Challenge (7:03)
Disabling the Edit Button (2:03)
Wrap Up (1:35)
Useful Resources & Links
Storing Data on the Backend
Module Introduction (0:46)
Setting Up the Firebase Database (3:20)
Storing a New Challenge in the Database (6:38)
Fetching Data From the Backend (10:25)
Displaying the Loaded Data (3:30)
Updating Challenges (3:36)
Disabling the "Failed" Button (4:34)
Wrap Up (1:12)
Useful Resources & Links
Adding Authentication to our App
Module Introduction (0:44)
How Authentication Works (3:43)
Signing Users Up (6:33)
Logging Users In (5:58)
Handling Errors & Showing Alerts (9:10)
Creating a User Object & Storing the Token (9:56)
Managing the User in the Auth Service (5:00)
Attaching the Auth Token to Requests (4:24)
Authenticating All Requests (2:46)
Adding Logout (2:48)
Checking the Authentication State (3:06)
Adding Auto Login (8:33)
Adding Auto Logout (9:03)
Adding an Authentication Guard (13:18)
Fixing the Redirection Path (1:09)
Adding Authorization (12:00)
Wrap Up (1:29)
Useful Resources & Links
Deploying our App
Module Introduction (0:35)
The Publishing Process (2:45)
Testing our App on Different Devices (11:52)
Testing our App on Different Devices (3:41)
Further Resources (0:55)
Publishing the iOS App (5:29)
Publishing the Android App (9:28)
Useful Resources & Links
Code Sharing
Module Introduction (1:10)
How Code Sharing Works (3:47)
Creating a Shared Project (3:54)
Analysing the Project Structure (3:34)
Running the Apps (2:07)
Adjusting the Auth & App Modules (8:00)
Using Helper Services (7:08)
Finishing the Auth Component & Adding Styles (13:24)
Working on the Auth Form Styling (8:02)
More Auth (3:19)
Adding More Helper Services (10:38)
Finishing the Authentication Part (6:28)
Starting Work on the Challenges Part (11:00)
Working on the "Today" Page (10:45)
Working on the "Challenge Edit" Component (7:40)
Fixing the Challenges Filenames & Imports (2:52)
Adding the ActionBar (8:03)
Reaching the "Challenge Edit" Page (2:14)
Adding the Auth Guard & Auto-Login (3:27)
Working on the "Current Challenge" Page (10:43)
Adjusting the Styles (9:59)
Resetting the Editing Page Correctly (3:05)
Fetching the Current Challenge on Multiple Pages (6:00)
Adjusting the Navigation Items (4:35)
Navigating Back (Correctly) (5:33)
Adding a Web Modal (5:05)
Adding a Backdrop for the Modal (3:20)
Adding Modal Actions & User Interactions (6:59)
Reflecting the Day Status in the Modal (2:49)
Populating the Grid Correctly (3:26)
Logging Out (3:11)
Adding a Loading Indicator (9:21)
Finishing the Mobile Apps (9:36)
Wrap Up (1:25)
Useful Resources & Links
Roundup
Roundup & Next Steps (1:49)
Using the Official Resources (1:33)
Our First NativeScript App!
Download
Complete and Continue