Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Getting Started with Angular - Second edition
  • Toc
  • feedback
Getting Started with Angular - Second edition

Getting Started with Angular - Second edition

By : Minko Gechev
close
Getting Started with Angular - Second edition

Getting Started with Angular - Second edition

By: Minko Gechev

Overview of this book

Want to build quick and robust web applications with Angular? This book is the quickest way to get to grips with Angular and take advantage of all its new features.
Table of Contents (9 chapters)
close
close
Preface
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Free Chapter
1
1. Get Going with Angular
1. Get Going with Angular
Angular and semver
The evolution of the Web - time for a new framework
The evolution of ECMAScript
Lessons learned from AngularJS in the wild
Summary
2
2. The Building Blocks of an Angular Application
2. The Building Blocks of an Angular Application
A conceptual overview of Angular
Changing directives
Getting to know Angular components
Angular modules
Pipes
Improving change detection
Services
The new router
Summary
3
3. TypeScript Crash Course
3. TypeScript Crash Course
Introduction to TypeScript
Using TypeScript
TypeScript syntax and features introduced by ES2015 and ES2016
Meta-programming with ES2016 decorators
Writing modular code with ES2015
ES2015 module loader
ES2015 and ES2016 recap
Taking advantage of static typing
Further expressiveness with TypeScript decorators
Writing generic code by using type parameters
Writing less verbose code with TypeScript's type inference
Using ambient type definitions
Summary
4
4. Getting Started with Angular Components and Directives
4. Getting Started with Angular Components and Directives
The "Hello world!" application in Angular
Using TypeScript
Playing with Angular and TypeScript
Using Angular directives
Improved semantics of the directives syntax
Defining Angular directives
Creating custom Angular components
Explaining Angular's content projection
Hooking into the component's life cycle
Defining generic views with TemplateRef
Understanding and enhancing the change detection
Summary
5
5. Dependency Injection in Angular
5. Dependency Injection in Angular
Why do I need DI?
DI in Angular
Configuring an injector
Defining factories for instantiating services
Child injectors and visibility
Summary
6
6. Working with the Angular Router and Forms
6. Working with the Angular Router and Forms
Developing the "Coders repository" application
Exploring the Angular router
Using Angular's forms module
Two-way data binding with Angular
Storing the form data
Listing all the stored data
Summary
7
7. Explaining Pipes and Communicating with RESTful Services
chevron up
7. Explaining Pipes and Communicating with RESTful Services
Developing model-driven forms in Angular
Exploring the HTTP module of Angular
Defining parameterized views
Defining nested routes
Transforming data with pipes
Summary
8
8. Tooling and Development Experience
8. Tooling and Development Experience
Running an application in a Web Worker
Initial load of a SPA
Enhancing our development experience
Angular quick starters
AoT compilation in Angular
Summary

Developing model-driven forms in Angular

These will be the last steps for finishing the "Coders repository". You can build on top of the code available at ch6/ts/step-1/ (or ch6/ts/step-2, depending on your previous work), in order to extend the application's functionality with the new concepts we will cover. The complete example is located at ch7/ts/multi-page-model-driven.

This is the result that we will achieve by the end of this section:

Figure 1

In the preceding screenshot, there are two forms:

  • A form that contains the following controls for importing existing users from GitHub:

    • The input for the GitHub handle.

    • A checkbox that points out whether we want to import the developer from GitHub or enter it manually.

  • A form for entering new users manually.

The second form looks exactly the way we left it in the last chapter. However, this time, its definition looks a little bit different:

<form class="form col-md-4" [formGroup]="addDevForm" [hidden]="submitted">
  <!-- TODO --&gt...

Unlock full access

Continue reading for free

A Packt free trial gives you instant online access to our library of over 7000 practical eBooks and videos, constantly updated with the latest in tech
Start a 7-day FREE trial
End of Section 1
Next Section
bookmark search playlist download
font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete