Angular IO Overview The presenter introduces foundational Angular IO concepts like components, TypeScript, and the Angular CLI tool. Angular IO is a component-based framework for building single page applications. It uses TypeScript for strong typing. Components couple custom HTML elements to functionality. The Angular CLI helps generate and build Angular applications.

1. Angular IO Overview
Jennifer Jirka
Web Application Development SIG
Software Engineering TC

2. Jennifer Jirka
• Senior Consultant, with Avanade for 4.5 years
• Web Application Development SIG Lead
• 6 years of experience with JavaScript web
development
• 3 years of experience with Angular JS
• Project experience with Angular IO
• I love writing and speaking about Angular
• Personal career goals focus on teaching and
mentoring
• 6 month old junior analyst developer at home

3. Agenda
• Foundational Concepts
• TypeScript
• Components
• Putting It All Together
• Angular CLI

4. Foundational Concepts

5. What is Angular IO?
• Angular IO is a framework for object oriented web development of
single page web applications.
• It is not an MVC framework, but rather a component-based
framework.
• An Angular IO application is a tree of loosely coupled components.
• Components are custom HTML elements, which couple structure
with functionality.
• Using custom HTML elements, developers can create a web app
declaratively.

6. Review: Single Page Applications
Web 1.0
Web 2.0
SPA
AJAX
Single Page Applications render HTML to the browser once and subsequent communication is AJAX.
Server sends
static pages.

7. Fond memories: Angular JS
• Angular JS is a JavaScript framework which allows the user to create custom
HTML elements which couple structure and function.
• Angular JS databinding is built on JavaScript variable scope, and can get
confusing.
• The bootstrap process in Angular JS is based on the ng-app framework HTML
directive.
• Angular JS architecture uses directives and controllers.

8. New Platform: Angular IO
• Angular IO is a TypeScript-based web development platform.
• Angular IO is a complete rewrite of Angular JS.
• Angular IO uses a hierarchy of components for databinding and scope, which is
significantly simplified from Angular JS.
• Angular IO supports named dependency injection.
• Angular IO is compatible with RxJS reactive programming.
• Convention: “Angular” == Angular 2.x, Angular IO
“Angular JS” == Angular 1.x

9. Angular IO is based on Components
• Apps built with Angular IO are defined by a tree of components
• The base of the tree is a root component
• Entire DOM cascades from the root component

10. TypeScript

11. TypeScript is a Superset of JavaScript
• TypeScript is a strongly typed superset of JavaScript.
• .TS files get compiled to .JS files using a TypeScript compiler.
• The Angular CLI compiles TypeScript in an Angular app (more on this
later)
You can install a simple TypeScript compiler with NPM:
npm install –g typescript

12. Why switch to TypeScript?
(Skipping TypeScript fundamentals for this talk)
• JavaScript built from TypeScript is significantly faster, at the expense of human
readability.
• TypeScript strong inline types and decorators add the most run-time efficiency.
• The authors of Angular JS used a JavaScript optimizer called the Closure Compiler
which builds down JavaScript into similar output.
• The Closure Compiler influenced the decision to move Angular IO to TypeScript
You can download the Closure Compiler if you are curious here:
https://github.com/google/closure-compiler-js

13. TypeScript Decorators
• A Decorator can be attached to a class declaration, method, accessor, property, or
parameter.
• Decorators use the form @expression, where expression must evaluate to a
function that will be called at runtime
Example: the @Inject decorator.
Inject is defined in the Angular framework and is used to inject named
dependencies
export class HeroComponent {
constructor(@Inject('heroName') private name: string) { }
}

14. Components

15. Remember, Angular IO is based on Components
• Apps built with Angular IO are defined by a tree of components
• The base of the tree is a root component
• Entire DOM cascades from the root component

16. Components couple structure and function
• A component is a TypeScript object class which uses the
@Component decorator to tell Angular that it defines a component.
• Use the @Component metadata to add properties including the
HTML template where the structure is defined.
• Add members to the object class to define functionality.
• Call member functions on events defined in HTML template
• Use object class constructor and member functions to work with data
/* You need to add new component to modules using @NgModule
(more on this later) */

17. Example Component
import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: 'hero-detail',
template: `
<div *ngIf="hero">
<h2>{{hero.name}} details!</h2>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
</div>
</div>`
})
export class HeroDetailComponent {
@Input() hero: Hero;
}
Import statements make other exported
and platform classes available
Use @Component decorator to add metadata.
The selector attribute specifies the custom HTML tag which
declares your component
Match the component class name in UpperCamelCase to the
class name in lower-dash-case
The template can show inline HTML
or point to a file
Use @Input decorator to bind local variables to
data models.
Export your class so other modules cam import it.

18. Code Modules and AppModule
• Modules organize code into functional units.
• Modules are loosely analogous to namespaces in C style languages.
• Organize all modules in a tree structure, with the root module called
AppModule at the root.
• By convention, define AppModule in app.module.ts.
• AppModule should contain a reference to your base component, called
AppComponent by convention.

19. Root AppModule Example
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Import AppComponent,
where base component is
defined.
Use NgModule decorator to
declare modules

20. Very Basic Angular App
src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from
'@angular/platform-browser';
import { AppComponent } from
'./app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
src/app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>{{title}}</h1>',
})
export class AppComponent {
title = 'Minimal NgModule';
}

21. Putting it All Together Into a Web App

22. Simple JiT Bootstrapping
• An application is launched by bootstrapping its root module (AppModule)
• The main entry point of the application is main.ts, which contains a statement like below.
Angular loads this first.
import { AppModule } from './app/app.module';
• Index.html should contain an app HTML element. <app></app>
• Launch your application by adding a bootstrap statement to main.ts:
platformBrowserDynamic().bootstrapModule(AppModule);
• The Angular framework renders AppComponent on the app HTML element and the component
tree will cascade from here.

23. Bootstrap Process: Putting it all Together
0. Angular uses a bootstrap statement defined in main.ts to launch the application
as discussed above.
1. On document.ready, the Angular framework looks for a root module defined in
your main.ts file using a statement like this:
import { AppModule } from './app/app.module';
2. The framework also looks for a root component defined in your app.module.ts
file. You will find a statement like this:
export class AppModule { }
3. Your AppModule class should contain an import statement pointing to your base
app component like this:
import { AppComponent } from './app.component';
4. When the AppComponent is loaded, it is applied to the <app> HTML element in
index.html.

24. Anatomy of an
Angular App

25. Angular CLI

26. Angular Command Line Interface Tool
The Angular CLI is a Command Line Interface (CLI) to automate your
development workflow.
The Angular CLI allows you to:
• Create a new Angular application
• Run a development server with LiveReload support to preview your
application during development
• Add features to your existing Angular application
• Run your application’s unit tests
• Run your application’s end-to-end (E2E) tests
• Build your application for deployment to production

27. Angular CLI makes Angular easier
The Angular CLI streamlines the workflow for creating and building your app.
You can use the CLI to set up the basic structure files which we discussed
above.
The CLI can even set up a basic WebPack server for you so you can serve
your new app right away.
Once you have Node.js installed, you can install the Angular CLI to get up and
running quickly with Angular here:
https://github.com/angular/angular-cli

28. Get Started with a basic Angular App
1. Open a command prompt. Use your favorite way to install Node.js
globally.
2. Install the Angular CLI using npm install -g angular-cli
3. Find a working directory and switch to it. Think of a catchy name
for your new project.
4. Run ng new catchyNameHere
5. Run ng build
6. Run ng serve

29. Useful Links

30. Selected Sources
1. https://angular.io/guide/architecture
2. http://www.eclipse.org/community/eclipse_newsletter/2017/january/article1.php
3. https://github.com/angular/angular-cli
4. https://angular.io/guide/ts-to-js
5. https://medium.com/dev-channel/closure-compiler-for-js-fun-and-profit-
3b6c99f4fd31
6. https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
7. https://toddmotto.com/creating-your-first-angular-2-component
8. https://scotch.io/tutorials/creating-your-first-angular-2-components
9. https://toddmotto.com/bootstrap-angular-2-hello-world
10. https://angular.io/guide/webpack
11. https://angular.io/guide/ajs-quick-reference