Angular Learning
Tags: javascript, angular, devjournal, webdev
Published: 2021-04-05 07:23:50

Today I started my learning on Angular Framework.
I am writing this blog to share my experience, understanding about the topics I covered today and also to have a good discussion if I have some wrong understanding.

## What is Angular
Angular is a web framework which uses **Typescript** lead by the Angular team at Google.

## Creating a simple app using Angular CLI

It is bit a straight forward approach. All we have to do means first of all make sure node is already installed or not. Then
1. Go to [Angular CLI](https://cli.angular.io/) page.

2. Use the comments that are already shown on the left hand side of the page.

3. Use `npm install -g @angular/cli` to install it globally.

4. Use `ng new app-name` to create a new app with name app-name.

5. Now just move to the directory `cd app-name`.

6. Use command `ng serve` to start up the server.

These are straightforward commands which can be obtained from the site.

The command line will show the address to look like [LocalHost](http://localhost:4200/) and when we head to this we can see an output like the following.

![Screenshot from 2021-04-05 12-28-02](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/747c5bzf2o8h4llmff3p.png)
 



Now use any of the IDE or code editor and open up the files.

> Typescript : It is like a super set of Javascript which have more features like Types, Interfaces. In order to run the typescript files in the browser, this is first compiled to Javascript.

## How angular app is loaded and started

Inside the project folder, if we check we can see a `index.html` file and this is the file that is served by the server.

![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axe23zfnzr3gs6u624ku.png)

```html
<body>
  <app-root></app-root>
</body>
```
This is the body of `index.html`. So where is this app root.
If we look at another file `app.component.ts` file we can see @Component decorator with selector as app-root.

```typescript
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
```
This is the information what is used up the server.
Now inside the browser, when we inspect our page there can be certain scripts that does not appear in our raw html file and these are the scripts injected by the Angular CLI.
`main.ts` file is the main file that make the first run and then in cross checks with the `app.module.ts` file and the necessary files are loaded.

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ServerComponent} from './server/server.component';
import { ServersComponent } from './servers/servers.component';

@NgModule({
  declarations: [
    AppComponent,
    ServerComponent,
    ServersComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

**NOTE** : There are certain other components inside this file but just ignore and care about the AppComponent only.


## What is a component and how can we make one component

In angular, component is generally a typescript class. If we head to some web pages, we can see many items in that and each of that item individually could be a component which can be reused anywhere we needed. It is also easy to update and make changes.

### Make Component - 1st method
1. Make a new directory say server inside src/app.

2. Create 2 files `server.component.html` and `server.component.ts`.

3. Add some codes into the `server.component.ts` and `server.component.html`.

```typescript
import { Component } from '@angular/core';

@Component({
	selector: 'app-server',
	templateUrl: './server.component.html'
})
export class ServerComponent {

}
```

```html
<p>Inside the server component</p>
```

4. Update the `app.module.ts` file.

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ServerComponent} from './server/server.component';


@NgModule({
  declarations: [
    AppComponent,
    ServerComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

Now our ServerComponent will be loaded up. Let us also create another component using CLI.

### Make component - 2nd method

We can also make a component using the CLI.
Just use the command
```
ng g c servers
```
After finishing the setup we can see another directory inside the `app/src` folder that is servers and there will be many files automatically configured and also our `app.module.ts` file will be updated.

![Screenshot from 2021-04-05 12-49-52](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mnb339rasmzsoy315jmn.png)

Update the `app.component.html` as 
```html
<h3>I am in the AppComponent</h3>
<hr>
<app-servers></app-servers>
```
Update the `servers.component.html` as
```html
<app-server></app-server>
<app-server></app-server>
```

And if we look at our page, the output will be ![Screenshot from 2021-04-05 12-52-17](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hkifd9xi9ge0qkkpjxp9.png)
 
This is what I learned today and please comment if any of my understanding has to be updated. Thank you..