Upgrading from AngularJS to Angular

321 Pages·2012·3.76 MB·English

Jeremy Wilken
M A N N I N G
www.EBooksWorld.ir
Communicating between Angular components
Angular applications are based around components that communicate with one
another. You pass data into a child component using inputs and can emit events up
to a parent component that shares data. This is essentially the way that normal HTML
elements behave, which makes Angular easy to understand and learn. 
The figure below shows the structure of an example application used in chapter 5: It’s
composed of a tree of components, much like what you see when creating HTML docu-
ments. The Dashboard component has four child components: two instances of the Metric
component and two of the Nodes component. The Dashboard component contains data,
which it passes to each of its children using an input binding, which is how Angular shares
data from a parent to a child component. In addition to sharing this data, Angular also
keeps track of data changes and understands when to redraw the screen.
App Key:
component
[Input bindings]
(onRefresh) (Emit output events)
#dashboard
#Local template variable
Dashboard Navbar
component component
[cpu] [mem] [cluster1] [cluster2]
Metric Metric Nodes Nodes
component component component component
[node] [node] [node] [node] [node] [node]
Nodes Row Nodes Row Nodes Row Nodes Row Nodes Row Nodes Row
component component component component component component
Inputs let us send data from a parent to a child, but outputs allow data to flow in the
other direction. Similar to how events bubble up to their parent, outputs are Angular’s
syntax for allowing a child to pass data or events back to its parent. In the figure, the
Navbar component sends an output event to the App component. The App compo-
nent waits until an output event is fired and then reacts accordingly. In this example,
the App component refreshes the data on the page, but you can trigger any type of
logic to execute. Angular provides other ways to communicate, such as using services
or local template variables, which are covered in detail in this book.
www.EBooksWorld.ir
Angular in Action
JEREMY WILKEN
MANNING
Shelter ISland
www.EBooksWorld.ir
For online information and ordering of this and other Manning books, please visit www.manning.com.
The publisher offers discounts on this book when ordered in quantity. For more information, please
contact
Special Sales Department
Manning Publications Co.
20 Baldwin Road
PO Box 761
Shelter Island, NY 11964
Email: [email protected]
©2018 by Manning Publications Co. All rights reserved.
No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form
or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the
publisher.
Many of the designations used by manufacturers and sellers to distinguish their products are claimed
as trademarks. Where those designations appear in the book, and Manning Publications was aware of a
trademark claim, the designations have been printed in initial caps or all caps.
∞Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books
we publish printed on acid-f ree paper, and we exert our best efforts to that end. Recognizing also our
responsibility to conserve the resources of our planet, Manning books are printed on paper that is at
least 15 percent recycled and processed without the use of elemental chlorine.
Manning Publications Co. Development editors: Cynthia Kane, Helen Stergius
20 Baldwin Road Review editor: Ivan Martinovic´
PO Box 761 Technical development editor: Alain Couniot
Shelter Island, NY 11964 Project editor: Kevin Sullivan
Copyeditor: Corbin Collins
Proofreader: Alyson Brener
Technical proofreader: Tanya Wilke
Typesetter: Happenstance Type- O-Rama
Cover designer: Marija Tudor
ISBN 9781617293313
Printed in the United States
1 2 3 4 5 6 7 8 9 10 - EBM - 23 22 21 20 19 18
www.EBooksWorld.ir
To my parents, who gave me great encouragement, support, and latitude to become
what I am today.
www.EBooksWorld.ir
www.EBooksWorld.ir
contents
preface x
acknowledgments xii
about this book xiii
about the author xvii
about the cover illustration xviii
1 Angular: a modern web platform 1
1.1 Why choose Angular? 2
1.2 What you’ll learn 3
1.3 The journey from AngularJS to Angular 4
1.4 Angular: a platform, not a framework 5
Angular CLI 6 ■ Server rendering and the compiler 7 ■ Mobile
and desktop capabilities 8 ■ UI libraries 9
1.5 Component architecture 11
Components’ key characteristics 13 ■ Shadow
DOM 15 ■ Templates 17 ■ JavaScript modules 17
1.6 Modern JavaScript and Angular 20
Observables 21
1.7 TypeScript and Angular 23
v
www.EBooksWorld.ir
vvii contents
2 Building your first Angular app 25
2.1 Previewing the chapter project 26
2.2 Setting up the project 28
2.3 The basic app scaffolding 29
2.4 How Angular renders the base application 31
App component 31 ■ App module 32 ■ Bootstrapping the
app 33
2.5 Building services 36
2.6 Creating your first component 38
2.7 Components that use components and services 44
2.8 Components with forms and events 47
2.9 Application routing 50
3 App essentials 54
3.1 Entities in Angular 55
Modules 57 ■ Components 58 ■ Directives 60 ■
Pipes 62 ■ Services 63
3.2 How Angular begins to render an app 64
3.3 Types of compilers 65
3.4 Dependency injection 66
3.5 Change detection 67
3.6 Template expressions and bindings 68
Interpolation 69 ■ Property bindings 70 ■ Special property
bindings 71 ■ Attribute bindings 72 ■ Event bindings 73
4 Component basics 76
4.1 Setting up the chapter example 77
Getting the code 79
4.2 Composition and lifecycle of a component 79
Component lifecycle 81 ■ Lifecycle hooks 83 ■ Nesting
components 84
4.3 Types of components 85
4.4 Creating a Data component 89
www.EBooksWorld.ir
contents vviiii
4.5 Using inputs with components 91
Input basics 92 ■ Intercepting inputs 95
4.6 Content projection 97
5 Advanced components 104
5.1 Change detection and optimizations 105
5.2 Communicating between components 108
Output events and template variables 110 ■ View Child to
reference components 112
5.3 Styling components and encapsulation modes 113
Adding styles to a component 114 ■ Encapsulation modes 116
5.4 Dynamically rendering components 119
Using the ng-bootstrap modal for dynamic
components 120 ■ Dynamically creating a component and
rendering it 123
6 Services 128
6.1 Setting up the chapter example 129
Getting the chapter files 131 ■ Sample data 131
6.2 Creating Angular services 132
6.3 Dependency injection and injector trees 137
6.4 Services without dependency injection 141
6.5 Using the HttpClient service 142
HttpInterceptor 146
6.6 Helper services 149
6.7 Services for sharing 153
6.8 Additional services 157
7 Routing 159
7.1 Setting up the chapter example 160
7.2 Route definitions and router setup 162
7.3 Feature modules and routing 165
7.4 Route parameters 167
Creating links in templates with routerLink 167 ■ Accessing the
route parameters in a component 168
www.EBooksWorld.ir
vviiiiii contents
7.5 Child routes 170
7.6 Secondary routes 173
Defining a secondary route 174 ■ Navigating between secondary
routes 175 ■ Closing a secondary route and programmatic
routing 176
7.7 Route guards to limit access 177
7.8 Lazy loading 182
7.9 Routing best practices 185
8 Building custom directives and pipes 188
8.1 Setting up the chapter example 189
8.2 Crafting custom directives 190
Creating an attribute directive 192 ■ Modifying a component with
a directive with events 194 ■ Creating a structural directive 197
8.3 Crafting custom pipes 199
Creating a pure pipe 201 ■ Creating an impure pipe 203
9 Forms 208
9.1 Setting up the chapter example 209
Review the app before starting 211
9.2 Template-driven forms 212
Binding model data to inputs with NgModel 212 ■ Validating
form controls with NgModel 214 ■ Custom validation with
directives 217 ■ Handling submit or cancel events 219
9.3 Reactive forms 221
Defining your form 222 ■ Implementing the
template 224 ■ Watching changes 226 ■ Custom validators
with reactive forms 227 ■ Handling submit or cancel
events 230 ■ Which form approach is better? 234
9.4 Custom form controls 235
10 Testing your application 242
10.1 Testing tools and setting up the chapter example 243
Testing tools 244
www.EBooksWorld.ir