4. Getting Started with Angular Components and Directives | Getting Started with Angular - Second edition

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

Getting Started with Angular - Second edition - Second Edition

By : Minko Gechev

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.

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. 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. 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. 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. 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. 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. 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. Explaining Pipes and Communicating with RESTful Services

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. 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

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Explaining Angular's content projection

Content projection is an important concept when developing user interfaces. It allows us to project pieces of content into different places of the user interface of our application. Web Components solve this problem with the content element. In AngularJS, it is implemented with the infamous transclusion.

Angular is inspired by modern Web standards, especially Web Components, which led to the adoption of some of the methods of content projection used there. In this section, we'll look at them in the context of Angular using the ng-content directive.

Basic content projection in Angular

Let's suppose we're building a component called fancy-button. This component will use the standard HTML button element and add some extra behavior to it. Here is the definition of the fancy-button component:

@Component({ 
  selector: 'fancy-button', 
  template: '<button>Click me</button>' 
}) 
class FancyButton { ... }

Inside of the ...

Visually different images

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Getting Started with Angular - Second edition

Search

Your notes and bookmarks