Introduction to Angular 2 FE Guild 3 Dor

Introduction to Angular 2 FE Guild #3 Dor Moshe

Angular. JS history • Angular. JS 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 Angular. JS: 1 developer, 3 weeks, 1000 lines. • Angular. JS 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

WELCOME TO THE FUTURE FE Guild – Introduction to Angular 2

Angular 2 • Angular 2 is a framework for building client applications (SPA) in HTML and either Java. Script or languages like Type. Script or Dart that compile to Java. Script. • Angular 2 is not a version upgrade, but a complete rewrite. • Angular 2 is written in Type. Script. • 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 FE Guild – Introduction to Angular 2

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. Typescript Mobile Development Modern browsers only Reactive Programming Documentation Lazy Loading Support Improved DI HDI RIP Parts FE Guild – Introduction to Angular 2

FE Guild – Introduction to Angular 2

Typescript • Developed and maintained by Microsoft. • Superset of Java. Script that compiles to clean Java. Script output. • Adds optional types, classes, and modules to Java. Script. • Compiles to readable, standards-based Java. Script. FE Guild – Introduction to Angular 2

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

Example Typescript FE Guild – Introduction to Angular 2 Javascript

Architecture • Ng 2 ships as a collection of Java. Script modules. • Each ng 2 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 ng 2 application: • Modules • Data binding • Components • Directives • Templates • Services • Metadata • Dependency injection FE Guild – Introduction to Angular 2

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. FE Guild – Introduction to Angular 2

THINKING COMPONENTS FE Guild – Introduction to Angular 2

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. FE Guild – Introduction to Angular 2

FE Guild – Introduction to Angular 2

FE Guild – Introduction to Angular 2

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. FE Guild – Introduction to Angular 2

FE Guild – Introduction to Angular 2

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 [(ng. Model)]=‘u. name’> Requires to import ‘Forms. Module’ to be used. FE Guild – Introduction to Angular 2

Data flows down, into components FE Guild – Introduction to Angular 2 Events flows up, out of components

Example FE Guild – Introduction to Angular 2

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. FE Guild – Introduction to Angular 2

Example // Typescript // HTML - output (inside <head>) // CSS - output (inside <head>) FE Guild – Introduction to Angular 2

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

Components Performance Modularity AOT Typescript Modern browsers only Mobile Development Improved DI HDI Documentation FE Guild – Introduction to Angular 2 Reactive Programming Lazy Loading Support Simple Routing

FE Guild – Introduction to Angular 2

FE Guild – Introduction to Angular 2

FE Guild – Introduction to Angular 2

FE Guild – Introduction to Angular 2

Example FE Guild – Introduction to Angular 2

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 *ng. If, *ng. For, *ng. Switch. 3. Attribute directive: Alter the appearance or behavior of an existing element. E. g *ng. Style, *ng. Class. FE Guild – Introduction to Angular 2

Lifecycle Hooks FE Guild – Introduction to Angular 2

Components & Directives shared Lifecycle Hooks ng. On. Changes Input property value changes ng. On. Initialization step ng. Do. Check Every change detection cycle ng. On. Destroy Before destruction FE Guild – Introduction to Angular 2

Example FE Guild – Introduction to Angular 2

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 FE Guild – Introduction to Angular 2

Example FE Guild – Introduction to Angular 2

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 ng 2 will be familiar if you've worked with filters in ng 1. x. • Built-in pipes: Date. Pipe, Json. Pipe, Upper. Case. Pipe, Lower. Case. Pipe, Decimal. Pipe, Slice. Pipe, Currency. Pipe, Async. Pipe, I 18 n. Plural. Pipe, Percent. Pipe. FE Guild – Introduction to Angular 2

Custom Pipe - Example FE Guild – Introduction to Angular 2

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. • Ng 2 has a Hierarchical Dependency Injection system. FE Guild – Introduction to Angular 2

Hierarchical DI - Example FE Guild – Introduction to Angular 2

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. Forms. Module, Http. Module, Router. Module • Many third party libraries are available as Angular modules e. g. Angular Material 2, Ionic, ng 2 -bootstrap. FE Guild – Introduction to Angular 2

Angular Module • An Angular module is a class decorated with @Ng. Module 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. FE Guild – Introduction to Angular 2

FE Guild – Introduction to Angular 2

FE Guild – Introduction to Angular 2

FE Guild – Introduction to Angular 2

Example FE Guild – Introduction to Angular 2

Bootstrapping • Bootstrapping is an essential process in Angular - it is where the application is loaded when Angular comes to life. app. modules. ts • Bootstrapping ng 2 applications is technically different from ng 1. x, but is still a straightforward procedure. Main. ts FE Guild – Introduction to Angular 2

Key People Minko Gechev FE Guild – Introduction to Angular 2 Todd Motto John Papa Misko Hevery Nir Kaufman Shai Reznik Shmuela Jacobs Pascal Precht

Rendering Architecture • Separation of application logic from the graphical aspects of the application. • One key aspect of the ng 2 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). FE Guild – Introduction to Angular 2

FE Guild – Introduction to Angular 2

Ng. Upgrade • Ng 2 comes with built-in tools for migrating ng 1 projects over to the ng 2 platform. • You can do it incrementally, by running the two frameworks side by side in the same application, and porting ng 1 components (and services) to ng 2 one by one. • Both of these are the actual, fully featured versions of the frameworks. • The Upgrade. Module in ng 2 has been designed to make incremental upgrading seamless. • The Upgrade. Adapter is a service that can bootstrap and manage hybrid applications that support both ng 2 and ng 1 code. FE Guild – Introduction to Angular 2

That’s what we do in TMLA and it works FE Guild – Introduction to Angular 2

Observables (Rx. Js) “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…“ FE Guild – Introduction to Angular 2

Example FE Guild – Introduction to Angular 2

Semantic Versioning • Ng 2 has moved to time-based release cycles so that we can plan ahead. • Ng 2 have a deprecation policy so that you know how to get notified of API changes ahead of time. • Sem. Ver 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. FE Guild – Introduction to Angular 2

FE Guild – Introduction to Angular 2

FE Guild – Introduction to Angular 2

NG-BE 09. 12. 16 FE Guild – Introduction to Angular 2

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 ng 2 compiler errors. • Faster. • Smaller. • @angular/router v 4. 0. 0 FE Guild – Introduction to Angular 2

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. ng. On. Init, ng. On. Changes) 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. FE Guild – Introduction to Angular 2

Example: Pagination Plunker FE Guild – Introduction to Angular 2

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. FE Guild – Introduction to Angular 2

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 - Ng 2 was designed with testability in mind as its predecessor. FE Guild – Introduction to Angular 2

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

Angular Universal • Server-side rendering of ng 2 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. FE Guild – Introduction to Angular 2

Angular Universal – The Web App Gap FE Guild – Introduction to Angular 2

Angular Universal – The Web App Gap FE Guild – Introduction to Angular 2

FE Guild – Introduction to Angular 2

FE Guild – Introduction to Angular 2

References • • • ng 2 -ninja Tour of Heroes API Reference & Cookbook Angular Formal Blog Thoughtram Blog Todd Motto Blog Cheat Sheet Changelog Milestones Weekly Meeting Notes FE Guild – Introduction to Angular 2

Angular 2 in production A L TM FE Guild – Introduction to Angular 2

The JS Framework battle FE Guild – Introduction to Angular 2