Angular webinar - Credo Systemz
1 like155 views
The document discusses Single Page Architecture (SPA) and its advantages, emphasizing that SPAs enhance user interaction by loading content dynamically without full page refreshes. It compares SPAs with traditional web architectures, highlights popular client-side frameworks, specifically Angular, and outlines the benefits of learning Angular, including simplified development and application performance. Additionally, it covers the MVC framework, its components, and various aspects of Angular development, such as components, services, and routing.
Angular webinar - Credo Systemz
- 1. SINGLE PAGE ARCHITECTURE Presented & Co Presented By Srinivasan R Senior Software Engineer Group10 Technologies Ragu NS Product Manager Group10 Technologies
- 2. Objectives What is Single Page Architecture ? What are the benefits of SPA Types of Client-Side Framework Benefits of learning Angular? Angular Vs other client-side frameworks Who can learn Angular ? Career and opportunities in Angular
- 3. What is Single Page Application ? A single-page application (SPA) is a website design approach where each new page's content is served not from loading new HTML pages but generated dynamically through JavaScript's ability to manipulate the DOM elements on the existing page itself. In a more traditional web page architecture, an index.html page might link to other HTML pages on the server that the browser will download and display from scratch A SPA approach allows the user to continue consuming and interacting with the page while new elements are being updated or fetched results in much faster interaction manner and even faster content reloading. In addition, the HTML5 History API allows us to alter the page's URL without reloading the page, allowing us to create separate URLs for different views.
- 4. Advantages of the Single Page Application SPA is fast, as most resources (HTML + CSS + Scripts) are only loaded once throughout the lifespan of application. Only data is transmitted back and forth. The development is simplified and streamlined. There is no need to write code to render pages on the server. It is much easier to get started because you can usually kick off development from a file file://URI, without using any server at all. SPAs are easy to debug with Chrome, as you can monitor network operations, investigate page elements and data associated with it. It’s easier to make a mobile application because the developer can reuse the same backend code for web application and native mobile application. SPA can cache any local storage effectively. An application sends only one request, store all data, then it can use this data and works even offline.
- 6. Popular Apps that uses SPA
- 11. MVC is like regular website flow MVC Flow diagram Website flow diagram
- 12. MVC M - Model V - View C – Controller Designed at 1979 Software architecture type widely used in web development Usage Of MVC
- 13. Model Represents domain specific data and business logic Responsible for communicating with database Responsible for CRUD operation Can communicate with controller only
- 14. View View listens to the controller always It consists of templates and data form It packages data received from controller and presents it to the browser for display. It does not know about source of data
- 15. Controller It exists between view and model. Acts like middleman Responsible for controlling the flow of the application execution Process data from model and instructs view to display It can perform one or more action
- 16. Things to know Forms Pipes HTTP Client Authentication Optimization and Ng Modules Deployment Animation and Testing Getting Started Basics Components and Databinding's Directives Services and Dependency Injections Routing Observables
- 17. Components Reusable HTML custom tag Selector, templateURL, template, styleURL,styles Constructor and lifecycle of components Databinding
- 18. Routing Default Routing mechanism Lazy Loading Router State Guard Service
- 20. Career and opportunities in Angular