Angular Application Start

Overview of the starting point and files in an Angular application

Angular Application Start
● The starting point for Angular is the main.ts
file.
● In the main.ts file, there is a bootstrapModule
method which points to the AppModule by
default.
● In the AppModule Class, there is a
@NgModule Decorator in which the
bootstrap Component is defined.
● By default this is the AppComponent, this
bootstrap component will then be
instantiated and created as an HTMLElement
in the DOM where its selector is referenced
in your index.html file.

Photo by Pexels
Angular.JSON
● This file has various properties and
configuration of your Angular project.
● This is the file which is first referred to by the
builder to look for all the paths and
configurations and to check which is the
main file.

Photo by Pexels
main.ts
● This file acts as the entry point of the
application.
● Main.ts helps in creating the browser
environment for the application to run. This is
done by:

Photo by Pexels
app.module.ts
● From the main.ts file, it is very clear that we
are bootstrapping the app with AppModule.
● This AppModule is defined in
APP.MODULE.TS file.
● This is the module, created with the
@NgModule decorator, which has
declarations of all the components we are
creating within the app module so that
Angular is aware of them.
● Here, we also have imports array where we
can import other modules and use in our app.
● An example of app.module.ts file with a test
component declared and two modules
imported.

Photo by Pexels
app.component.ts
● From the app.module.ts file above, we can
clearly see that the module asks to bootstrap
the app component.
● This is the file which interacts with the HTML
of the webpage and serves it with the data.
● The component is made by using
@Component decorator, which has a
selector, which is like a custom HTML tag
which we can use to call that component.
● It then has template or templateUrl which
contains the HTML of the page to be
displayed.

Photo by Pexels
Compiler
● By this time, the compiler has all the details
about the components of the app and now
they are ready to be used.

Photo by Pexels
 Angular Router
A comprehensive guide to Angular router
Introduction
● What is Angular Router?
● Why do we need Angular Router?
● Features of Angular Router

Photo by Pexels
Setting up Angular Router
● Importing RouterModule
● Adding router-outlet directive
● Configuring routes in app module

Photo by Pexels
Routing Components
● Creating component for each route
● Defining routes in @NgModule
● Using routerLink directive

Photo by Pexels
Navigation and Linking
● Navigating between routes
● Using routerLinkActive directive
● Passing parameters through routes

Photo by Pexels
Guards
● Implementing route guards
● Types of guards - CanActivate,
CanActivateChild
● Implementing CanDeactivate guard

Photo by Pexels
Lazy Loading
● Lazy loading route modules
● Loading routes on-demand
● Using loadChildren property

Photo by Pexels
Child Routes
● Nesting routes using children property
● Defining child routes in parent component
● Accessing child route parameters

Photo by Pexels
Route Resolvers
● Pre-fetching data using route resolvers
● Implementing resolver interface
● Using resolved data in components

Photo by Pexels
Error Handling
● Handling route not found
● Redirecting to error page
● Custom error handling