Angular Architecture & Basic Domain Knowledge (By: Babar Shahzad) - Google I/O Extended Lahore 2023

Talk by Babar Shahzad (https://www.linkedin.com/in/babar-shahzad-23998b2a/) at Google I/O Extended Lahore 2023 by GDG Lahore.

Transcript

1. Babar Shahzad Lead Angular Developer at Innowi.Inc
2. Angular is a popular open-source web application framework primarily used to build dynamic single-page applications (SPAs). It's developed and maintained by Google and allows developers to create single-page applications (SPAs) using TypeScript,HTML, and CSS.SCSS, SASS etc. Introduction to Angular
3. Angular 16 is released in January 2023 Angular 15 is released in November 2022 Angular 14 is released in June 2022 Angular 12 is released in May & Angular 13 is released in Nov 2021 Angular 10.0 was released in June & Angular 11.0 was released in Nov 2020 Angular 9.0 was released in Feb 2020 Angular 8.0 was released in May 2019 Angular 6.0 in May Angular 7.0 was released in Oct 2018 Angular 4.0 in March & Angular 5.0 was released in Nov 2017 Angular version 2.0 was released in September 2016 Angular version 1.0 (AngularJS) was released in 2012 by Google Angular History
4. Observable Dependency injection Services Routing Pipes Directives Data binding Metadata Templates Components Modules Angular Building Blocks
5. Angular v16 is the next major release of the Angular framework, and it’s scheduled to be released in May 2023. I’m excited about this release, which includes several new features and improvements I’ve been looking forward to: • Required Component Inputs • Bind Router information to component inputs • Angular Signals developer preview • Standalone component • Images Optimization reduce to load time in the view What is new angular v16.0
6. Before diving into the Angular framework, it's helpful to have a solid understanding of a few foundational technologies and concepts. Here are some prerequisites that can make learning Angular smoother and more effective. • HTML, CSS, and JavaScript • TypeScript • Angular CLI • Web Development Basics • Version Control (e.g., Git) • Node.js and npm • HTTP and APIs • Dependency Injection Requirements for Angular
7. Angular CLI Options Options Usage Help ng --help Build ng build --env Build and Run ng serve Testing ng test End-End Testing ng e2e • Displays help information about CLI commands and options. • Displays help information about CLI commands and options. • Compiles and serves the application locally for development. • Runs unit tests using testing frameworks like Jasmine and Karma. • Runs end-to-end (e2e) tests using tools like Protractor
8. Scaffold Usage In Short Module ng generate module my-module ng g m my-module Component ng generate component my-component ng g c my-component Directive ng generate directive my-directive ng g d my-directive Pipe ng generate pipe my-pipe ng g p my-pipe Service ng generate service my-service ng g s my-service Guard ng generate guard my-guard ng g g my-guard Class ng generate class ng g cl my-class Angular CLI Commands
9. Creating a mobile app using Angular can be a great choice, especially if you want to leverage your existing Angular skills for web development. Angular is a popular JavaScript framework for building dynamic and responsive web applications. When it comes to mobile apps, Angular can be used in combination with tools like Ionic to create cross-platform mobile applications. Here's a high-level overview of the process • Setup • Choose a Mobile Framework • Development • Styling and Theming • Adding Functionality • Native Features • Testing • Building • Deployment Mobile apps with Angular
10. Data binding is a concept commonly used in software development to establish a connection between user interface elements and underlying data models. It allows changes in one to automatically update the other. There are two main types of data binding • One-Way Data Binding • Two-Way Data Binding: Data Binding in Angular
11. One-way data binding involves binding data from the source (usually the data model) to the target (usually a UI element). In this approach, changes in the source will automatically update the target, but changes in the target won't affect the source. One-way data binding is often used when you want to display data to the user, but you don't expect the user's actions to directly modify the data. It simplifies the process of displaying information without having to manually update the UI elements each time the data changes. One-Way Data Binding
12. Two-way data binding extends the concept of one-way binding.In addition to updating the target when the source changes, two-way binding also updates the source when the target changes. This means that changes made by the user in the UI will also update the underlying data model. Two-Way Data Binding:
13. Angular pipes are a feature in the Angular framework that allows you to transform data before displaying it in a template. They are a way to format and manipulate values directly in the template, making it easier to present data in a user-friendly manner. Angular provides several built-in pipes for common tasks like formatting dates, numbers, and strings, as well as filtering and sorting arrays. Some commonly used built-in pipes include: • DatePipe: Formats dates. • DecimalPipe: Formats numbers as decimals. • CurrencyPipe: Formats numbers as currency. • UpperCasePipe: Converts text to uppercase. • LowerCasePipe: Converts text to lowercase. • PercentPipe: Formats numbers as percentages. • AsyncPipe: Unwraps a promise or observable and • updates the view when the data changes. Angular Pipes
14. Creating custom pipes in Angular involves a few steps. Let's walk through the process of creating a custom pipe step by step • Create a New Pipe: • Implement the Pipe Logic • Register the Pipe • Use the Custom Pipe Custom pipes can be powerful tools for transforming and formatting data directly in templates, but be mindful of performance considerations when using multiple pipes, especially in situations with frequent change detection. How to create custom Pipes
15. Angular directives are a core part of the Angular framework, which is a popular platform for building web applications. Directives are used to extend the functionality of HTML elements and provide a way to create reusable components, manipulate the DOM (Document Object Model), and add custom behaviors to your application. There are three types of directives in Angular: • Component Directives: @Component • Attribute Directives: ngStyle & ngClass. • Structural Directives: ngIf, ngFor & ngSwitch Angular Directives
16. Decorator s • A function that adds metadata to a class, class members • These are prefix with @ symbol • Angular has built-In decorators like - @Component, @NgModule, @Directive, @Pipe etc. Class / Fields Decorator MetaData Decorate
17. Types of Decorators 1. Class decorators ▪ @NgModule – Used for defining a module ▪ @Component – Used for defining a component ▪ @Directive – Used for defining a directive ▪ @Injectable – Used for injecting dependencies ▪ @Pipe – Used for defining a pipe 2. Class field decorators ▪ @Input – Used for receiving data (input) from parent to child component ▪ @Output – Used for passing data (events) from child to parent component
18. Angular Initialization Process During initialization, Angular bootstraps the main module, compiles components, resolves dependencies, and creates a component tree, resulting in a functional web application ready for interaction
19. Angular Architecture Angular is an architecture with component-based and module-based approach. It uses services for shared functionality, dependency injection for loose coupling, templates for data binding, and routing for single-page navigation.
20. Modules An Angular module is a logical grouping that encapsulates related components, services, directives, and other building blocks …
21. Angular provides a set of lifecycle hooks that allow you to tap into different stages of a component's lifecycle. These hooks enable you to execute custom code at specific points. The main lifecycle hooks in Angular are: • ngOnChanges() • ngOnInit() • ngDoCheck() : Detect changes where ngOnChanges() wont catch them • ngAfterContentInit() • ngAfterContentChecked() • ngAfterViewInit() • ngAfterViewChecked() • ngOnDestroy Angular LIFECYCLE HOOKS
22. Angular LIFECYCLE HOOKS
23. Angular Components Page View In Angular, components are the building blocks of page views. Each component consists of a template (defining the UI), a class (containing the logic), and styles. Components encapsulate specific functionalities and can be organized into modules for modularity. They define the visual and interactive elements of a page, enabling the creation of dynamic and interactive web applications. <app-header></app-header> <router-outlet></router-outlet> <app-footer></app-footer>
24. Component Example import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-menu', templateUrl: `<h3>Interpolation</h3> <p>Name: {{name}}</p> <p><input type="text" value="{{name}}"</p>`, styles: [] }) export class MenuComponent implements OnInit { public name: string = 'Babar Shahzad'; constructor() { } ngOnInit(): void { } }
25. Templat e • Define the view of a component • Contains Html markup and angular directives, attributes etc. • Describe how a component is rendered on the page
26. Metadata • Tells Angular how to process a class • Decorators are used to attach metadata to a class @Component({ selector: 'app-menu', template:<p>Name: {{name}}</p> <p><input type="text" value="{{name}}"</p>`, styles: [] }) export class MenuComponent implements OnInit { public name: string = 'Babar Shahzad'; constructor() { } } Component Decorators Directive / Selector Name used in HTML User views Data Binding
27. Angular Forms • HTML forms are an essential part of a web application • Angular provides two ways to create form – Template driven forms & Reactive forms Forms Reactive T emplate Driven
28. Angular Form Building Blocks Building Blocks Validation s FormArray FormControl FormGroup
29. Angular Form and Form Controls States
30. Angular services are reusable code modules that handle data management, business logic, and communication tasks in Angular applications. They enable components to share data, centralize logic, and promote code reusability through dependency injection. Angular Services
31. Angular Service Example @Injectable({ providedIn: 'root' }) export class HomeService { private tableNumber$: BehaviorSubject<string> = new BehaviorSubject<string>(null); constructor() {} get tableNumber(): Observable<string>{ return this.tableNumber$.asObservable(); } set setTableNumber(number: string) { this.tableNumber$.next(number); } }
32. Thank You