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

20h 11m 23s
English
Paid
November 10, 2023

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!

More

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 NativeScript + Angular: Build Native iOS, Android & Web Apps

Join premium to watch
Go to premium
# Title Duration
1 Course Introduction 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

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

Team Dynamics and Soft Skills for Developers | Don’t Imitate
Artificial Intelligence and Cybersecurity

Artificial Intelligence and Cybersecurity

Duration 1 hour 4 minutes 21 seconds
The Ultimate Data Structures & Algorithms: Part 2

The Ultimate Data Structures & Algorithms: Part 2

Duration 5 hours 56 minutes 46 seconds
Brain Myths Exploded: Lessons from Neuroscience

Brain Myths Exploded: Lessons from Neuroscience

Duration 12 hours 2 minutes 49 seconds
Angular Architecture. How to Build Scalable Web Applications
NativeScript Vue Pro

NativeScript Vue Pro

Duration 12 hours 18 minutes 25 seconds
Enhanced Freelancing with AI

Enhanced Freelancing with AI

Duration 46 minutes 29 seconds
Angular 7 + Spring Boot and Cloud Microservices(Inc. Docker)
Master Gorgeous UI Design

Master Gorgeous UI Design

Duration 5 hours 25 minutes 9 seconds