Building blocks of Angular
0 likes890 views
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.
Building blocks of Angular
- 1. Presented By: Shubhrank Rastogi & Kiran Jeet Kaur Building Blocks of Angular
- 2. Lack of etiquette and 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 Angular App architecture 02 App Bootstrapping 03 Angular Modules and Components 04 Angular Services 05 Angular Router Module
- 4. The architecture of an Angular application relies on certain fundamental concepts. Architecture
- 5. Bootstrapping is a technique 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 applications are 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 take a look at how the root module (i.e. src/app/app.module.ts) looks like initially: ….Cont. Modules
- 8. ….Cont. Modules Angular CLI commands to generate a module -
- 9. ● A component controls 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
- 11. Each component in angular 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 define a 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 metadata for 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 service is 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 Injection is 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 CLI commands to generate a service -
- 17. ● Routing in Angular 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
- 19. DEMO
- 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 ! Get in touch with us: Lorem Studio, Lord Building D4456, LA, USA