AngularDart: Build Dynamic Web Apps with Angular and Dart [Video]

Book Image

AngularDart: Build Dynamic Web Apps with Angular and Dart [Video]

By : Paulo Dichone

4 (1)

Book Image

AngularDart: Build Dynamic Web Apps with Angular and Dart [Video]

4 (1)

By: Paulo Dichone

Overview of this book

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. All the codes and supporting files for this course will be available at- https://github.com/PacktPublishing/AngularDart-Build-Dynamic-Web-Apps-with-Angular-and-Dart

Free Chapter

Introduction

Introduction - Who's the Course For

How's The Course Structured

AngularDart - Motivation

Install IntelliJ Idea

Install IntelliJ Idea

For Windows Users ONLY – Windows Development Setup

What We'll Cover in This Section

Windows Development Setup for AngularDart

For MAC Users ONLY – MAC Development Setup for AngularDart

MAC Development Setup

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

AngularDart – An Overview and Motivation

What We'll Cover in This Section

A Brief Angular Architecture Overview

TODO AngularDart Project Walkthrough

Creating a Make It Rain App

Make It Rain - Inline Template

Data Binding - Overview

NgStyle Property Binding and Changing Text Color

Deep Dive into AngularDart Directives

Restructuring Project for Multiple Components

ngIf - toggle a Boolean to Show Text

Using the Hidden Property Binding VS ngIf

ngFor Directive and Index

Using ngClass to Bind More CSS Classes

Using ngStyle Directive

Setting ngStyle from Component's Method

Using ngFor Directive with TrackBy

Overview - Directives - Introduction to Creating Custom Attribute Directives

Creating Customized Attribute Directives

Implementing textZoom Custom Directive

Custom Directive - Adding Input data Binding

CHALLENGE – Custom Directives

Create a Custom Directive - Highlighter

SOLUTION: Custom Directive - Highlighter

Building Reusable Components

Reusable Components

Reusability of Components - Explained

Creating a Reusable Component - Using Input Property

Binding Another Input Property

Binding Description Input Property

Raising Events with Streams in a Reusable Component

Adding Alias to All Input and Output Properties

Passing Event Data

Input, Output Properties - Summary

CHALLENGE – Reusable Components

Adding Bootstrap-glyphicon to Project

How the Final FacebookLike Component Should Behave

SOLUTION – Reusable Components

FacebookLike Component Challenge Solution

AngularDart – HTTP Services – Consuming Remote Data

What We'll Cover in This Section

Getting Data from API - Part 1

Getting Data from API - Parsing JSON Using json Decode

Showing Data in a List

Using Life Cycle Hook OnInit to Populate List

Separation of Concerns - Creating a Service and Cleaning Code

Create Firebase App And Database

Setting Up Firebase Project and Adding First Item to Realtime Database

Showing All Items from Firebase - Mapping JSON to Dart Objects

OPTIONAL - Adding Bootstrap to the Project

Showing added Student Right When Added - Future.Then Method

Deleting items - Problem Fix

Delete in Front and Back End

Update Student - Part 1

Update Student Final

AngularDart – Forms

Forms - Introduction

Forms - Creating Bootstrap Forms

Forms - Two-Way Binding in a Form

Adding Validation - Part 1

Changing Div if Valid

Clearing our Form with Model

Submitting the Form with ngSubmit - Part 1

Showing Model Data Depending on Submitted Boolean

AngularDart – Pipes

Pipes Introduction

Pipes - Motivation and What They Do

Using UpperCase Pipe

Pipes - Date Pipe

Parameterizing a Pipe

Currency Pipes and Parameters

Creating Custom Pipes

Routing in AngularDart

Router Module - Introduction

Steps to Creating Routing Navigation

Configure Routings - Part 1

Creating Route and RoutePaths

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

Adding Bootstrap Button Links

Adding RouterLinkActive

Creating Student Model and Populating StudentList Template and Default Route

Adding Page Not Found

Router Module – Part 2

Route Params and Navigation - Introduction

Restructuring Student List

Showing Dummy Announcements

Adding NavBar - Bootstrap

Set up Student Component and Route

Set up Student List Template and Selecting a Student

Creating Student Navigation URL and Passing Id Param

Set up Student Component Navigation

Imperative Navigation When Student Clicked & Passing Params in Browser

Fix - Two-Way Binding Issue

Final Project – Student dashboard

What We'll Cover in This Section - Demo

Creating Data Models

Set up Main and Index

Set up All Components

Setting Up the NavBar

Set up Routes and Paths

Set up Navigation to Work

Showing all Announcements

Showing All Dummy Students

Adding Pointer Style

Setting up Student Details Route and Templates

Setting Up Student Details Route - Part 2

Showing Student Detail ID

Set up Student Details and Back Button

Set up Add Student Component - Part 1

Set up Add Student Route

Adding Students to a List

Saving Students to Firebase

Showing All Saved Students From Firebase

Update a Student

Delete a Student

Final Touches and Finishes

Redirect and Page Not Found

AngularDart App Development

What We'll Cover in This Section

Install & Check NodeJs

Set up Main with BrowserClient

Deploy Project to Firebase Host

Customer Reviews

4 (1)

5 star

0

4 star

100%

3 star

0

2 star

0

1 star

0

Chapter 1

Introduction

Section 1

Introduction - Who's the Course For

Introduction: Who is the target audience