Introduction to Angular - What's Angular - Why Angular - TypeScript - Building Blocks of Angular - Clarity Design System - VMware's Open Sourced - Angular Setup on local - Build an Angular application

1. Angular
Nitin Bhojwani nbhojwani@vmware.com
Saket Singh sakets@vmware.com
Nikhil Gupta guptanikhil@vmware.com

2. Angular
• Angular helps you build modern applications for the web, mobile, or
desktop.
• Reusability
• Components( a small patch of screen) are reusable – build once use
everywhere.
• Develop Across all platforms – Desktop, Mobile and others
• Speed and Performance
• Build features quickly with simple, declarative templates
• https://angular.io/guide/architecture

3. Why Angular?
Single Page Application
• SPA is fast as most of the resources(HTML, CSS, JS) are only loaded
once throughout the lifespan of application.
• Data is loaded independently using REST apis
• Routing is handled in UI
• Simplified and streamlined
• More Control in UI – Less server involvement

4. Why Angular?
Accelerated DOM update - Virtual
DOM
• Collection of modules designed
to provide a declarative way
of representing the DOM
• Optimize DOM updating process
and accelerate it.
• https://www.w3schools.com/js/js_
htmldom.asp

5. Typescript
• .ts file extension
• Javascript is Dynamically typed language
• Problematic in bigger projects
• TS provides static typing helps in development and preventing usual
bugs
• Superset of Javascript
• Even Javascript code works on Typescript.
• Object Oriented Programming

6. Angular Building Blocks
Modules / NgModule
• Angular apps are modular
• Angular has its own modularity system called NgModules.
• NgModules can contain components, service providers, and other
code files.
• It can import functionality that is exported from other NgModules,
and export selected functionality for use by other NgModules.
• https://angular.io/guide/architecture-modules

7. Angular Building Blocks
Component
• A component controls a patch of screen called a view.
• Presentation Logic goes here, can invoke based on user actions
• Define:
@Component({
selector: 'app-hero-list’,
templateUrl: './hero-list.component.html’,
providers: [ HeroService ] })
• Use:
<app-hero-list></app-hero-list>
• https://angular.io/guide/architecture-components

8. Angular Building Blocks
Service
• Includes any value, function, or feature that an app needs.
• A service is typically a class with a narrow, well-defined purpose.
• Should do something specific and do it well.
• Backend for view(Component)
• Handles functionality

9. Clarity Design System
• Open sourced by VMware
• UX guidelines,
HTML/CSS framework, and
Angular components
• Don’t work on View from scratch
• Reuse components provided by Clarity
• https://clarity.design/

10. Setting Up

11. Node.js
• runtime environment.
• Allows JS to run on your machine as a standalone application.
• Restricted to browsers previously (chrome runtime).
• Node.js – runtime for JS
• Download from: https://nodejs.org/en/
• npm (Node Package Manager) is included
Node.js came into existence when the original developers of JavaScript extended it from something you could
only run in the browser to something you could run on your machine as a standalone application.

12. Angular CLI
• used to initialize, develop, scaffold, and
maintain Angular applications.
• npm install -g @angular/cli
• ng help
• To create and serve:
• ng new wwc-weather
• cd wwc-weather
• ng update @angular/cli @angular/core
• ng serve (Defaults to port 4200)

13. File Structure
• Details at:
https://angular.io/guide/file-
structure

14. Binding
• Synchronization of data between the model and view components.
• One Way –
• Property Binding: [], {{}} => data source to view target
• <p> {{textValue}} </p> (Interpolation)
• <img [src]="imageUrl">
• Event Binding: () => view target to data source
• <button (click)="onClickMe()">Click me!</button>
• Two Way –
• Combination of the two: [()] => event and property
• <input type="text" [(ngModel)]="textValue">
import { FormsModule } from '@angular/forms’; Then include in imports

15. Modules for Demo
• ng add @clr/angular
• npm i ngx-skycons --save

16. Hands-On