Book Image

Angular 2 Components

By : Thierry Templier Thierry
Book Image

Angular 2 Components

By: Thierry Templier Thierry

Overview of this book

This book is a concise guide to Angular 2 Components and is based on the stable version of Angular 2. You will start with learning about the Angular 2 Components architecture and how components differ from Angular directives in Angular 1. You will then move on to quickly set up an Angular 2 development environment and grasp the basics of TypeScript. With this strong foundation in place, you will start building components. The book will teach you, with an example, how to define component behavior, create component templates, and use the controller of your component. You will also learn how to make your components communicate with each other. Once you have built a component, you will learn how to extend it by integrating third-party components with it. By the end of the book, you will be confident with building and using components for your applications.
Table of Contents (16 chapters)
Angular 2 Components
About the Authors
About the Reviewers

MVC in Angular 1

Angular 1 implements a variation of the classic MVC, which is known by the name Model View ViewModel (MVVM). This pattern describes different roles and communication between the parts:

  • Model: This holds the data or acts as data access layer

  • View: Like MVC, this is the presentation layer

  • ViewModel: This is an abstraction of the view that is bound to the view

The following diagram describes the relationships between those parts with the terminology of Angular 1:

The ViewModel in Angular 1 is an object named: '$scope' that is constructed by an Angular controller. We do not always interact with this object directly. It's binding to the view is two-way (In Angular, we refer to the view as a 'Template'). The ViewModel can read and alter the data on the model and update itself when necessary. The view will reflect those changes immediately. Angular doesn't include any predefined model type. Instead, we code our models as plain JavaScript and register it as an Angular service. The following code snippet shows the structure of a custom model service Model.js:

class Product {
    this.color = "red";

The following code snippet shows the structure of ViewModel.js:

class ProductController {
  constructor(Product) {
    this.product = Product

The following code snippet shows the structure of View.html:

<p>{{ product.color }}</p>