![Connecting dots in Angular 2/Angular 4 apps [10 mins read]](https://media.licdn.com/dms/image/v2/C5112AQH0J-iYM0z5zw/article-cover_image-shrink_600_2000/article-cover_image-shrink_600_2000/0/1520087171447?e=2147483647&v=beta&t=zD8tfYD6vgSr7l_Ra4-TkB0jN6f4hUbB4pAAW6lMN7Y)
Connecting dots in Angular 2/Angular 4 apps [10 mins read]
I am writing this article in order to help you understand how the Angular apps work in a nutshell:
1. main.ts - It is the main class which bootstraps the main module and main module in Angular App is AppModule which is in app.module.ts.
2. app.module.ts - This AppModule is the main class and decorator denotes that it is a Module class using @NgModule decorator. This AppModule bootstraps the main component class i.e. AppComponent which is in app.component.ts.
a. What is a decorator? Decorator defines what type of class it is, It is like annotations in java which defines what this class mean and how should it behave. Like: @NgModule, @Component, @Directive, @Injectable.
b. Module: Angular works on module concept. Main module and its submodules. A module can be of following types:
i. Component - encapsulates template, data and behavior of a view. Component is nothing but a class.
ii. Directive - directives are like components but it does not have template, it defines/extends behavior of DOM elements.
iii. Service - it contains any non-user interface logic like data access, configuration etc.
iv. Routers - It takes care of routing / navigation throughout the app.
c. @NgModule explained: The most important properties are:
i. declarations - the view classes that belong to this module. Angular has three kinds of view classes: components, directives, and pipes.
ii. imports - other submodules which are required by component templates declared in this main module.
iii. providers - creators of services that this module contributes to the global collection of services; they become accessible in all parts of the app.
iv. bootstrap - the main application view, called the root component, that hosts all other app views.
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
d. Imports in app.module.ts: Whatever the classes you are using in that module, you have to import those classes from library using import keyword. It's not just for app.module.ts , it’s the rule for any module.
import { NgModule } from '@angular/core';
3. app.component.ts - This AppComponent is the main component and @Component decorator denotes that it is a component class. This class interacts with the template and has logic to populate the views.
a. @Component explained: The most important properties are:
i. selector: CSS selector that tells Angular to create and insert an instance of this component where it finds a <app-root> tag in parentHTML. For example, if an app's HTML contains <app-root></app-root>, then Angular inserts an instance of the template between those tags.
ii. templateUrl: module-relative address of this component's HTML template.
iii. styleUrls: css file attached to the template.
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
4. app.component.html- This is the template attached to AppComponent and it will be rendered wherever the 'app-root' selector is mentioned and usually it is mentioned in index.html from where the app flow starts. Generally it consists following:
<router-outlet></router-outlet>
a. Index. html: Index.html is the template which loads first and in this template we have <app-root> selector, which embeds the app.component.html in this selector.
<body>
<app-root></app-root>
</body>
5. app.component.css- This is the css stylesheet attached to that component/view.
6. app.routing.module.ts- All routes and routing rules can be defined in this typescript file. Based on path, routes will be redirected to corresponding subcomponent.
Const appRoutes: Routes = [
{ path: 'sub1', component: SubComponent1 },
{ path: 'sub2', component: SubComponent2 },
];
7. Now all the subcomponents can have the same structure like main AppComponent.
a. app.submodule1.ts
i. app.subcomponent1.ts
ii. app.subcomponent1.html
iii. app.subcomponent1.css
b. app.submodule2.ts
i. app.subcomponent2.ts
ii. app.subcomponent2.html
iii. app.subcomponent2.css
Nice👍🏻