Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

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

Name: NativeScript + Angular: Build Native iOS, Android & Web Apps
Rating: 4.7 (1928 reviews)

Use one Angular + NativeScript codebase to build native iOS, Android and web apps and learn NativeScript from scratch.

Highest Rated

Created byAcademind by Maximilian Schwarzmüller, Maximilian Schwarzmüller

Last updated 11/2022

English

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

13 sections • 242 lectures • 20h 42m total length

Course Introduction1:43
What's in the course, what can you expect? Let me welcome you to the course!
What is NativeScript?2:47
The most important question is: What is NativeScript, what can you do with it, why would you use it? In this lecture, we'll explore what NativeScript is all about.
Join our Online Learning Community0:21
Learning alone is absolutely fine but finding learning partners might be a nice thing, too. Our learning community is a great place to learn and grow together - of course it's 100% free and optional!
Under the Hood of NativeScript2:49
Let's take a closer look under the hood of NativeScript to fully understand what it's about and how it works behind the scenes.
What is Angular & Course Requirements2:03
To get the most out of the course, there are some pre-requisites. In this lecture, we'll explore what you need to know in advance.
Our First NativeScript App!6:27
Enough of the NativeScript theory, let's build our first little NativeScript app! Let's see how easy it is to build a native mobile app with Angular and NativeScript.
Course Outline2:53
What's in this course, what will you learn? In this lecture, you'll get a thorough overview of the course content and the order in which it will be presented.
How To Get The Most Out Of The Course4:17
Knowing the course content is one thing, but to me it's super-important to ensure that you get the most out of the course. Hence in this lecture, I'll share some tips & tricks regarding how to take this course.
Using the Course Source Code0:34
Stuck? You're getting an error in your code and you don't know why? No problem! I attached code snapshots of my code to a lot of lectures in this course!

Module Introduction0:32
What is Angular?2:42
Single Page Applications (SPAs) in Angular & NativeScript3:09
Understanding Components1:37
Installing Angular with the Command Line Interface (CLI)4:29
Installing our IDE4:59
Understanding the Angular Project Folder Structure8:14
The App Component7:04
Creating our First Component4:05
Cross Component Communication with Property Binding5:23
Understanding Directives & String Interpolation4:05
Handling User Input4:08
Understanding Event Binding2:13
Executing Methods with Local References1:49
Understanding Two Way Binding5:56
Passing Data Up With a Custom Event3:58
Implementing Routing7:10
Setting Up Services3:15
Using the Service with Dependency Injection2:48
Working with Lifecycle Hooks3:25
Adding a Person with Services2:44
Navigating Between Components2:03
Removing Items "On Click"3:08
Implementing an Active Push Mechanism5:34
Dive Deeper Into Observables & Subjects0:06
Sending HTTP Requests10:03
Showing a Placeholder Whilst Waiting for a Response2:05
Wrap Up1:17
Useful Resources & Links0:05

Module Introduction1:55
Starting the Emulators2:55
MUST READ: nativescript-angular Imports0:12
How Does The App Start?6:21
Understanding Components & Layouts8:47
Building our First own Component6:40
Adding Basic Element Interactions8:07
Understanding the Styling Basics5:43
Styling a Button6:12
Time to Practice - Styling Basics
Understanding Layouts - Theory3:11
The StackLayout9:52
The FlexboxLayout15:22
Time to Practice - The Flex Layout
The GridLayout15:35
Time to Practice - The Grid Layout
Understanding the AbsoluteLayout7:24
Implementing the Grid Layout in the Course Project6:02
Splitting our App Into Components8:03
Passing Data Between Components7:44
Creating a List of Items4:30
Making the List Scrollable3:13
Using the "ListView"5:59
Extracting & Rendering Dynamic Values8:07
Debugging our Application12:13
More on Debugging (with VS Code)0:09
Wrap Up1:37
Useful Resources & Links0:01

Module Introduction1:01
Understanding the Different Navigation Options3:55
Planning the App2:31
Creating the App Pages5:31
Adding our First Route8:10
Implementing Page Navigation4:29
How to Add Forward & Backward Navigation to our App2:54
Understanding the Router Object3:17
Working with the "nsRouterLink" Directive2:07
Time to Practice - Navigation
More on Page Transitions0:04
Adding an Actionbar and a "Back" Button13:28
Creating a Shared Component for the "Back" Button5:10
Adding Logic to the "Back" Button3:56
Overwriting the Default Transition Effect4:14
Adding the "TabView" Component5:19
Displaying Dynamic Routing Content in the Tabs11:33
Highlighting the Currently Active Tab1:53
Angular 8 & @ViewChild()0:14
Adding a Sidedrawer7:17
Adding the Sidedrawer Icon4:34
Rendering the Button on Android Only2:19
Forwarding the "Button is Pressed" Info to the App Component6:48
Displaying the Sidedrawer7:59
Implementing the Logout Logic4:58
Passing Around Dynamic Data5:12
Reading Dynamic Parameters9:03
Using the Dynamic Parameter4:39
Injecting Dynamic Values Into the Action Bar on Per Page Level7:56
Opening a Modal11:30
Getting Access to the "viewContainerRef"4:34
Passing Data Into the Modal7:18
Angular Pipes0:04
Loading Routes Lazily - Theory1:44
Implementing Lazy Loading12:50
Loading Additional Modules Lazily6:47
Adding a Missing Schema1:46
Wrap Up1:52
Useful Resources & Links0:02

Module Introduction1:45
CSS in NativeScript - An Overview2:10
Understanding Platform Specific Inline Styles5:25
Platform Specific Files7:11
Setting Properties Via CSS4:25
How CSS Works Behind the Scenes7:20
MUST READ: Making Themes & Sass Work0:09
Using a Theme5:41
Working with SASS Variables7:04
Styling the Action Bar2:49
Preparing the Form Styling8:45
Centralizing Common Styles3:18
Styling Today's Challenge7:25
Working on the Current Challenge4:51
Adding the Grid to the Current Challenge11:53
Populating the Grid8:44
Styling the Grid7:34
Opening the Modal when Tapping a Day13:14
Fixing the Sidedrawer Button & Adding Icons10:09
Adding Text Fonts2:32
Integrating Images10:17
Adding Icon Images11:13
Improving the Logout Button Look1:38
Wrap Up1:44
Useful Resources & Links0:04

Module Introduction2:21
Analyzing the Requirements2:34
Working on the Challenge Service4:12
Adding the Challenge & Day Models10:34
Using the Challenge Model3:58
Using the Challenge Service7:28
Rendering the Current Challenge3:32
Working on the Today Page & State7:48
Preparing the Update Day Status Logic5:45
Updating the Day Status for Today4:54
Reflecting the Day State on the Action Buttons9:03
Adding Animations6:17
Controlling the Settable Days5:36
Setting the Day Status via the Modal5:09
Reflecting the Current Day's State8:56
Changing the Cancel Logic in the Modal6:37
Resetting Today's State Correctly1:58
Updating an Existing Challenge7:03
Disabling the Edit Button2:03
Wrap Up1:35
Useful Resources & Links0:01

Module Introduction0:44
How Authentication Works3:43
Signing Users Up6:33
Logging Users In5:58
Handling Errors & Showing Alerts9:10
Creating a User Object & Storing the Token9:56
Managing the User in the Auth Service5:00
Attaching the Auth Token to Requests4:24
Authenticating All Requests2:46
Adding Logout2:48
Checking the Authentication State3:06
Adding Auto Login8:33
Adding Auto Logout9:03
Adding an Authentication Guard13:18
Fixing the Redirection Path1:09
Adding Authorization12:00
Wrap Up1:29
Useful Resources & Links0:01

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 (2+), 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 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

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

What you'll learn

Explore related topics

Course content

Introduction9 lectures • 24min

Optional: Angular - A Quick Refresher29 lectures • 1hr 48min

Setting Up the Development Environment9 lectures • 46min

Understanding the Basics25 lectures • 2hr 36min

Diving Into App Navigation38 lectures • 3hr 9min

Styling our App25 lectures • 2hr 27min

Adding Forms13 lectures • 1hr

Understanding State21 lectures • 1hr 47min

Storing Data on the Backend9 lectures • 34min

Adding Authentication to our App18 lectures • 1hr 40min

Requirements

Description

Who this course is for: