AngularDart: Build Dynamic Web Apps with Angular and Dart

Introduction
1 Introduction – Who’s the Course For
2 How’s The Course Structured
3 AngularDart – Motivation

Install IntelliJ Idea
4 Install IntelliJ Idea

For Windows Users ONLY – Windows Development Setup
5 What We’ll Cover in This Section
6 Windows Development Setup for AngularDart

For MAC Users ONLY – MAC Development Setup for AngularDart
7 MAC Development Setup
8 Set up Dart SDK and Path on MAC – Running a Dart App

AngularDart – An Overview and Motivation
9 What We’ll Cover in This Section
10 A Brief Angular Architecture Overview
11 TODO AngularDart Project Walkthrough
12 Creating a Make It Rain App
13 Make It Rain – Inline Template
14 ngIf Directive
15 Data Binding – Overview
16 NgStyle Property Binding and Changing Text Color

Deep Dive into AngularDart Directives
17 Restructuring Project for Multiple Components
18 ngIf – toggle a Boolean to Show Text
19 Using the Hidden Property Binding VS ngIf
20 ngFor Directive and Index
21 Using ngClass to Bind More CSS Classes
22 Using ngStyle Directive
23 Setting ngStyle from Component’s Method
24 Using ngFor Directive with TrackBy
25 Overview – Directives – Introduction to Creating Custom Attribute Directives
26 Creating Customized Attribute Directives
27 Implementing textZoom Custom Directive
28 Custom Directive – Adding Input data Binding

CHALLENGE – Custom Directives
29 Create a Custom Directive – Highlighter
30 SOLUTION – Custom Directive – Highlighter

Building Reusable Components
31 Reusable Components
32 Reusability of Components – Explained
33 Creating a Reusable Component – Using Input Property
34 Binding Another Input Property
35 Binding Description Input Property
36 Raising Events with Streams in a Reusable Component
37 Adding Alias to All Input and Output Properties
38 Passing Event Data
39 Input, Output Properties – Summary

CHALLENGE – Reusable Components
40 Adding Bootstrap-glyphicon to Project
41 How the Final FacebookLike Component Should Behave

SOLUTION – Reusable Components
42 FacebookLike Component Challenge Solution

AngularDart – HTTP Services – Consuming Remote Data
43 What We’ll Cover in This Section
44 Getting Data from API – Part 1
45 Getting Data from API – Parsing JSON Using json Decode
46 Showing Data in a List
47 Using Life Cycle Hook OnInit to Populate List
48 Separation of Concerns – Creating a Service and Cleaning Code
49 Firebase Setup
50 Create Firebase App And Database
51 Setting Up Firebase Project and Adding First Item to Realtime Database
52 Showing All Items from Firebase – Mapping JSON to Dart Objects
53 OPTIONAL – Adding Bootstrap to the Project
54 Showing added Student Right When Added – Future.Then Method
55 Deleting items – Problem Fix
56 Delete in Front and Back End
57 Update Student – Part 1
58 Update Student Final

AngularDart – Forms
59 Forms – Introduction
60 Forms – Creating Bootstrap Forms
61 Forms – Two-Way Binding in a Form
62 Adding Validation – Part 1
63 Changing Div if Valid
64 Clearing our Form with Model
65 Submitting the Form with ngSubmit – Part 1
66 Showing Model Data Depending on Submitted Boolean

AngularDart – Pipes
67 Pipes Introduction
68 Pipes – Motivation and What They Do
69 Using UpperCase Pipe
70 Pipes – Date Pipe
71 Parameterizing a Pipe
72 Currency Pipes and Parameters
73 Chaining Pipes
74 Creating Custom Pipes

Routing in AngularDart
75 Router Module – Introduction
76 Steps to Creating Routing Navigation
77 Configure Routings – Part 1
78 Creating Route and RoutePaths
79 Adding Paths to Browser Bar and Navigate to Template – Part 1
80 Adding Bootstrap Button Links
81 Adding RouterLinkActive
82 Creating Student Model and Populating StudentList Template and Default Route
83 Adding Page Not Found
84 Redirect

Router Module – Part 2
85 Route Params and Navigation – Introduction
86 Restructuring Student List
87 Showing Dummy Announcements
88 Adding NavBar – Bootstrap
89 Set up Student Component and Route
90 Set up Student List Template and Selecting a Student
91 Creating Student Navigation URL and Passing Id Param
92 Set up Student Component Navigation
93 Imperative Navigation When Student Clicked & Passing Params in Browser
94 Fix – Two-Way Binding Issue

Final Project – Student dashboard
95 Set up Routes and Paths
96 Set up Navigation to Work
97 Showing all Announcements
98 Showing All Dummy Students
99 Adding Pointer Style
100 Setting up Student Details Route and Templates
101 Setting Up Student Details Route – Part 2
102 Showing Student Detail ID
103 Set up Student Details and Back Button
104 Set up Add Student Component – Part 1
105 Set up Add Student Route
106 Adding Students to a List
107 Saving Students to Firebase
108 Showing All Saved Students From Firebase
109 Adding a Card
110 Update a Student
111 Delete a Student
112 Final Touches and Finishes
113 Redirect and Page Not Found
114 What We’ll Cover in This Section – Demo
115 Creating Data Models
116 Set up Main and Index
117 Set up All Components
118 Setting Up the NavBar

AngularDart App Development
119 What We’ll Cover in This Section
120 Install & Check NodeJs
121 Set up Main with BrowserClient
122 Deploy Project to Firebase Host