Downloaded 12 times
Uploaded byKnoldus Inc.
Building blocks of Angular
The document discusses the key building blocks of Angular applications including architecture, bootstrapping, modules, components, services, templates, decorators, dependency injection, and routing; it provides an overview of each concept and how they work together to create the structure of an Angular application; the presentation concludes with a demo of these concepts in action.
In this document
Powered by AI
Introduction of presenters Shubhrank Rastogi & Kiran Jeet Kaur and the topic 'Building Blocks of Angular'.
Guidelines for maintaining etiquette during sessions, including punctuality, feedback, and avoiding disturbances.
Agenda for the presentation, covering topics such as architecture, bootstrapping, modules, components, services, and routing in Angular.
Introduction to the fundamental concepts underlying the architecture of an Angular application.
Steps involved in bootstrapping an Angular app including loading the index.html, libraries, and the root module.
Explanation of Angular's NgModules, which group related components, directives, pipes, and services.
Overview of the initial structure of the root module in an Angular application, particularly app.module.ts.
Angular CLI commands to generate new modules for organization and modularity.
Introduction to components, their role in controlling views, and application logic within a class.
Further details about components, reiterating their function and significance in Angular applications.
Description of the essential files associated with each component: HTML, CSS, Spec, and TypeScript.
Definition of a component's view via templates, including Angular's template syntax for dynamic rendering.
Role of metadata and the @Component decorator for shaping the component class and its attributes.
Understanding Angular services, their specific purposes, and how the @Injectable() decorator is used.
Explanation of how Angular uses dependency injection to provide services to components.
CLI commands available for generating new services within Angular applications.
Introduction to routing for navigation in Angular apps, specifically using the RouterModule.
Further details on the router module and its configuration within Angular applications.
Live demonstration section of the presentation.
List of references and resources for further information on Angular architecture and concepts.
Thank you note and contact information for presenters.
Building blocks of Angular
- 1. Presented By: Shubhrank Rastogi& Kiran Jeet Kaur Building Blocks of Angular
- 2. Lack of etiquetteand manners is a huge turn off. KnolX Etiquettes Punctuality Respect Knolx session timings, you are requested not to join sessions after a 5 minutes threshold post the session start time. Feedback Make sure to submit a constructive feedback for all sessions as it is very helpful for the presenter. Silent Mode Keep your mobile devices in silent mode, feel free to move out of session in case you need to attend an urgent call. Avoid Disturbance Avoid unwanted chit chat during the session.
- 3. Our Agenda 01 AngularApp architecture 02 App Bootstrapping 03 Angular Modules and Components 04 Angular Services 05 Angular Router Module
- 4. The architecture ofan Angular application relies on certain fundamental concepts. Architecture
- 5. Bootstrapping is atechnique of initializing or loading our Angular application.The Angular takes the following steps to load our first view. 1. Index.html loads 2. Angular, Third-party libraries & Application loads 3. Main.ts the application entry point 4. Root Module 5. Root Component 6. Template Bootstrapping an App
- 6. ● Angular applicationsare modular and Angular has its own modularity system called NgModules. ● Module in Angular refers to a place where you can group the components, directives, pipes, and services, which are related to the application. ● They can import functionality that is exported from other NgModules, and export selected functionality for use by other NgModules. ● Every Angular application has at least one NgModule class, the root module, which is conventionally named AppModule. Modules
- 7. Let us takea look at how the root module (i.e. src/app/app.module.ts) looks like initially: ….Cont. Modules
- 8. ….Cont. Modules Angular CLIcommands to generate a module -
- 9. ● A componentcontrols a patch of screen called a view. ● A component's application logic is inside a class, which supports the view. ● This class is decorated with @Component decorator. ● These components are bundled together to create the web application. ● They make your complex application into reusable parts which you can reuse very easily. Components
- 10.
- 11. Each component inangular has the following files: 1. HTML File : This file defines how it will be rendered. 2. CSS file : It defines all the CSS styles which will be applied to your component. 3. Spec file : This file is used for unit testing purpose. 4. Typescript file : It defines the behavior. ….Cont. Components Angular CLI commands to generate a component -
- 12. ● You definea component's view with its companion template. ● A template is a form of HTML that tells Angular how to render the component. ● A template looks like regular HTML, except that it also contains Angular template syntax, which alters the HTML based on your application's logic and the state of application and DOM data. ….Cont. Component’s Template
- 13. ● The metadatafor a component tells Angular where to get the major building blocks that it needs to create and present the component and its view. ● The @Component decorator identifies the class immediately below it as a component class, and provides the template and related component-specific metadata. ● Decorators are used for attaching metadata to classes, it knows the configuration of those classes and how they should work. ….Cont. Component’s Decorator
- 14. ● A serviceis typically a class with a narrow, well-defined purpose. It should do something specific and do it well. ● To define a class as a service in Angular, use the @Injectable() decorator. ● Angular distinguishes components from services to increase modularity and reusability. ● This makes our angular app more modular, means instead of writing same code in different components we will inject the service and calls the method in the service that triggers HTTP requests. Services
- 15. ● Dependency Injectionis wired into the Angular framework and is used to provide components with the services they need. ● You can inject a service into a component, giving the component access to that service class. ● Angular, use the @Injectable() decorator to provide the metadata that allows Angular to inject it into a component as a dependency. ….Cont. Service’s DI
- 16. ….Cont. Services Angular CLIcommands to generate a service -
- 17. ● Routing inAngular helps us navigate from one view to another as users perform tasks in the app. ● To add Routing in the application, we use the RouterModule. ● Here is the app-routing.module.ts file which is created by default: Router Module
- 18.
- 19.
- 20. References ● https://angular.io/guide/architecture ● https://angular.io/guide/ngmodule-vs-jsmodule ●https://medium.com/bycodegarage/building-blocks-of-angular-eafbb289b6d6 ● https://www.tektutorialshub.com/angular/angular-bootstrapping-application/ ● https://www.codeproject.com/Articles/1255334/Building-Blocks-of-Angular ● https://www.edureka.co/blog/angular-tutorial/#BuildingBlocksOfAngular
- 21. Thank You ! Getin touch with us: Lorem Studio, Lord Building D4456, LA, USA