AngularDart: Build Dynamic Web Apps with Angular and Dart

1. Introduction - Who's the Course For

Introduction: Who is the target audience

2. How's The Course Structured

Introduction: Basic Structure and layout of the course

3. AngularDart - Motivation

Introduction: Why AngularDart

1. Install IntelliJ Idea

Install IntelliJ Idea: Installation steps

1. What We'll Cover in This Section

For Windows Users ONLY - Windows Development Setup: Topic coverage

2. Windows Development Setup for AngularDart

For Windows Users ONLY - Windows Development Setup: Steps for setup

1. MAC Development Setup

For MAC Users ONLY - MAC Development Setup for AngularDart: Setup setps

2. Set up Dart SDK and Path on MAC - Running a Dart App

For MAC Users ONLY - MAC Development Setup for AngularDart: Setup for running a Dart App

1. What We'll Cover in This Section

AngularDart - An Overview and Motivation: Topic coverage

2. A Brief Angular Architecture Overview

AngularDart - An Overview and Motivation: Overview of the architecture

3. TODO AngularDart Project Walkthrough

AngularDart - An Overview and Motivation: Introduction to TODO AngularDart project

4. Creating a Make It Rain App

AngularDart - An Overview and Motivation: Creating an App

5. Make It Rain - Inline Template

AngularDart - An Overview and Motivation: Creating inline template of the App

6. ngIf Directive

AngularDart - An Overview and Motivation: ngIf Directive

7. Data Binding - Overview

AngularDart - An Overview and Motivation: Introduction to data binding

8. NgStyle Property Binding and Changing Text Color

AngularDart - An Overview and Motivation: Personlisation

1. Restructuring Project for Multiple Components

Deep Dive into AngularDart Directives: Project for multiple components

2. ngIf - toggle a Boolean to Show Text

Deep Dive into AngularDart Directives: Wrangling with Boolean

3. Using the Hidden Property Binding VS ngIf

Deep Dive into AngularDart Directives: Discover hidden property

4. ngFor Directive and Index

Deep Dive into AngularDart Directives: ngFor

5. Using ngClass to Bind More CSS Classes

Deep Dive into AngularDart Directives: Binding CSS classes

6. Using ngStyle Directive

Deep Dive into AngularDart Directives: nhStyle Directive usage

7. Setting ngStyle from Component's Method

Deep Dive into AngularDart Directives: Component's method

8. Using ngFor Directive with TrackBy

Deep Dive into AngularDart Directives: Usage of TrackBy

9. Overview - Directives - Introduction to Creating Custom Attribute Directives

Deep Dive into AngularDart Directives: Overview of creation of custom attribute directives

10. Creating Customized Attribute Directives

Deep Dive into AngularDart Directives: Creation of custom attribute directives

11. Implementing textZoom Custom Directive

Deep Dive into AngularDart Directives: Implement textZoom

12. Custom Directive - Adding Input data Binding

Deep Dive into AngularDart Directives: Addition of input data binding

1. Create a Custom Directive - Highlighter

CHALLENGE - Custom Directives: Creation of customer directive

2. SOLUTION: Custom Directive - Highlighter

CHALLENGE - Custom Directives: Solution to a challenge

1. Reusable Components

Building Reusable Components: Overview of reusable components

2. Reusability of Components - Explained

Building Reusable Components: Reusability aspects of the components

3. Creating a Reusable Component - Using Input Property

Building Reusable Components: Input property usage

4. Binding Another Input Property

Building Reusable Components: Adding another input property

5. Binding Description Input Property

Building Reusable Components: Binding description

6. Raising Events with Streams in a Reusable Component

Building Reusable Components: Raising events in a reusable component

7. Adding Alias to All Input and Output Properties

Building Reusable Components: Addition of alias for input and output properties

8. Passing Event Data

Building Reusable Components: Passing event data

9. Input, Output Properties - Summary

Building Reusable Components: Summarization

1. Adding Bootstrap-glyphicon to Project

CHALLENGE - Reusable Components: Adding Bootstrap-glyphicon

2. How the Final FacebookLike Component Should Behave

CHALLENGE - Reusable Components: Behaviour of final component

1. FacebookLike Component Challenge Solution

SOLUTION - Reusable Components: Solution to the challenges

1. What We'll Cover in This Section

AngularDart - HTTP Services - Consuming Remote Data: Topic coverage

2. Getting Data from API - Part 1

AngularDart - HTTP Services - Consuming Remote Data: Fetching data from API

3. Getting Data from API - Parsing JSON Using json Decode

AngularDart - HTTP Services - Consuming Remote Data: Getting data, parsing JSON

4. Showing Data in a List

AngularDart - HTTP Services - Consuming Remote Data: How to show the data in a list

5. Using Life Cycle Hook OnInit to Populate List

AngularDart - HTTP Services - Consuming Remote Data: Usage of Life Cycle Hook

6. Separation of Concerns - Creating a Service and Cleaning Code

AngularDart - HTTP Services - Consuming Remote Data: Creation and cleaning of a service

7. Firebase Setup

AngularDart - HTTP Services - Consuming Remote Data: Setup for the Firebase

8. Create Firebase App And Database

AngularDart - HTTP Services - Consuming Remote Data: Creation of Firebase App

9. Setting Up Firebase Project and Adding First Item to Realtime Database

AngularDart - HTTP Services - Consuming Remote Data: Firebase project setup

10. Showing All Items from Firebase - Mapping JSON to Dart Objects

AngularDart - HTTP Services - Consuming Remote Data: JSON Mapping to Dart objects

11. OPTIONAL - Adding Bootstrap to the Project

AngularDart - HTTP Services - Consuming Remote Data: Add Bootstrap to a project

12. Showing added Student Right When Added - Future.Then Method

AngularDart - HTTP Services - Consuming Remote Data: Wrangling with data

13. Deleting items - Problem Fix

AngularDart - HTTP Services - Consuming Remote Data: Troubleshooting - deletion

14. Delete in Front and Back End

AngularDart - HTTP Services - Consuming Remote Data: Deletion in front and back end

15. Update Student - Part 1

AngularDart - HTTP Services - Consuming Remote Data: Student data updation

16. Update Student Final

AngularDart - HTTP Services - Consuming Remote Data: Final student updation

1. Forms - Introduction

AngularDart - Forms: Introduction

2. Forms - Creating Bootstrap Forms

AngularDart - Forms: Creating Bootstrap Forms

3. Forms - Two-Way Binding in a Form

AngularDart - Forms: Two-Way binding

4. Adding Validation - Part 1

AngularDart - Forms: Adding validation

5. Changing Div if Valid

AngularDart - Forms: Changing the Div

6. Clearing our Form with Model

AngularDart - Forms: Clearing the Form

7. Submitting the Form with ngSubmit - Part 1

AngularDart - Forms: Submission of the Form

8. Showing Model Data Depending on Submitted Boolean

AngularDart - Forms: Model data presentation

1. Pipes Introduction

Pipes Introduction: Introduction

2. Pipes - Motivation and What They Do

Pipes Introduction: Motivation behind Pipes

3. Using UpperCase Pipe

Pipes Introduction: Using UpperCase Pipe

4. Pipes - Date Pipe

Pipes Introduction: Data Pipe

5. Parameterizing a Pipe

Pipes Introduction: Pipe parameterization

6. Currency Pipes and Parameters

Pipes Introduction: Currency Pipes and Parameters

7. Chaining Pipes

Pipes Introduction: Chaining Pipes

8. Creating Custom Pipes

Pipes Introduction: Creation of custom Pipes

1. Router Module - Introduction

Routing in AngularDart: Introduction to Router Module

2. Steps to Creating Routing Navigation

Routing in AngularDart: Steps to create Routing navigation

3. Configure Routings - Part 1

Routing in AngularDart: Routings configuration

4. Creating Route and RoutePaths

Routing in AngularDart: Creation of Route and RoutePaths

5. Adding Paths to Browser Bar and Navigate to Template - Part 1

Routing in AngularDart: Additon of paths

6. Adding Bootstrap Button Links

Routing in AngularDart: Addition of Bootstrap button links

7. Adding RouterLinkActive

Routing in AngularDart: Addition of RouterLinkActive

8. Creating Student Model and Populating StudentList Template and Default Route

Routing in AngularDart: Creating and configuring Student Model

9. Adding Page Not Found

Routing in AngularDart: Troubleshooting

10. Redirect

Routing in AngularDart: Redirect

1. Route Params and Navigation - Introduction

Router Module - Part 2: Introduction to Route Params and Navigation

2. Restructuring Student List

Router Module - Part 2: Student list restructuring

3. Showing Dummy Announcements

Router Module - Part 2: Dummy announcements display

4. Adding NavBar - Bootstrap

Router Module - Part 2: Addition of NavBar

5. Set up Student Component and Route

Router Module - Part 2: Setting up of Student component and routing

6. Set up Student List Template and Selecting a Student

Router Module - Part 2: Setup student list template and selecting a student

7. Creating Student Navigation URL and Passing Id Param

Router Module - Part 2: Creation of student navigation URL

8. Set up Student Component Navigation

Router Module - Part 2: Setting up of student component navigation

9. Imperative Navigation When Student Clicked & Passing Params in Browser

Router Module - Part 2: Imperative navigation

10. Fix - Two-Way Binding Issue

Router Module - Part 2: Troubleshooting Two-Way binding issue

1. What We'll Cover in This Section - Demo

Final Project - Student dashboard: Section coverage

2. Creating Data Models

Final Project - Student dashboard: Creation of Data Models

3. Set up Main and Index

Final Project - Student dashboard : Main and Index setup

4. Set up All Components

Final Project - Student dashboard: Setting up rest of the components

5. Setting Up the NavBar

Final Project - Student dashboard: NavBar setup

6. Set up Routes and Paths

Final Project - Student dashboard: Set up Routes and Paths

7. Set up Navigation to Work

Final Project - Student dashboard : Set up Main and Index

8. Showing all Announcements

Final Project - Student dashboard: Showing all Announcements

9. Showing All Dummy Students

Final Project - Student dashboard: Showing All Dummy Students

10. Adding Pointer Style

Final Project - Student dashboard: Adding Pointer Style

11. Setting up Student Details Route and Templates

Final Project - Student dashboard : Setting up Student Details Route and Templates

12. Setting Up Student Details Route - Part 2

Final Project - Student dashboard: Setting Up Student Details Route - Part 2

13. Showing Student Detail ID

Final Project - Student dashboard: Showing Student Detail ID

14. Set up Student Details and Back Button

Final Project - Student dashboard: Set up Student Details and Back Button

15. Set up Add Student Component - Part 1

Final Project - Student dashboard : Set up Add Student Component - Part 1

16. Set up Add Student Route

Final Project - Student dashboard: Set up Add Student Route

17. Adding Students to a List

Final Project - Student dashboard: Adding Students to a List

18. Saving Students to Firebase

Final Project - Student dashboard: Saving Students to Firebase

19. Showing All Saved Students From Firebase

Final Project - Student dashboard : Showing All Saved Students From Firebase

20. Adding a Card

Final Project - Student dashboard: Adding a Card

21. Update a Student

Final Project - Student dashboard: Update a Student

22. Delete a Student

Final Project - Student dashboard: Delete a Student

23. Final Touches and Finishes

Final Project - Student dashboard: Final Touches and Finishes

24. Redirect and Page Not Found

Final Project - Student dashboard: Redirect and Page Not Found

1. What We'll Cover in This Section

AngularDart App Development: Section coverage

2. Install & Check NodeJs

Final Project - Student dashboard: Install & Check NodeJs

3. Set up Main with BrowserClient

Final Project - Student dashboard : Set up Main with BrowserClient

4. Deploy Project to Firebase Host

Final Project - Student dashboard: Deploy Project to Firebase Host