Single-Page Applications (SPA) using Angular. NISHAN WICKRAMARATHNA Associate Tech Lead Xeynergy LLC. 

We’ll be discussing… Angular Routing SPA 4 6 3 1 2 5 Components Middleware 2-way binding Facades 

What is a SPA? A Single Page Application (SPA) is a web application or website that operates within a single web page. In traditional web applications, navigating to different pages involves full page reloads, while SPAs dynamically update parts of the page as users interact with it, without requiring a full page reload. 

Single-Page Application Lifecycle 

Routing Routing in a Single Page Application (SPA) refers to the process of determining which components or views to display based on the URL (Uniform Resource Locator) or route requested by the user. Since SPAs operate within a single web page, routing allows different "pages" or views of the application to be presented to the user without actually navigating to different HTML documents or triggering full page reloads. 

Routing has 4 major components Client-side Routing Component Rendering URL Mapping History Management 

Routing has 4 major components… ● URL Mapping: In an SPA, certain URLs are associated with specific components or views within the application. For example, /home, /about, /products, etc., might correspond to different sections or pages of the SPA. ● Client-side Routing: When a user navigates to a specific URL within an SPA (e.g., by clicking a link or typing in the address bar), the routing system intercepts this request on the client- side, typically using JavaScript. ● Component Rendering: Based on the requested URL, the routing system determines which component or view should be rendered within the SPA's main container or viewport. This could involve showing or hiding different sections of the page, or dynamically loading content from the server. ● History Management: SPAs use the browser's History API (e.g., pushState and replaceState) to manage navigation history without triggering full page reloads. This allows users to use the browser's back and forward buttons to navigate within the SPA. 

Framework Integration: Many JavaScript frameworks and libraries for building SPAs, such as React Router, Vue Router, or Angular Router, provide tools and APIs to manage routing seamlessly. These libraries allow developers to define routes, nested routes, route parameters, and transitions between different views. Lazy Loading: SPAs can also use routing to implement lazy loading, where components are loaded asynchronously only when needed. This helps improve initial loading times and reduces the amount of data sent to the client on the first request. 

DEMONTRATION 

Components In the context of Single Page Applications (SPAs), components are self-contained, reusable building blocks that encapsulate a part of the user interface (UI) and its associated functionality. Each component typically represents a specific piece of the UI, such as a navigation bar, a form, a list of items, or a modal dialog. 

Components in SPAs follow the principles of component-based architecture, which promotes modularity, reusability, and maintainability of code. ● Modularity: Components are modular units that can be composed together to build complex UIs. They isolate different parts of the UI and their functionality, making it easier to understand, test, and maintain code. ● Reusability: Components are designed to be reusable across different parts of the application. Once defined, a component can be used multiple times in various contexts without needing to rewrite the code. ● Encapsulation: Components encapsulate both the structure (HTML), presentation (CSS), and behavior (JavaScript) of a specific UI element. This encapsulation helps prevent conflicts between different parts of the application and promotes better code organization. ● Composition: Components can be composed hierarchically, with smaller components nested within larger ones. This allows for the creation of complex UIs by combining simpler components together. 

HTML and layout Code supporting the view (data and logic) Extra data for angular, defined with decorators 

Data Binding Data binding in Angular is the synchronization of data between the model (application state) and the view (UI). It allows you to define a connection between the component's data and the HTML elements that display this data. There are several types of data binding in Angular 

There are several types of data binding in Angular ● Interpolation: Interpolation is a one-way data binding from the component to the view. It allows you to embed expressions within double curly braces ( {{ }} ) in HTML templates, and Angular replaces these expressions with the corresponding component data. ● Property Binding: Property binding is also a one-way data binding from the component to the view, but it binds an HTML attribute or property to a value in the component. It uses square brackets ( [ ] ). ● Event Binding: Event binding is a one-way data binding from the view to the component. It allows you to listen to events raised by HTML elements (e.g., click, input) and call methods defined in the component class in response to these events. It uses parentheses ( ( ) ). ● Two-way Binding: Two-way data binding provides a convenient way to bind the data in both directions, from the component to the view and from the view to the component. It uses the ngModel directive with banana-in-a-box syntax ( [(ngModel)] ). It's commonly used with form elements like input fields. 

No content

Middleware Middleware is a piece of software that sits between two or more applications or systems and facilitates communication or data processing between them. You can achieve similar functionality using Angular HTTP Interceptors for handling HTTP requests and responses. Interceptors allow you to intercept and modify HTTP requests and responses globally within your Angular application. 

Angular HTTP Interceptors allow you to intercept HTTP requests and responses globally within your Angular application. They provide a way to apply common functionality such as logging, authentication, error handling, or modifying requests/responses before they are sent/received by the server/client. 

No content

Services / Facades In software engineering, a facade is a design pattern that provides a simplified interface to a larger and more complex set of functionality. It hides the complexities of the underlying system and provides a unified interface for clients to interact with. In Angular, services are a way to organize and share code across your application. They are used to encapsulate functionality that doesn't belong in components, such as data access, logging, authentication, or communication with external services. 

In the context of Angular services, a facade service can be used to simplify the interaction with multiple other services or APIs. It acts as an intermediary between components and the underlying services, abstracting away the details of how those services are accessed or composed. 

No content

Thank you! Do you have any questions? nishanc.com/contact © 2024/April Single-Page Applications (SPA) using Angular by Nishan Wickramarathna is licensed under CC BY 4.0 https://angular.io/tutorial/tour-of-heroes Homework Source code https://github.com/nishanc/Angular-SPA-Web-Modal