Introduction to angular 2

Introduction to
Angular 2
FE Guild #3
Dor Moshe

AngularJS history
• AngularJS was originally developed in 2009 by Misko Hevery and Adam Abrons at Brat Tech.
• Misko Hevery started to work for Google in 2009.
• First version of AngularJS: 1 developer, 3 weeks, 1000 lines.
• AngularJS version 1.0 was released in 2012 by Google.
• Angular version 2 was released in September 2016 after 2 years development.
FE Guild – Introduction to Angular 2

https://www.youtube.com/watch?v=aZm3OcApTN4

WELCOME TO THE FUTURE

Angular 2
• Angular 2 is a framework for building client applications (SPA) in HTML and
either JavaScript or languages like TypeScript or Dart that compile to JavaScript.
• Angular 2 is not a version upgrade, but a complete rewrite.
• Angular 2 is written in TypeScript.
• Angular 1.X will not end life until the majority of traffic has moved to 2.0
• Current versions are 2.3.0 and 1.6.0

Why Angular 2?
• Components & components interaction
• Modularity - much core functionality has moved to modules, producing a lighter, faster core.
• AOT compilation.
• Simple routing.
• Incredible performances.
Mobile
Development
Typescript
Improved DI
HDI
Lazy Loading
Support
Modern
browsers only
RIP PartsDocumentation
Reactive
Programming

Typescript
• Developed and maintained by Microsoft.
• Superset of JavaScript that compiles to clean JavaScript output.
• Adds optional types, classes, and modules to JavaScript.
• Compiles to readable, standards-based JavaScript.

Why Typescript?
• Type safety.
• Compile time error check.
• Annotations offer a powerful and very expressive way to describe elements.
• Ease of refactoring.
• IntelliSense auto suggest in code editors.
• Easy to adopt for backend developers (like java & C#).
• Angular2 Dependency Injection system is based on type reflection.

Example
JavascriptTypescript

• Ng2 ships as a collection of JavaScript modules.
• Each ng2 library name begins with the @angular prefix.
• You install them with the node package manager and import parts of them with js import statements.
• The architecture diagram identifies the eight main building blocks of an ng2 application:
• Modules
• Components
• Templates
• Metadata
Architecture
• Data binding
• Directives
• Services
• Dependency injection

Architecture - Flow
• Write Angular applications by composing HTML templates with Angularized markup.
• Write component classes to manage those templates.
• Adding application logic in services.
• Boxing components and services in modules.
• Launch the app by bootstrapping the root module.
• Angular takes over, presenting your application content in a browser.
• Angular responding to user interactions according to the instructions you've provided.

THINKING COMPONENTS

Modern web is all about components
• Thinking of components instead of views improves decoupling and separation of
concerns.
• Components are composable and highly reusable.
• Easier to test.
• UX and UI teams integrate better.

A component is
• Controls a patch of screen called a view.
• Exported as a custom HTML tag, e.g. <item></item>
• Defined by an HTML template.
• Enhanced using the @component decorator.
• Controlled using its inputs and outputs.
• Initialized by Angular Dependency Injection engine.

TEMPLATE syntax
• Template tags: {{ expression }}. Execute arbitrary
expressions like {{ x+1 }}.
• Property binding: [key]=‘value’. Used to pass data to a
component.
• Event binding: (event)=‘expression’. Expression executed
anytime the registered event fires.
• 2-way binding: <input [(ngModel)]=‘u.name’> Requires
to import ‘FormsModule’ to be used.

Data flows down,
into components
Events flows up,
out of components

Example

Component style – View encapsulation
• Emulated (default) - Styles from main HTML propagate to the component. Styles
defined in this component's @Component decorator are scoped to this component
only.
• Native (shadow DOM) - Styles from main HTML do not propagate to the
component. Styles defined in this component's @Component decorator are
scoped to this component only.
• None - Styles from the component propagate back to the main HTML and
therefore are visible to all components on the page.

Example
// CSS - output (inside <head>)
// HTML - output (inside <head>)// Typescript

Introduction to
Angular 2
FE Guild #4
Dor Moshe
Part 2

Mobile
Development
Typescript
Improved DI
HDI
Lazy Loading
Support
Modern
browsers only
Documentation
Reactive
Programming
ModularityComponents AOT
Simple
Routing
Performance

Directive
• A directive is a class with a directive metadata.
• There are three kind of directives:
1. Component: A component is a directive-with-a-template. A @Component
decorator is actually a @Directive decorator extended with template-oriented
features.
2. Structural directive: Alter layout by adding, removing, and replacing elements
in DOM. E.g *ngIf, *ngFor, *ngSwitch.
3. Attribute directive: Alter the appearance or behavior of an existing element.
E.g *ngStyle, *ngClass.

Lifecycle Hooks

Components & Directives shared Lifecycle Hooks
ngOnChanges Input property value changes
ngOnInit Initialization step
ngDoCheck Every change detection cycle
ngOnDestroy Before destruction

Service
• A service is the mechanism used to share functionalities over components.
• A services are injected using Dependency Injection mechanism.
• For example:
• Logging service
• Data service
• Message bus
• Tax calculator
• Application configuration

Pipe
• Pipes transform displayed values within a template.
• The pipe operator passes the result of an expression on the left to a pipe
function on the right.
• Many of the pipes provided by ng2 will be familiar if you've worked with
filters in ng1.x.
• Built-in pipes: DatePipe, JsonPipe, UpperCasePipe, LowerCasePipe, DecimalPipe,
SlicePipe, CurrencyPipe, AsyncPipe, I18nPluralPipe, PercentPipe.

Custom Pipe - Example

Dependency Injection
• A way to supply a new instance of a class with the fully-formed dependencies it
requires.
• Most dependencies are services.
• Angular uses dependency injection to provide
new components with the services they need.
• There is actually a tree of injectors that parallel an application's component tree.
• Ng2 has a Hierarchical Dependency Injection system.

Hierarchical DI - Example

Angular Module
• Help organize an application into cohesive blocks of functionality
• Takes a metadata object that identifies the module's own components, directives
and pipes.
• Making some of them public so external components can use them.
• May add service providers to the application dependency injectors.
• Every Angular app has a root module.
• Many Angular libraries are module e.g. FormsModule, HttpModule, RouterModule
• Many third party libraries are available as Angular modules e.g. Angular Material 2,
Ionic, ng2-bootstrap.

Angular Module
• An Angular module is a class decorated with @NgModule metadata.
• The metadata:
• Declare which components, directives and pipes belong to the module.
• Make some of those classes public so that other component templates can use
them.
• Import other modules with the components, directives and pipes needed by the
components in this module.
• Provide services at the application level that any application component can use.

Bootstrapping
• Bootstrapping is an essential process in Angular - it is
where the application is loaded when Angular comes to
life.
• Bootstrapping ng2 applications is technically
different from ng1.x, but is still a straightforward
procedure.
Main.ts
app.modules.ts

Key People
Todd MottoMinko Gechev John Papa Misko Hevery Pascal Precht
Shai ReznikNir Kaufman Shmuela Jacobs

Rendering Architecture
• Separation of application logic from the graphical aspects of the application.
• One key aspect of the ng2 design is that the elements of the application do not
directly depend or access the elements of the render code, and vice versa.
• They can only communicate via a renderer transport. This leads to the following
properties:
• Application and render code can be supplied via separate files (compilation units).
• Application code can run in a separate process from the process where the
renderer code runs (e.g. web worker, server).

NgUpgrade
• Ng2 comes with built-in tools for migrating ng1 projects over to the ng2 platform.
• You can do it incrementally, by running the two frameworks side by side in the same application,
and porting ng1 components (and services) to ng2 one by one.
• Both of these are the actual, fully featured versions of the frameworks.
• The UpgradeModule in ng2 has been designed to make incremental upgrading seamless.
• The UpgradeAdapter is a service that can bootstrap and manage hybrid applications that support
both ng2 and ng1 code.

That’s what many dev do
and it works

Observables (RxJs)
“Observables open up a continuous channel of
communication in which multiple values of data
can be emitted over time […] Angular 2 uses
observables extensively - you'll see them in the
HTTP service and the event system…“

Semantic Versioning
• Ng2 has moved to time-based release cycles so that we can plan ahead.
• Ng2 have a deprecation policy so that you know how to get notified of API
changes ahead of time.
• SemVer means that the version numbers are meaningful
• x.x.y - Patch version - backwards-compatible bug fixes.
• x.y.x - Minor version - adding functionality in a backwards-compatible manner.
• y.x.x - Major version - incompatible API changes.

NG-BE
09.12.16

Next version - Angular 4 - March 2017
• Angular 3 will be skipped.
• No breaking changes for stable APIs.
• Typescript 2.1 (Breaking changes with Typescript 1.8).
• Better ng2 compiler errors.
• Faster.
• Smaller.
• @angular/router v4.0.0

Component Inheritance (2.3.0)
• Metadata (decorators): metadata (e.g. @Input, @Output) defined in a derived class will override any
previous metadata in the inheritance chain otherwise the base class metadata will be used.
• Constructor: base class constructor will be used if the derived class doesn’t have one.
• Lifecycle hooks: parent lifecycle hooks (e.g. ngOnInit, ngOnChanges) will be called even when are not
defined in the derived class.
• Component inheritance do not cover templates and styles. Any shared DOM or behaviors must be
handled separately.

Example: Pagination
Plunker

Language Service Module (2.4.0)
• Provide support for Angular templates.
• API that the IDE can call to ask “what smart thing can I suggest at this position in this file?”
• By using it, IDEs will be able to provide more detailed errors and type completion.
• There is already a VS Code plugin.

Additional features
• Change Detection (Zone.js) - How Angular decides that a component property value has
changed, when to update the screen, and how it uses zones to intercept asynchronous
activity and run its change detection strategies.
• Animations - Animate component behavior without deep knowledge of animation
techniques or CSS with Angular's animation library.
• Testing - Ng2 was designed with testability in mind as its predecessor.

Additional Tools
• Angular-cli - Command line interface to scaffold and build ng2 apps. Help us to
create apps, run builds, do E2E tests, run and deploy ng2 application.
• Angular-material 2, ng2-bootstrap - UI component library for ng2 developers. Helps
in constructing attractive, consistent, responsive and functional web pages and web apps.
• Augury - chrome developer tool for debugging and profiling ng2 apps.

Angular Universal
• Server-side rendering of ng2 applications.
• Why?
• Better Performance.
• Optimized for Search Engines – SEO
• The search engine needs to "guess" when the page is complete.
• SPA deep links are hard to get indexed.
• Site preview.

Angular Universal – The Web App Gap

References
• ng2-ninja
• Tour of Heroes
• API Reference & Cookbook
• Angular Formal Blog
• Thoughtram Blog
• Todd Motto Blog
• Cheat Sheet
• Changelog
• Milestones
• Weekly Meeting Notes

Angular 2 in production

The JS Framework battle

Introduction to angular 2

More Related Content

What's hot (20)

Similar to Introduction to angular 2 (20)

Recently uploaded (20)

Introduction to angular 2

Editor's Notes