38,39 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Learn to build component-based user interfaces of the future using Angular 2
About This Book
- Developers will be able to make better websites right away by building the example components in the book
- You'll learn new ways of conceptualizing how to design your web applications, which will prepare you to keep making more sophisticated projects
- Learning these concepts and building these apps will put developers ahead of the curve in preparing for "tomorrow's Internet," as component-based development and component-centric thinking are increasingly in demand
Who This Book Is For
This book is for Angular developers who already have a good understanding of basic frontend web technologies such as JavaScript, HTML, and CSS. You will learn about the new component-based architecture in Angular 2 and how to use it to build modern and clean user interfaces.
What You Will Learn
- Understand the concept of a component-based UI architecture
- Grasp Angular 2 core concepts
- See the technologies used to work with Angular 2 (mainly ES6)
- Perform basic and advanced tasks using Angular 2 components
- Use dependency injection within Angular 2 components
- Test Angular 2 components with testing frameworks
- Structure an application using Angular 2
- Build an entire application from A to Z using Angular 2
In Detail
Through this book, you will learn how to use Angular 2 and its component-based architecture in order to develop modern user interfaces. A new holistic way of thinking about UI development will be established throughout this book, and you will discover the power of Angular 2 components through many examples. This book is based on Release Candidate 1(RC1) of Angular 2.
On this journey, you'll discover the benefits of component-based user interfaces over the classical MVC design. Also, you will get a chance to compare a classical MVC with a component-based approach and understand the challenges of modern user interfaces. You will learn the very basics of the required core technologies and the setup needed to get going with Angular 2, and progressively enhance your understanding of Angular 2 components by working on the example application.
After reading the book and following the example application, you will have built a small-to-mid-sized application with Angular 2 using a component-based UI architecture.
Style and approach
The new component-style directives in Angular 2 will change developers' workflows and their way of thinking about shared and reusable blocks of custom HTML in the shadow DOM. This is the first book to guide developers along this path. It provides a practical way of learning concepts, giving you the chance to build components of your own. With this book, you will get ahead of the curve in a new wave of web development by tightly focusing on one area, which is the key to unlocking the powers of Angular development.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 471
Veröffentlichungsjahr: 2016
Ähnliche
Table of Contents
Mastering Angular 2 Components
Mastering Angular 2 Components
Copyright © 2016 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: June 2016
Production reference: 1280616
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78588-464-1
www.packtpub.com
Credits
Author
Gion Kunz
Reviewer
Carlos Morales
Commissioning Editor
Sarah Crofton
Acquisition Editors
Aaron Lazar
Larissa Pinto
Content Development Editor
Samantha Gonsalves
Technical Editor
Madhunikita Sunil Chindarkar
Copy Editor
Priyanka Ravi
Project Coordinator
Sanchita Mandal
Proofreader
Safis Editing
Indexer
Monica Ajmera Mehta
Graphics
Disha Haria
Production Coordinator
Melwyn Dsa
Cover Work
Melwyn Dsa
About the Author
Gion Kunz has years of experience with web technologies and is totally in love with web standards. With over 10 years of experience of writing interactive user interfaces using JavaScript, he constantly evaluates new approaches and frameworks. He's worked with AngularJS for over 3 years now and is one of the earliest adopters of Angular 2. Gion speaks about Angular 2 at conferences, and he helps with the organization of the Zurich Angular Meetup group in Switzerland.
He currently works for the start-up company oddEVEN in Zurich, where they help customers build websites and applications. Besides working for oddEVEN, Gion is a head instructor at the SAE Institute in Zurich and loves to get his students enthusiastic about the Web.
He is also the creator of the responsive charting library Chartist, and he loves to contribute to the open source community whenever he finds time.
When Gion is not busy with web technologies, you can probably find him at his home music studio, outdoors, fishing, or spending quality time with his girlfriend and their cute little dog.
I would like to thank my girlfriend, Nathalie, for her ongoing support and her patience with all my efforts spent on this book. I really appreciate all that you did for both of us during this time and that you compensated the energy loss I've brought into our relation.
About the Reviewer
Carlos Morales started programming in BASIC when he was 6 years old with a Sinclair ZX Spectrum+ that he still owns. He's loved the technology ever since. Professionally, he has worked for more than 15 years in different roles, always around web applications. He fell in love with Angular, and he founded the Angular Meetup group in Zürich, which is one of the most attended Meetups in the city.
Soy ingeniero informático gracias a mi dedicación, pero sobretodo a mis padres.
www.PacktPub.com
eBooks, discount offers, and more
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
https://www2.packtpub.com/books/subscription/packtlib
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.
Why subscribe?
Preface
Web components have long been touted as the next great leap forward in web development. With Angular 2, we're closer than ever. Over the past couple of years, there's been a lot of buzz around web components for quite some time in the web development community. New component-style directives in Angular 2 will change developers' workflows and their thinking about shared and reusable blocks of custom HTML in the shadow DOM. Ours is the first book that guides developers along this path. It's also a practical way to learn, giving readers the chance to build components of their own. With Mastering Angular 2 Components, learners will get ahead of the curve in a new wave of web development by tightly focusing on an area that's the key to unlocking the powers of Angular development.
Mastering Angular 2 Components teaches readers to think componentially. This rich guide to the new component-centric way of doing things in Angular teaches readers how to invent, build, and manage shared and reusable components for their web projects. This book will change how developers think about how to accomplish things in Angular 2, and the reader will be working on useful and fun example components throughout.
What this book covers
Chapter 1, Component-Based User Interfaces, looks at a bit at the UI development history and provides a brief introduction to component-based user interfaces in general. We will see how Angular 2 handles this concept.
Chapter 2, Ready, Set, Go!, will get the reader started on their journey toward building an Angular 2 component-based application. It covers the basic elements of structuring an application with components.
Chapter 3, Composing with Components, is where the reader will start to structure the user interface into its basic pieces. The reader will then go on to compose an application using components by organizing an application layout into components, establishing the composition of components using QueryList, and creating a reusable tab component to structure the application interface.
Chapter 4, No Comments, Please!, is where the reader will learn how to build a commenting system using components. They will learn to create a component to list comments and also to create new comments.
Chapter 5, Component-Based Routing, explains how components react to routing and will enable the reader to add simple routing to the existing components in the task management application. The reader will also work on the login process and build an understanding to protect components using the router.
Chapter 6, Keeping Up with Activities, covers the creation of components that will visualize activity streams on project and task level.
Chapter 7, Components for User Experience, is where the reader will create many small reusable components that will have a great effect on the overall user experience of the task management application. This includes in-place editing of text fields, infinite scroll, popup notification, and drag and drop support.
Chapter 8, Time Will Tell, focuses on creating time-tracking components that helps estimate time on a project and task level but also for users to log the time spent on tasks.
Chapter 9, Spaceship Dashboard, focuses on creating components to visualize some data in the task management application using the third-party library Chartist.
Chapter 10, Making Things Pluggable, is where the reader will learn about an approach to make components pluggable using a simple but powerful pattern. With a DIY plugin architecture for Angular 2 components, we make our task management system extensible.
Chapter 11, Putting Things to the Test, covers some basic approaches to testing Angular 2 components. We will see the options for mocking/overriding specific parts of a component for testing.
Appendix, Task Management Application Source Code, contains all the information you'll need to download and install the source code that comes with this book. You'll also find instructions to use and troubleshoot the code in there.
What you need for this book
This book will need a basic installation of Node.js on your Windows, Mac, or Linux machine.
Who this book is for
This book is for Angular developers who already have a good understanding of basic frontend web technologies, such as JavaScript, HTML, and CSS. You will learn about the new component-based architecture in Angular 2 and how to use it to build modern and clean user interfaces.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail <[email protected]>, and mention the book's title in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code
You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
You can download the code files by following these steps:
You can also download the code files by clicking on the Code Files button on the book's webpage at the Packt Publishing website. This page can be accessed by entering the book's name in the Search box. Please note that you need to be logged in to your Packt account.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Mastering-Angular-2-Components. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Downloading the color images of this book
We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from https://www.packtpub.com/sites/default/files/downloads/MasteringAngular2Components_ColorImages.pdf.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
Questions
If you have a problem with any aspect of this book, you can contact us at <[email protected]>, and we will do our best to address the problem.
Chapter 1. Component-Based User Interfaces
Although we'll cover a lot of Angular-related topics in this book, the focus will be mainly on creating component-based user interfaces. It's one thing to understand a framework, such as Angular 2, but it's a whole different thing to establish an effective workflow using a component-based architecture. In this book, I'll try to explain the core concepts behind Angular 2 components and how we can leverage this architecture to create modern, efficient, and maintainable user interfaces.
Besides learning all the necessary concepts behind Angular 2, we will together create a task-management application from scratch. This will allow us to explore different approaches to solve common UI problems using the component system that is provided by Angular 2.
A preview of the task management application that we are going to build
In this chapter, we will take a look at how component-based user interfaces help us build greater applications. Over the course of this book, we will build an Angular 2 application together, where we will use the component-based approach to its full potential. This chapter will also introduce you to the technologies that are used in this book. The topics that we will cover in this chapter are as follows:
Thinking of organisms
Today's user interfaces do not consist of just a bunch of form elements that are cobbled together onto a screen. Modern users experience design and innovative visual presentations of interactive content challenges technology more than ever.
Sadly, we almost always tend to think in pages when we flesh out concepts for web applications, such as the pages within a printed book. Well, this is probably the most efficient way to convey information for this kind of content and medium. You can skim through the pages one by one without any real physical effort, read paragraph by paragraph, and just scan through the chapters that you don't find interesting.
The problem with thinking in pages too much is that this concept, which is borrowed from books, does not really translate well to how things work in the real world. The world is created from organisms that form a system of organisms together. This system itself forms an organism again, just on a higher level.
Take our bodies as an example. We mostly consist of independent organs that interact with each other using electrical and chemical signals. Organs themselves consist of proteins that on their own work like a machine to form a system. Down to the molecules, atoms, protons, and quarks, we can't really tell where one starts and where it ends. What we can tell for sure is that it's all about systems of organisms with interdependencies, and it is not about pages.
I like to view user interfaces as systems of organisms. Whether if, where, and how they are distributed to pages is subordinate while designing them. Also, they should work independently, and they should interact with each other on an interdependent level.
Angular's component architecture
For me, the concept of directives from the first version of Angular changed the game in frontend UI frameworks. This was the first time that I felt that there was a simple yet powerful concept that allowed the creation of reusable UI components. Directives could communicate with DOM events or messaging services. They allowed you to follow the principle of composition, and you could nest directives and create larger directives that solely consisted of smaller directives arranged together. Actually, directives were a very nice implementation of components for the browser.
In this section, we'll look into the component-based architecture of Angular 2 and how the things we've learned about components will fit into Angular.
Everything is a component
As an early adopter of Angular 2 and while talking to other people about it, I got frequently asked what the biggest difference is to the first version. My answer to this question was always the same. Everything is a component.
For me, this paradigm shift was the most relevant change that both simplified and enriched the framework. Of course, there are a lot of other changes with Angular 2. However, as an advocate of component-based user interfaces, I've found that this change is the most interesting one. Of course, this change also came with a lot of architectural changes.
Angular 2 supports the idea of looking at the user interface holistically and supporting composition with components. However, the biggest difference to its first version is that now your pages are no longer global views, but they are simply components that are assembled from other components. If you've been following this chapter, you'll notice that this is exactly what a holistic approach to user interfaces demands. No more pages but systems of components.
Tip
Angular 2 still uses the concept of directives, although directives are now really what the name suggests. They are orders for the browser to attach a given behavior to an element. Components are a special kind of directives that come with a view.
