Header

Microsoft Virtual Academy

Mastering Angular, Part 1

Components
Eric W. Greene

Produced by
• What is Angular?
• Getting Started with Angular
• Demo: Setting Up the Angular Starter Application
• Component Classes and Template Variables
• Demo: Add a Header to the Application
• Working with an Array of Data
• Demo: Displaying a List of Colors
• Collecting Data from the User
• Demo: Add a New Color Form
• External Templates
• Demo: Moving the Template to an External File
• Styling a Component
• Demo: Adding Styles to the Component
• Keyboard Events
• Demo: Wiring Up Keyboard Events
• HTML/CSS/JS based Application Framework
• Cross Platform – web application, desktop applications and native
applications
• Speed and Performance – code generation, universal, code splitting
• Productivity – templates, CLI, IDEs
• Full Development Story – testing, animations, accessibility
• Angular is more than a user interface (UI) widget library (such as React)
• Angular is a complete framework for building the UI layer of many kinds
of applications including web applications, desktop applications and
even native applications
• Angular organizes code through modules, provides UI widgets through
components, formats data with pipes, manipulates the DOM through
directives, provides access to REST services through the HTTP module,
enhances HTML forms, application routing, etc…
• The most important aspect of Angular is Component Driven
Development
• Components are the future of web applications, and truly all UI
development across all platforms
• Angular Components are similar to React Components, but they actually
follow the up and coming Web Components standards (which React
does not)
• Understanding Component Driven Development is by far the most
important part of this course
• Angular Components generally follows the Web Components standards
• For more information on Web Components
• http://webcomponents.org
• Custom Elements – used for Components
• HTML Imports – not supported
• Templates – used for Structural Directives
• Shadow DOM – used by Components
• Web Components are placed in web pages using custom elements
• To better understand this concept, think of HTML 5 Audio and Video
elements as components
• Using the <audio> and <video> tags results in a audio and video
component, respectively, being displayed
• Web Components are custom built components which are added to the
page with custom elements
• HTML 5 supports custom element so long as the tag name has a dash in
it; therefore, all components are two word names
• The Web Component's standards use HTML imports to include third-
party components so they can be added to the web page
• While Angular does not support this approach, components are
included via JavaScript files loaded with script elements, SystemJS
dynamic module loading or bundling systems such as Webpack
• The template element is used to specify the template for Web
Components
• The template element is part of the HTML 5 specification
• Angular uses the template element for structural directives
• Typically, developers will not see this directly as it is hidden by the
asterisk syntax
• Web Components use a shadow DOM to isolate the DOM tree of the
component from the DOM tree of the web page itself
• This isolation is referred to as DOM tree and style encapsulation
• This allows CSS styles from the page's DOM tree to not be applied to the
component
• Component's can then define their own styles independent of their
surrounding container
• Angular supports the shadow DOM through native implementations
and polyfills
• Angular works on the following platforms
• Web Browsers
• Electron Framework
• Native iOS and Android Applications with NativeScript
• Server Rendering for Universal Web Applications (isomorphic)
• Angular can be coded with any text editor
• Popular Editors include
• Visual Studio Code
• Atom
• Sublime
• WebStorm
• Visual Studio
• VIM
• Angular applications require some initial project configuration to get up
and running
• There are many ways to get started
• Angular CLI
• Numerous Starter Projects
• From Scratch
• This course will use a starter project configured with WebPack 2
• The WebPack development server will serve the web pages, and
WebPack will bundle the application files
• The initial starter project can be downloaded from GitHub
• Git is not required, simply fire up a web browser, and visit the following
link
• https://github.com/training4developers/mastering-angular-starter
• In the demonstration we will download, configure and fire up the project
Demo
Setting Up the Angular Starter Application
• Angular Modules are not the same thing as ES2015 Modules
• Organize Parts of a Angular Application
• Components must be registered with a Module to be used
• Modules provide a declarations option for configure template items
such as components, pipes, and other directives
• All Angular applications contain an App Module which is used by
Angular to load the application parts and bootstrap the application
• All Angular applications contain a root component commonly named
App Component which is loaded by the App Module
• Classes are part of ES2015
• Fundamentally, they are nothing more than a syntax improvement for
old-school function constructors and prototype inheritance
• Angular uses classes to define many of an application's parts, but then
determines what each part does through a decorator
• Decorators are not part of ES2015 but provided by TypeScript
• They follow the composition pattern of inheritance
• When a component is referenced in the template, Angular creates an
instance of the component class
• The instance of the component class contains data, event handlers and
lifecycle functions
• The component data is bound to the template via template variables (or
more generally known as template expressions)
• For Angular 1 developers, the component instance can be thought of as
the controllerAs object
Demo
Add a Header to the Application
• Commonly, component data is more than a primitive value
• Component data can objects such as arrays
• Working with a collection data in a component's template required a
special structural directive named ngFor.
• The directive ngFor is used to iterate over an array of data, producing
new DOM objects for item in the array
 The variable colors is an array of
<ul> string values
<li *ngFor="let color of colors">
{{color}} The variable color will represent each
</li> color as the colors array is iterated
</ul> over.

The asterisk is a short hand syntax for

structural directives and the template
element
Demo
Displaying a List of Colors
• A common feature of an application is to collect data from the user
• HTML provides form controls for collecting information
• Angular connects into the form controls to provide validation and
synchronize the form control data with properties on the component
• To support forms, Angular needs to import its Forms Module
• The Forms Module needs to be imported in to the App Module, then its
capabilities such as ngModel can be used to link component fields to
form controls
 <input type="text" id="new-color" [(ngModel)]="newColor">
Banana brackets occur when two-way data binding has been configured.
Square brackets represent one-way binding, also known as input.
Parenthesis brackets represent event binding, also known as output.
Combining outputs and inputs, results in two-way binding.
• Once data has been collected, the use typically informs the application
its time to process the data by click some kind of button
• Clicking a button triggers a click event on the button
• Angular allows a function defined on the component to be passed as an
event handler to a button defined in the template
• When the button is click, the function will be executed, and it can take
the data collected and do something with it
Demo
Add a New Color Form
External Templates

• Templates can be externalized from the Angular Component

• For very small templates, keep it in the template using template literals
is acceptable
• For larger templates, especially when HTML syntax highlighting is
desired, an external file makes more sense
• External files can be referenced via templateUrl or by require-ing them
with WebPack
• The template itself does not need to modified
Demo
Moving the Template to an External File
• Before Component Driven Development and Web Components styles
were thought of as global and applied to the whole page
• The stylesheet itself was viewed as external to the content it was
marking up, related, but external
• With components, the concept of component styles or stylesheets for a
component itself has emerged
• Much more could be said about component styles in connection with
the Shadow DOM, but will not be covered in this course
• Styles can be specified within the component decorator, similar to the
template option
• Styles can be externalized through the styleUrls option, or by require-
ing a style through CommonJS with web pack
Demo
Adding Styles to the Component
• Many users like to use key strokes to perform application operations
• Angular makes it easy to enable keyboard events on HTML Elements
• If specific events such as hitting the enter key only need to be captured
the attribute can be configured as such:
<input type="text" [(ngModel)]="newColor" (keyup.enter)="addColor()">
Demo
Wiring Up Keyboard Events
• In this course, a simple Angular application was coded
• The basics of components were explored
• Template variables and directives allow data to be displayed in the UI
• Templates can be stored within the component source code or in
external files
• Styles can be applied at the component level
• Keyboard events can be easily captured
• The next step is to divide the application in multiple components, and
facilitate communication between those parts