DEV Community

loading...

Angular Learning

rohithv07 profile image Rohith V Updated on ・4 min read

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 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 and when we head to this we can see an output like the following.

Screenshot from 2021-04-05 12-28-02

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

<body>
  <app-root></app-root>
</body>
Enter fullscreen mode Exit fullscreen mode

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.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
Enter fullscreen mode Exit fullscreen mode

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.

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 { }
Enter fullscreen mode Exit fullscreen mode

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.

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

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

}
Enter fullscreen mode Exit fullscreen mode
<p>Inside the server component</p>
Enter fullscreen mode Exit fullscreen mode
  1. Update the app.module.ts file.
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 { }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Update the app.component.html as

<h3>I am in the AppComponent</h3>
<hr>
<app-servers></app-servers>
Enter fullscreen mode Exit fullscreen mode

Update the servers.component.html as

<app-server></app-server>
<app-server></app-server>
Enter fullscreen mode Exit fullscreen mode

And if we look at our page, the output will be Screenshot from 2021-04-05 12-52-17

This is what I learned today and please comment if any of my understanding has to be updated. Thank you..

Discussion (4)

pic
Editor guide
Collapse
rishpein15 profile image
Rish Srivastav

Great when i started i had no idea what i was doing
it has complex file structure and a lot of configuration to get started
Now i write angular in sleep lol jk
here to help if u need any
twitter @rishpein15

Collapse
siddharthshyniben profile image
Siddharth

Great job! The first time I leaned angular, I was just copying and pasting. And you should add some syntax highlighting to your code.

Collapse
rohithv07 profile image
Rohith V Author

Yeah Sure.. Thank you

Collapse
rohithv07 profile image
Rohith V Author

Thank you, I will be following you now..