Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Events
Videos
Audiobooks
Packt Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Angular 2 Components
Angular 2 Components

Angular 2 Components: Practical and easy-to-follow guide to Angular 2 Components

Arrow left icon
Profile Icon Nir Kaufman Profile Icon Thierry Templier Thierry
Arrow right icon
€26.99
Paperback Nov 2016 124 pages 1st Edition
eBook
€18.89 €20.99
Paperback
€26.99
eBook + Subscription
€21.99 Monthly
Arrow left icon
Profile Icon Nir Kaufman Profile Icon Thierry Templier Thierry
Arrow right icon
€26.99
Paperback Nov 2016 124 pages 1st Edition
eBook
€18.89 €20.99
Paperback
€26.99
eBook + Subscription
€21.99 Monthly
eBook
€18.89 €20.99
Paperback
€26.99
eBook + Subscription
€21.99 Monthly

What do you get with a Packt Premium Subscription?

Subscribe today for full access to all titles. After checkout, you’ll receive an eBook credit that you can manually redeem on any title — including this one.
Product feature icon Access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon Weekly additions on emerging tech and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon A monthly credit and 50% off any future digital purchases.
Table of content icon View table of contents Preview book icon Preview Book

Angular 2 Components

Chapter 1. Angular 2 Component Architecture

The way we think about web applications has changed. The goal of this chapter is to provide an overview of the existing popular architectural patterns for building frontend applications, and the new approach that relies on composing self-contained custom components.

Understanding the architectural pattern that was implemented in Angular 1 will help you migrate your existing application to Angular 2 in the future. In this chapter, we will discuss those topics:

  • Overview of the Model-View-Controller pattern
  • Angular 1 implementation of model, view, and ViewModel
  • Moving from MVVM to components
  • An example of the Angular 2 components architecture

The Model-View-Controller pattern

This is an architectural design pattern for implementing user interfaces, which has been used for many years for desktop GUI.

It divides the application into three distinct parts:

  • Model: This is responsible for storing the actual data
  • View: This is the presentation layer that renders the data to the user
  • Controller: The glue between the model and the view

The following diagram describes the relationships between those parts:

The Model-View-Controller pattern

This pattern describes the communication between those parts. The view reflects the data in the model, but cannot alter the data directly in the model. It is common to describe the relationship between the model and the view as read only (the view can only read from the model). The view uses the controller by invoking methods and changing attributes. The controller updates the model, which causes the view to update and render the new data.

MVC, which was originally developed for desktop applications, has been widely adopted as an architecture for building single page web applications and can be found in all the popular client-side frameworks, including Angular.

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:

MVC in 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 {
  constructor(){
    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>

Moving from views to components

Angular applications are based around the concept of views. A view in Angular refers to a template (HTML), which is, most of the time, managed by one or more controllers. This view can also contain some custom directives that encapsulate some other chunks of HTML and JavaScript. Naturally, over the years, Angular developers tend to create more and more directives and use them as building blocks that replace the original HTML tags with custom elements.

The concept of composing a view from small custom elements has become trendy and can be found in other popular modern frameworks such as react and polymer. Angular 2 builds around this concept well and will base the UI architecture on those building blocks. Hence from now on, we call components as building blocks and templates as layouts.

Defining components

Components are a clean way of organizing UI code into self-contained, reusable chunks, which contain their own view and logic. Components can be composed together to create a complex user interface. Components can optionally receive properties from the outside world and optionally communicate through callbacks or events. The business logic, structure and styling can be encapsulated inside the component code.

Components in Angular 2 are just directives with a view. Actually, the component in Angular 2 is a type of directive. We can also write a directive that doesn't include a template (and will not be called component) in Angular 2.

Those directives are very similar to the directives you're familiar with in Angular 1.x. The main difference is that in Angular 2.0 we think of two kinds of directives: attribute directives that add behavior to the elements, and structural directives which we named: components.

Breaking the application into components

The angular 2 application is a set of components. We define a component for every UI element, view and route. We must define a root component that we will use as a container for all other components. In other words, an Angular 2 application is a tree of components.

The key for a well-designed, component-oriented Angular 2 application is to break the UI in to a tree of components successfully. For example, let's talk about a simple mobile to-do list application, which looks like this:

Breaking the application into components

The components tree that composes this UI will look like this:

Breaking the application into components

This application is made up of nine components. At the root is the Application component, which contains all the other components. Next, we find the Form component, which is built from an Input component and a Button component.

The TaskList component is a container for the TaskRow component. Each TaskRow comprises three components—a CheckBox, a Label, and a Trash icon.

There is no strict rule about how many components you should create, but a best practice is to break the UI to as many components as we can. The number of components will affect the other aspects of the application such as reusability, maintenance, and testing.

Summary

The idea of building a UI from components is not new. While in Angular 1 we had the ability to develop directives that act like components, it wasn't mandatory. In Angular 2, the whole application is a tree of components, so the ability to break your design into small parts and learn the how to build components is crucial.

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • First look to the Angular 2 Components architecture
  • Creating your own Angular 2 Component
  • Integrating your components with third party components

Description

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.

Who is this book for?

If you are a front-end developer with some experience in Angular and want to understand Angular 2 Components, and easily put it to use to create powerful user interfaces and views, then this book is for you

What you will learn

  • • Break your application into reusable dynamic components
  • • Take advantage of TypeScript in Angular 2
  • • Migrate your Angular 1 directive to an Angular 2 Component
  • • Understand the Angular 2 component structure and APIs
  • • Hook to component life cycle events
  • • Bind dynamic data to your component properties
  • • Communicate with other components using events
  • • Compose complicated UIs from simple components

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Nov 30, 2016
Length: 124 pages
Edition : 1st
Language : English
ISBN-13 : 9781785882340
Vendor :
Google
Languages :
Tools :

What do you get with a Packt Premium Subscription?

Subscribe today for full access to all titles. After checkout, you’ll receive an eBook credit that you can manually redeem on any title — including this one.
Product feature icon Access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon Weekly additions on emerging tech and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon A monthly credit and 50% off any future digital purchases.

Product Details

Publication date : Nov 30, 2016
Length: 124 pages
Edition : 1st
Language : English
ISBN-13 : 9781785882340
Vendor :
Google
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
€189.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
€264.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total 61.98
Angular 2 Components
€26.99
AngularJS Directives Cookbook
€34.99
Total 61.98 Stars icon

Table of Contents

10 Chapters
1. Angular 2 Component Architecture Chevron down icon Chevron up icon
2. Setting Up an Angular 2 Development Environment with angular-cli Chevron down icon Chevron up icon
3. The TypeScript Primer Chevron down icon Chevron up icon
4. Building a Basic Component Chevron down icon Chevron up icon
5. Building Dynamic Components Chevron down icon Chevron up icon
6. Component Communication Chevron down icon Chevron up icon
7. Putting It All Together Chevron down icon Chevron up icon
8. Integrating Third-Party Components Chevron down icon Chevron up icon
9. Angular 2 Directives Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is included in a Packt Premium subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

What are credits? Chevron down icon Chevron up icon

Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’. You'll get one to use immediately after checkout, and then every time you renew. You require an active subscription to use your credits, once used you keep the title forever.

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in. You can cancel at anytime, you will keep access for the remaining period you have paid for. On the date of cancellation you will lose all access to online content, along with any unused credits.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.

Modal Close icon
Modal Close icon