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

20h 11m 23s
English
Paid

Course 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!

Read more about the course

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!

Requirements:

  • Solid Angular knowledge is a must-have (How it works, dependency injection, Angular app structure)

  • NO prior NativeScript knowledge is required

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

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

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 217 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

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

0:00
/
#1: Course Introduction

All Course Lessons (217)

#Lesson TitleDurationAccess
1
Course Introduction Demo
01:44
2
What is NativeScript?
02:48
3
Under the Hood of NativeScript
02:50
4
What is Angular & Course Requirements
02:04
5
Our First NativeScript App!
06:28
6
Course Outline
02:54
7
How To Get The Most Out Of The Course
04:18
8
Module Introduction
00:33
9
What is Angular?
02:43
10
Single Page Applications (SPAs) in Angular & NativeScript
03:10
11
Understanding Components
01:38
12
Installing Angular with the Command Line Interface (CLI)
04:30
13
Installing our IDE
05:00
14
Understanding the Angular Project Folder Structure
08:15
15
The App Component
07:05
16
Creating our First Component
04:06
17
Cross Component Communication with Property Binding
05:24
18
Understanding Directives & String Interpolation
04:06
19
Handling User Input
04:09
20
Understanding Event Binding
02:14
21
Executing Methods with Local References
01:50
22
Understanding Two Way Binding
05:57
23
Passing Data Up With a Custom Event
03:59
24
Implementing Routing
07:11
25
Setting Up Services
03:16
26
Using the Service with Dependency Injection
02:49
27
Working with Lifecycle Hooks
03:26
28
Adding a Person with Services
02:45
29
Navigating Between Components
02:04
30
Removing Items "On Click"
03:09
31
Implementing an Active Push Mechanism
05:35
32
Sending HTTP Requests
10:04
33
Showing a Placeholder Whilst Waiting for a Response
02:06
34
Wrap Up
01:18
35
Setting up NativeScript on macOS
16:13
36
Setting up NativeScript on Windows
14:00
37
Using Different Emulator Devices
07:34
38
Running the App on a Real Device
05:25
39
What's Up With The Extra .js Files?
01:20
40
Module Introduction
01:56
41
Starting the Emulators
02:56
42
How Does The App Start?
06:22
43
Understanding Components & Layouts
08:48
44
Building our First own Component
06:41
45
Adding Basic Element Interactions
08:08
46
Understanding the Styling Basics
05:44
47
Styling a Button
06:13
48
Understanding Layouts - Theory
03:12
49
The StackLayout
09:53
50
The FlexboxLayout
15:23
51
The GridLayout
15:36
52
Understanding the AbsoluteLayout
07:25
53
Implementing the Grid Layout in the Course Project
06:03
54
Splitting our App Into Components
08:04
55
Passing Data Between Components
07:45
56
Creating a List of Items
04:31
57
Making the List Scrollable
03:14
58
Using the "ListView"
06:00
59
Extracting & Rendering Dynamic Values
08:08
60
Debugging our Application
12:14
61
Wrap Up
01:38
62
Module Introduction
01:02
63
Understanding the Different Navigation Options
03:56
64
Planning the App
02:32
65
Creating the App Pages
05:32
66
Adding our First Route
08:11
67
Implementing Page Navigation
04:30
68
How to Add Forward & Backward Navigation to our App
02:55
69
Understanding the Router Object
03:18
70
Working with the "nsRouterLink" Directive
02:08
71
Adding an Actionbar and a "Back" Button
13:29
72
Creating a Shared Component for the "Back" Button
05:11
73
Adding Logic to the "Back" Button
03:57
74
Overwriting the Default Transition Effect
04:15
75
Adding the "TabView" Component
05:20
76
Displaying Dynamic Routing Content in the Tabs
11:34
77
Highlighting the Currently Active Tab
01:54
78
Adding a Sidedrawer
07:18
79
Adding the Sidedrawer Icon
04:35
80
Rendering the Button on Android Only
02:20
81
Forwarding the "Button is Pressed" Info to the App Component
06:49
82
Displaying the Sidedrawer
08:00
83
Implementing the Logout Logic
04:59
84
Passing Around Dynamic Data
05:13
85
Reading Dynamic Parameters
09:04
86
Using the Dynamic Parameter
04:40
87
Injecting Dynamic Values Into the Action Bar on Per Page Level
07:57
88
Opening a Modal
11:31
89
Getting Access to the "viewContainerRef"
04:35
90
Passing Data Into the Modal
07:19
91
Loading Routes Lazily - Theory
01:45
92
Implementing Lazy Loading
12:51
93
Loading Additional Modules Lazily
06:48
94
Adding a Missing Schema
01:47
95
Wrap Up
01:53
96
Module Introduction
01:46
97
CSS in NativeScript - An Overview
02:11
98
Understanding Platform Specific Inline Styles
05:26
99
Platform Specific Files
07:12
100
Setting Properties Via CSS
04:26
101
How CSS Works Behind the Scenes
07:21
102
Using a Theme
05:42
103
Working with SASS Variables
07:05
104
Styling the Action Bar
02:50
105
Preparing the Form Styling
08:46
106
Centralizing Common Styles
03:19
107
Styling Today's Challenge
07:26
108
Working on the Current Challenge
04:52
109
Adding the Grid to the Current Challenge
11:54
110
Populating the Grid
08:45
111
Styling the Grid
07:35
112
Opening the Modal when Tapping a Day
13:15
113
Fixing the Sidedrawer Button & Adding Icons
10:10
114
Adding Text Fonts
02:33
115
Integrating Images
10:18
116
Adding Icon Images
11:14
117
Improving the Logout Button Look
01:39
118
Wrap Up
01:45
119
Module Introduction
01:55
120
Configuring Form Inputs
09:55
121
Adding Form Validation
05:27
122
Did you Solve your Challenge?
02:29
123
Submitting Form Inputs
03:13
124
Adding a Login Form
04:08
125
Setting up the Reactive Form
07:55
126
Adding Validation & Reading Form Values
08:34
127
Showing the Validation Text in the Template
08:30
128
Switching Between Login & Signup
05:51
129
Wrap Up
01:35
130
Module Introduction
02:22
131
Analyzing the Requirements
02:35
132
Working on the Challenge Service
04:13
133
Adding the Challenge & Day Models
10:35
134
Using the Challenge Model
03:59
135
Using the Challenge Service
07:29
136
Rendering the Current Challenge
03:33
137
Working on the Today Page & State
07:49
138
Preparing the Update Day Status Logic
05:47
139
Updating the Day Status for Today
04:55
140
Reflecting the Day State on the Action Buttons
09:04
141
Adding Animations
06:18
142
Controlling the Settable Days
05:37
143
Setting the Day Status via the Modal
05:10
144
Reflecting the Current Day's State
08:57
145
Changing the Cancel Logic in the Modal
06:38
146
Resetting Today's State Correctly
01:59
147
Updating an Existing Challenge
07:04
148
Disabling the Edit Button
02:04
149
Wrap Up
01:36
150
Module Introduction
00:47
151
Setting Up the Firebase Database
03:21
152
Storing a New Challenge in the Database
06:39
153
Fetching Data From the Backend
10:26
154
Displaying the Loaded Data
03:31
155
Updating Challenges
03:37
156
Disabling the "Failed" Button
04:35
157
Wrap Up
01:13
158
Module Introduction
00:45
159
How Authentication Works
03:44
160
Signing Users Up
06:34
161
Logging Users In
05:59
162
Handling Errors & Showing Alerts
09:11
163
Creating a User Object & Storing the Token
09:57
164
Managing the User in the Auth Service
05:01
165
Attaching the Auth Token to Requests
04:25
166
Authenticating All Requests
02:47
167
Adding Logout
02:49
168
Checking the Authentication State
03:07
169
Adding Auto Login
08:34
170
Adding Auto Logout
09:04
171
Adding an Authentication Guard
13:19
172
Fixing the Redirection Path
01:10
173
Adding Authorization
12:01
174
Wrap Up
01:30
175
Module Introduction
00:36
176
The Publishing Process
02:46
177
Testing our App on Different Devices
11:53
178
Adding the App Icon & Splash Screen Icons
03:42
179
Further Resources
00:56
180
Publishing the iOS App
05:30
181
Publishing the Android App
09:29
182
Module Introduction
01:11
183
How Code Sharing Works
03:48
184
Creating a Shared Project
03:55
185
Analysing the Project Structure
03:35
186
Running the Apps
02:08
187
Adjusting the Auth & App Modules
08:01
188
Using Helper Services
07:09
189
Finishing the Auth Component & Adding Styles
13:25
190
Working on the Auth Form Styling
08:03
191
More Auth
03:20
192
Adding More Helper Services
10:39
193
Finishing the Authentication Part
06:29
194
Starting Work on the Challenges Part
11:01
195
Working on the "Today" Page
10:46
196
Working on the "Challenge Edit" Component
07:41
197
Fixing the Challenges Filenames & Imports
02:53
198
Adding the ActionBar
08:04
199
Reaching the "Challenge Edit" Page
02:15
200
Adding the Auth Guard & Auto-Login
03:28
201
Working on the "Current Challenge" Page
10:44
202
Adjusting the Styles
10:00
203
Resetting the Editing Page Correctly
03:06
204
Fetching the Current Challenge on Multiple Pages
06:01
205
Adjusting the Navigation Items
04:36
206
Navigating Back (Correctly)
05:34
207
Adding a Web Modal
05:06
208
Adding a Backdrop for the Modal
03:21
209
Adding Modal Actions & User Interactions
07:00
210
Reflecting the Day Status in the Modal
02:50
211
Populating the Grid Correctly
03:27
212
Logging Out
03:12
213
Adding a Loading Indicator
09:22
214
Finishing the Mobile Apps
09:37
215
Wrap Up
01:26
216
Roundup & Next Steps
01:50
217
Using the Official Resources
01:34

Unlock unlimited learning

Get instant access to all 216 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Writing for Developers. Blogs that get read

Writing for Developers. Blogs that get read

Sources: Piotr Sarna, Cynthia Dunlop
Practical methods for creating blogs, articles, and other technical materials that attract attention! Do you want to build a connection with the community...
The Modern Angular Bootcamp [2020]

The Modern Angular Bootcamp [2020]

Sources: udemy, Stephen Grider
Angular has been under development by Google for nearly a full decade. It has one purpose: scale up to gracefully handle the largest and most complex web apps around. If you w...
45 hours 23 minutes 12 seconds
Build an AI Career Coach using an Open Source LLM

Build an AI Career Coach using an Open Source LLM

Sources: zerotomastery.io
Create your own AI-based career coach using an open LLM and prompt management techniques! This coach will be able to train, test, and...
1 hour 38 minutes 53 seconds
Grow From Mid-Level To Senior Engineer: L4 To L5

Grow From Mid-Level To Senior Engineer: L4 To L5

Sources: Alex Chiou
"Senior Software Engineer" is a title that sounds prestigious and is coveted by every engineer. Top-notch senior engineers are in high demand...
3 hours 50 seconds
Become a Probability & Statistics Master

Become a Probability & Statistics Master

Sources: udemy, Krista King
This 163-lesson course includes video and text explanations of everything from Probability and Statistics, and it includes 45 quizzes (with solutions!) and an a
11 hours 29 minutes 40 seconds