Master Angular and Dart (AngularDart) and build high-performance, flexible, and dynamic web apps
About This Video
In Detail
Angular is one of the most popular platforms for building web as well as mobile and desktop apps, and AngularDart …
Master Angular and Dart (AngularDart) and build high-performance, flexible, and dynamic web apps
About This Video
In Detail
Angular is one of the most popular platforms for building web as well as mobile and desktop apps, and AngularDart is Google's web app framework that leverages the Angular platform. Using the Dart programming language, AngularDart focuses on providing a more productive, high-performance, and stable way of building Angular apps.
With this course, you'll learn how to use AngularDart and get started with building amazing web applications. As you explore its features, you'll also understand why Google engineers use AngularDart in their most lucrative applications and how you can leverage the sophistication and stability it provides to produce such critical applications.
Chapter 1 : Introduction
Introduction - Who’s the Course For 00:01:29
How’s The Course Structured 00:01:00
AngularDart - Motivation 00:01:57
Chapter 2 : Install IntelliJ Idea
Install IntelliJ Idea 00:02:10
Chapter 3 : For Windows Users ONLY – Windows Development Setup
What We’ll Cover in This Section 00:00:45
Windows Development Setup for AngularDart 00:12:30
Chapter 4 : For MAC Users ONLY – MAC Development Setup for AngularDart
MAC Development Setup 00:00:46
Set up Dart SDK and Path on MAC - Running a Dart App 00:12:15
Chapter 5 : AngularDart – An Overview and Motivation
What We’ll Cover in This Section 00:00:32
A Brief Angular Architecture Overview 00:04:19
TODO AngularDart Project Walkthrough 00:11:08
Creating a Make It Rain App 00:08:19
Make It Rain - Inline Template 00:06:55
ngIf Directive 00:03:41
Data Binding - Overview 00:03:40
NgStyle Property Binding and Changing Text Color 00:04:30
Chapter 6 : Deep Dive into AngularDart Directives
Restructuring Project for Multiple Components 00:10:13
ngIf - toggle a Boolean to Show Text 00:02:47
Using the Hidden Property Binding VS ngIf 00:03:09
ngFor Directive and Index 00:02:42
Using ngClass to Bind More CSS Classes 00:05:21
Using ngStyle Directive 00:04:59
Setting ngStyle from Component’s Method 00:03:45
Using ngFor Directive with TrackBy 00:08:15
Overview - Directives - Introduction to Creating Custom Attribute Directives 00:01:03
Creating Customized Attribute Directives 00:06:09
Implementing textZoom Custom Directive 00:03:40
Custom Directive - Adding Input data Binding 00:04:44
Chapter 7 : CHALLENGE – Custom Directives
Create a Custom Directive - Highlighter 00:00:24
SOLUTION: Custom Directive - Highlighter 00:11:26
Chapter 8 : Building Reusable Components
Reusable Components 00:00:22
Reusability of Components - Explained 00:00:50
Creating a Reusable Component - Using Input Property 00:06:10
Binding Another Input Property 00:03:29
Binding Description Input Property 00:03:39
Raising Events with Streams in a Reusable Component 00:06:59
Adding Alias to All Input and Output Properties 00:01:50
Passing Event Data 00:04:09
Input, Output Properties - Summary 00:01:28
Chapter 9 : CHALLENGE – Reusable Components
Adding Bootstrap-glyphicon to Project 00:02:29
How the Final FacebookLike Component Should Behave 00:00:20
Chapter 10 : SOLUTION – Reusable Components
FacebookLike Component Challenge Solution 00:14:09
Chapter 11 : AngularDart – HTTP Services – Consuming Remote Data
What We’ll Cover in This Section 00:00:36
Getting Data from API - Part 1 00:07:34
Getting Data from API - Parsing JSON Using json Decode 00:05:00
Showing Data in a List 00:02:51
Using Life Cycle Hook OnInit to Populate List 00:01:50
Separation of Concerns - Creating a Service and Cleaning Code 00:08:31
Firebase Setup 00:00:49
Create Firebase App And Database 00:04:38
Setting Up Firebase Project and Adding First Item to Realtime Database 00:10:27
Showing All Items from Firebase - Mapping JSON to Dart Objects 00:09:20
OPTIONAL - Adding Bootstrap to the Project 00:01:56
Showing added Student Right When Added - Future.Then Method 00:12:06
Deleting items - Problem Fix 00:06:06
Delete in Front and Back End 00:03:47
Update Student - Part 1 00:05:52
Update Student Final 00:06:25
Chapter 12 : AngularDart – Forms
Forms - Introduction 00:00:25
Forms - Creating Bootstrap Forms 00:04:35
Forms - Two-Way Binding in a Form 00:09:08
Adding Validation - Part 1 00:04:44
Changing Div if Valid 00:02:22
Clearing our Form with Model 00:01:54
Submitting the Form with ngSubmit - Part 1 00:03:33
Showing Model Data Depending on Submitted Boolean 00:05:46
Chapter 13 : AngularDart – Pipes
Pipes Introduction 00:00:21
Pipes - Motivation and What They Do 00:01:20
Using UpperCase Pipe 00:02:57
Pipes - Date Pipe 00:02:10
Parameterizing a Pipe 00:01:44
Currency Pipes and Parameters 00:02:54
Chaining Pipes 00:00:49
Creating Custom Pipes 00:10:50
Chapter 14 : Routing in AngularDart
Router Module - Introduction 00:00:58
Steps to Creating Routing Navigation 00:00:28
Configure Routings - Part 1 00:10:18
Creating Route and RoutePaths 00:10:17
Adding Paths to Browser Bar and Navigate to Template - Part 1 00:04:48
Adding Bootstrap Button Links 00:03:22
Adding RouterLinkActive 00:05:23
Creating Student Model and Populating StudentList Template and Default Route 00:05:31
Adding Page Not Found 00:09:30
Redirect 00:01:41
Chapter 15 : Router Module – Part 2
Route Params and Navigation - Introduction 00:00:33
Restructuring Student List 00:02:19
Showing Dummy Announcements 00:07:07
Adding NavBar - Bootstrap 00:01:37
Set up Student Component and Route 00:07:04
Set up Student List Template and Selecting a Student 00:07:05
Creating Student Navigation URL and Passing Id Param 00:04:53
Set up Student Component Navigation 00:10:14
Imperative Navigation When Student Clicked & Passing Params in Browser 00:05:14
Fix - Two-Way Binding Issue 00:02:39
Chapter 16 : Final Project – Student dashboard
What We’ll Cover in This Section - Demo 00:02:29
Creating Data Models 00:03:58
Set up Main and Index 00:03:11
Set up All Components 00:02:56
Setting Up the NavBar 00:02:44
Set up Routes and Paths 00:08:08
Set up Navigation to Work 00:06:29
Showing all Announcements 00:06:57
Showing All Dummy Students 00:09:11
Adding Pointer Style 00:00:54
Setting up Student Details Route and Templates 00:08:55
Setting Up Student Details Route - Part 2 00:06:48
Showing Student Detail ID 00:11:19
Set up Student Details and Back Button 00:07:44
Set up Add Student Component - Part 1 00:08:20
Set up Add Student Route 00:06:53
Adding Students to a List 00:03:19
Saving Students to Firebase 00:08:15
Showing All Saved Students From Firebase 00:06:28
Adding a Card 00:04:21
Update a Student 00:03:48
Delete a Student 00:04:57
Final Touches and Finishes 00:04:12
Redirect and Page Not Found 00:04:08
Chapter 17 : AngularDart App Development
What We’ll Cover in This Section 00:01:52
Install & Check NodeJs 00:01:07
Set up Main with BrowserClient 00:04:12
Deploy Project to Firebase Host 00:12:34