NativeScript + Angular: Build Native iOS, Android & Web Apps
4.7 (414 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,943 students enrolled

NativeScript + Angular: Build Native iOS, Android & Web Apps

Use one Angular + NativeScript codebase to build native iOS, Android and web apps and learn NativeScript from scratch.
Bestseller
4.7 (414 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,943 students enrolled
Last updated 2/2019
English
English [Auto-generated], Indonesian [Auto-generated]
Current price: $11.99 Original price: $149.99 Discount: 92% off
30-Day Money-Back Guarantee
This course includes
  • 20.5 hours on-demand video
  • 20 articles
  • 112 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Build real native mobile apps for iOS and Android with web technologies and the Angular framework
  • Share code to build a web app AND native apps from one and the same codebase

  • Learn how to use the NativeScript ecosystem and features

Course content
Expand all 237 lectures 20:42:22
+ Optional: Angular - A Quick Refresher
29 lectures 01:48:14
Module Introduction
00:32
What is Angular?
02:42
Single Page Applications (SPAs) in Angular & NativeScript
03:09
Understanding Components
01:37
Installing Angular with the Command Line Interface (CLI)
04:29
Installing our IDE
04:59
Understanding the Angular Project Folder Structure
08:14
The App Component
07:04
Creating our First Component
04:05
Cross Component Communication with Property Binding
05:23
Understanding Directives & String Interpolation
04:05
Handling User Input
04:08
Understanding Event Binding
02:13
Executing Methods with Local References
01:49
Understanding Two Way Binding
05:56
Passing Data Up With a Custom Event
03:58
Implementing Routing
07:10
Setting Up Services
03:15
Using the Service with Dependency Injection
02:48
Working with Lifecycle Hooks
03:25
Adding a Person with Services
02:44
Navigating Between Components
02:03
Removing Items "On Click"
03:08
Implementing an Active Push Mechanism
05:34
Dive Deeper Into Observables & Subjects
00:09
Sending HTTP Requests
10:03
Showing a Placeholder Whilst Waiting for a Response
02:05
Wrap Up
01:17
Useful Resources & Links
00:10
+ Setting Up the Development Environment
9 lectures 46:29
Setting up NativeScript on macOS
16:12
Setting up NativeScript on Windows
13:59
Building iOS Apps on Windows
00:32
Using Different Emulator Devices
07:33
Running the App on a Real Device - What can go wrong?
00:45
Running the App on a Real Device
05:24
What's Up With The Extra .js Files?
01:19
Using Hot Module Replacement (HMR)
00:33
Useful Resources & Links
00:11
+ Understanding the Basics
24 lectures 02:35:49
Module Introduction
01:55
Starting the Emulators
02:55
How Does The App Start?
06:21
Understanding Components & Layouts
08:47
Building our First own Component
06:40
Adding Basic Element Interactions
08:07
Understanding the Styling Basics
05:43
Styling a Button
06:12
We did our first steps in NativeScript so time to practice what we learned thus far!
Time to Practice - Styling Basics
1 question
Understanding Layouts - Theory
03:11
The StackLayout
09:52
The FlexboxLayout
15:22
Are you a Flex Layout master? Let's find out in this assignment!
Time to Practice - The Flex Layout
1 question
The GridLayout
15:35
The Grid Layout is awesome and really powerful, so let's test our knowledge now!
Time to Practice - The Grid Layout
1 question
Understanding the AbsoluteLayout
07:24
Implementing the Grid Layout in the Course Project
06:02
Splitting our App Into Components
08:03
Passing Data Between Components
07:44
Creating a List of Items
04:30
Making the List Scrollable
03:13
Using the "ListView"
05:59
Extracting & Rendering Dynamic Values
08:07
Debugging our Application
12:13
More on Debugging (with VS Code)
00:13
Wrap Up
01:37
Useful Resources & Links
00:03
+ Diving Into App Navigation
37 lectures 03:08:49
Module Introduction
01:01
Understanding the Different Navigation Options
03:55
Planning the App
02:31
Creating the App Pages
05:31
Adding our First Route
08:10
Implementing Page Navigation
04:29
How to Add Forward & Backward Navigation to our App
02:54
Understanding the Router Object
03:17
Working with the "nsRouterLink" Directive
02:07
More on Page Transitions
00:05
After learning the navigation basics it's important to practice our newly gained knowledge. Let's do so in the next assignment!
Time to Practice - Navigation
1 question
Adding an Actionbar and a "Back" Button
13:28
Creating a Shared Component for the "Back" Button
05:10
Adding Logic to the "Back" Button
03:56
Overwriting the Default Transition Effect
04:14
Adding the "TabView" Component
05:19
Displaying Dynamic Routing Content in the Tabs
11:33
Highlighting the Currently Active Tab
01:53
Adding a Sidedrawer
07:17
Adding the Sidedrawer Icon
04:34
Rendering the Button on Android Only
02:19
Forwarding the "Button is Pressed" Info to the App Component
06:48
Displaying the Sidedrawer
07:59
Implementing the Logout Logic
04:58
Passing Around Dynamic Data
05:12
Reading Dynamic Parameters
09:03
Using the Dynamic Parameter
04:39
Injecting Dynamic Values Into the Action Bar on Per Page Level
07:56
Opening a Modal
11:30
Getting Access to the "viewContainerRef"
04:34
Passing Data Into the Modal
07:18
Angular Pipes
00:05
Loading Routes Lazily - Theory
01:44
Implementing Lazy Loading
12:50
Loading Additional Modules Lazily
06:47
Adding a Missing Schema
01:46
Wrap Up
01:52
Useful Resources & Links
00:04
+ Styling our App
24 lectures 02:27:16
Module Introduction
01:45
CSS in NativeScript - An Overview
02:10
Understanding Platform Specific Inline Styles
05:25
Platform Specific Files
07:11
Setting Properties Via CSS
04:25
How CSS Works Behind the Scenes
07:20
Using a Theme
05:41
Working with SASS Variables
07:04
Styling the Action Bar
02:49
Preparing the Form Styling
08:45
Centralizing Common Styles
03:18
Styling Today's Challenge
07:25
Working on the Current Challenge
04:51
Adding the Grid to the Current Challenge
11:53
Populating the Grid
08:44
Styling the Grid
07:34
Opening the Modal when Tapping a Day
13:14
Fixing the Sidedrawer Button & Adding Icons
10:09
Adding Text Fonts
02:32
Integrating Images
10:17
Adding Icon Images
11:13
Improving the Logout Button Look
01:38
Wrap Up
01:44
Useful Resources & Links
00:09
+ Adding Forms
12 lectures 59:28
Module Introduction
01:54
Configuring Form Inputs
09:54
Adding Form Validation
05:26
Did you Solve your Challenge?
02:28
Submitting Form Inputs
03:12
Adding a Login Form
04:07
Setting up the Reactive Form
07:54
Adding Validation & Reading Form Values
08:33
Showing the Validation Text in the Template
08:29
Switching Between Login & Signup
05:50
Wrap Up
01:34
Useful Resources & Links
00:07
+ Understanding State
21 lectures 01:47:25
Module Introduction
02:21
Analyzing the Requirements
02:34
Working on the Challenge Service
04:12
Adding the Challenge & Day Models
10:34
Using the Challenge Model
03:58
Using the Challenge Service
07:28
Rendering the Current Challenge
03:32
Working on the Today Page & State
07:48
Preparing the Update Day Status Logic
05:45
Updating the Day Status for Today
04:54
Reflecting the Day State on the Action Buttons
09:03
Adding Animations
06:17
Controlling the Settable Days
05:36
Setting the Day Status via the Modal
05:09
Reflecting the Current Day's State
08:56
Changing the Cancel Logic in the Modal
06:37
Resetting Today's State Correctly
01:58
Updating an Existing Challenge
07:03
Disabling the Edit Button
02:03
Wrap Up
01:35
Useful Resources & Links
00:02
+ Storing Data on the Backend
9 lectures 34:03
Module Introduction
00:46
Setting Up the Firebase Database
03:20
Storing a New Challenge in the Database
06:38
Fetching Data From the Backend
10:25
Displaying the Loaded Data
03:30
Updating Challenges
03:36
Disabling the "Failed" Button
04:34
Wrap Up
01:12
Useful Resources & Links
00:02
+ Adding Authentication to our App
18 lectures 01:39:42
Module Introduction
00:44
How Authentication Works
03:43
Signing Users Up
06:33
Logging Users In
05:58
Handling Errors & Showing Alerts
09:10
Creating a User Object & Storing the Token
09:56
Managing the User in the Auth Service
05:00
Attaching the Auth Token to Requests
04:24
Authenticating All Requests
02:46
Adding Logout
02:48
Checking the Authentication State
03:06
Adding Auto Login
08:33
Adding Auto Logout
09:03
Adding an Authentication Guard
13:18
Fixing the Redirection Path
01:09
Adding Authorization
12:00
Wrap Up
01:29
Useful Resources & Links
00:02
Requirements
  • Solid Angular knowledge is a must-have (How it works, dependency injection, Angular app structure)
  • NO prior NativeScript knowledge is required
Description

With Angular, you can already build highly reactive and engaging web apps.

Wouldn't it be amazing to use that same tech stack and knowledge to build real native mobile apps for iOS and Android?

NativeScript enables you to do exactly that!

You build a normal Angular app and manage your entire app logic via Angular + TypeScript. Combine that with NativeScript's TypeScript/ Angular modules and the strong NativeScript build system to generate Android and iOS apps which you can (and will in this course) deploy to the Apple App Store or Google Play Store.

But even better than that: You're also able to use that same "Native App with Angular" codebase to build a regular web app out of it as well.

1 codebase, 3 kinds of apps. Pretty sweet!

In this course, you'll learn:

  • What exactly NativeScript is and how it works

  • Which core building block a NativeScript app has

  • How to build nice user interfaces with NativeScript layouts and UI widgets

  • How to add mobile navigation (forward-backward, tabs, side drawer) in a NativeScript app

  • How to style your app with CSS (yes, the mobile app, too!)

  • How to fetch user input

  • How to handle state and data in the app (incl. storage on the device)

  • How to send data to a server and fetch it from there

  • How to implement authentication

  • AND: How to do all that in a way that works in both native mobile apps as well as a web app - with one and the same codebase

To succeed in this course, Angular knowledge is a must-have. You need to know how Angular works, how you build and use components, what dependency injection is and how it works and how the general Angular architecture (with NgModule etc) works.

A brief refresher on some Angular core concepts is provided but if you got zero Angular knowledge, you'll very likely not be able to follow along.

You absolutely DON'T have to be an expert though!

I'd love to welcome you in the course! :-)

Who this course is for:
  • Web developers who want to build native mobile apps, too
  • Developers who want to use one codebase for three kinds of apps