AngularDart: Build Dynamic Web Apps with Angular and Dart

Video description

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.

What You Will Learn

  • Leverage the Dart web platform with the Angular framework to build single-page applications
  • Develop web apps focused on productivity, performance, and stability
  • Use the Angular and Dart (AngularDart) web framework to build high-performance web apps
  • Create a make it rain app
  • Use hidden property binding
  • Discover how to use the ngClass to bind more CSS classes
  • Implement the textZoom custom directive
  • Create customized attribute directives


This course is for both Dart developers who want to build stable, modern Angular-based web applications and Flutter developers who want to leverage their Dart programming language skills to build modern web apps with AngularDart.

About The Author

Paulo Dichone: Paulo Dichone is a highly skilled developer and teacher with a strong background in Computer Science. With his expertise in Android App Development for mobile and web platforms, Paulo founded Magadistudio, a successful mobile app development company.

Passionate about teaching, Paulo is dedicated to helping learners master Android app development. His goal is to empower students with the knowledge and skills needed to create impressive Android applications and experience the freedom of being an Android developer.

With his deep understanding of the subject matter and a commitment to student success, Paulo Dichone is a trusted instructor who can guide learners on their journey to becoming proficient Android developers.

Publisher resources

Download Example Code

Table of contents

  1. Chapter 1 : Introduction
    1. Introduction - Who's the Course For
    2. How's The Course Structured
    3. AngularDart - Motivation
  2. Chapter 2 : Install IntelliJ Idea
    1. Install IntelliJ Idea
  3. Chapter 3 : For Windows Users ONLY – Windows Development Setup
    1. What We'll Cover in This Section
    2. Windows Development Setup for AngularDart
  4. Chapter 4 : For MAC Users ONLY – MAC Development Setup for AngularDart
    1. MAC Development Setup
    2. Set up Dart SDK and Path on MAC - Running a Dart App
  5. Chapter 5 : AngularDart – An Overview and Motivation
    1. What We'll Cover in This Section
    2. A Brief Angular Architecture Overview
    3. TODO AngularDart Project Walkthrough
    4. Creating a Make It Rain App
    5. Make It Rain - Inline Template
    6. ngIf Directive
    7. Data Binding - Overview
    8. NgStyle Property Binding and Changing Text Color
  6. Chapter 6 : Deep Dive into AngularDart Directives
    1. Restructuring Project for Multiple Components
    2. ngIf - toggle a Boolean to Show Text
    3. Using the Hidden Property Binding VS ngIf
    4. ngFor Directive and Index
    5. Using ngClass to Bind More CSS Classes
    6. Using ngStyle Directive
    7. Setting ngStyle from Component's Method
    8. Using ngFor Directive with TrackBy
    9. Overview - Directives - Introduction to Creating Custom Attribute Directives
    10. Creating Customized Attribute Directives
    11. Implementing textZoom Custom Directive
    12. Custom Directive - Adding Input data Binding
  7. Chapter 7 : CHALLENGE – Custom Directives
    1. Create a Custom Directive - Highlighter
    2. SOLUTION: Custom Directive - Highlighter
  8. Chapter 8 : Building Reusable Components
    1. Reusable Components
    2. Reusability of Components - Explained
    3. Creating a Reusable Component - Using Input Property
    4. Binding Another Input Property
    5. Binding Description Input Property
    6. Raising Events with Streams in a Reusable Component
    7. Adding Alias to All Input and Output Properties
    8. Passing Event Data
    9. Input, Output Properties - Summary
  9. Chapter 9 : CHALLENGE – Reusable Components
    1. Adding Bootstrap-glyphicon to Project
    2. How the Final FacebookLike Component Should Behave
  10. Chapter 10 : SOLUTION – Reusable Components
    1. FacebookLike Component Challenge Solution
  11. Chapter 11 : AngularDart – HTTP Services – Consuming Remote Data
    1. What We'll Cover in This Section
    2. Getting Data from API - Part 1
    3. Getting Data from API - Parsing JSON Using json Decode
    4. Showing Data in a List
    5. Using Life Cycle Hook OnInit to Populate List
    6. Separation of Concerns - Creating a Service and Cleaning Code
    7. Firebase Setup
    8. Create Firebase App And Database
    9. Setting Up Firebase Project and Adding First Item to Realtime Database
    10. Showing All Items from Firebase - Mapping JSON to Dart Objects
    11. OPTIONAL - Adding Bootstrap to the Project
    12. Showing added Student Right When Added - Future.Then Method
    13. Deleting items - Problem Fix
    14. Delete in Front and Back End
    15. Update Student - Part 1
    16. Update Student Final
  12. Chapter 12 : AngularDart – Forms
    1. Forms - Introduction
    2. Forms - Creating Bootstrap Forms
    3. Forms - Two-Way Binding in a Form
    4. Adding Validation - Part 1
    5. Changing Div if Valid
    6. Clearing our Form with Model
    7. Submitting the Form with ngSubmit - Part 1
    8. Showing Model Data Depending on Submitted Boolean
  13. Chapter 13 : AngularDart – Pipes
    1. Pipes Introduction
    2. Pipes - Motivation and What They Do
    3. Using UpperCase Pipe
    4. Pipes - Date Pipe
    5. Parameterizing a Pipe
    6. Currency Pipes and Parameters
    7. Chaining Pipes
    8. Creating Custom Pipes
  14. Chapter 14 : Routing in AngularDart
    1. Router Module - Introduction
    2. Steps to Creating Routing Navigation
    3. Configure Routings - Part 1
    4. Creating Route and RoutePaths
    5. Adding Paths to Browser Bar and Navigate to Template - Part 1
    6. Adding Bootstrap Button Links
    7. Adding RouterLinkActive
    8. Creating Student Model and Populating StudentList Template and Default Route
    9. Adding Page Not Found
    10. Redirect
  15. Chapter 15 : Router Module – Part 2
    1. Route Params and Navigation - Introduction
    2. Restructuring Student List
    3. Showing Dummy Announcements
    4. Adding NavBar - Bootstrap
    5. Set up Student Component and Route
    6. Set up Student List Template and Selecting a Student
    7. Creating Student Navigation URL and Passing Id Param
    8. Set up Student Component Navigation
    9. Imperative Navigation When Student Clicked Passing Params in Browser
    10. Fix - Two-Way Binding Issue
  16. Chapter 16 : Final Project – Student dashboard
    1. What We'll Cover in This Section - Demo
    2. Creating Data Models
    3. Set up Main and Index
    4. Set up All Components
    5. Setting Up the NavBar
    6. Set up Routes and Paths
    7. Set up Navigation to Work
    8. Showing all Announcements
    9. Showing All Dummy Students
    10. Adding Pointer Style
    11. Setting up Student Details Route and Templates
    12. Setting Up Student Details Route - Part 2
    13. Showing Student Detail ID
    14. Set up Student Details and Back Button
    15. Set up Add Student Component - Part 1
    16. Set up Add Student Route
    17. Adding Students to a List
    18. Saving Students to Firebase
    19. Showing All Saved Students From Firebase
    20. Adding a Card
    21. Update a Student
    22. Delete a Student
    23. Final Touches and Finishes
    24. Redirect and Page Not Found
  17. Chapter 17 : AngularDart App Development
    1. What We'll Cover in This Section
    2. Install Check NodeJs
    3. Set up Main with BrowserClient
    4. Deploy Project to Firebase Host

Product information

  • Title: AngularDart: Build Dynamic Web Apps with Angular and Dart
  • Author(s): Paulo Dichone
  • Release date: May 2020
  • Publisher(s): Packt Publishing
  • ISBN: 9781800561090