Angular 4/5 basic Tutorial - OneNightStudy.Com

Tuesday, 16 January 2018

Angular 4/5 basic Tutorial

Steps to Start with Angular 5:


1. Best way to start is with angular cli.
2. To install angular cli use this command. 

npm install -g @angular/cli

3. Create the new project with this command in angualar. 

ng new Client
4. To run the angular use this command.

 ng serve

5. Point your browser to http://localhost:4200.

6. In src there is the index.html is the starting file for angular.

7. In the app folder there are app component files. App component is our base component and all other component will be child component.

8. In the appcomponent.ts you will see this code:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  title = 'Client';
}

9. The selector is used in the src/index.html like

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Store</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <app-root></app-root>  <!--app component is included --!>
</body>
</html>

10. In the app/app.component.html we right html and also can create the new child components and use in it. For example:

<p>Here App Component</p> 
<app-header></app-header> //This are component selector which i am going to create
<!-- Main Content -->
<app-home></app-home>

<!-- Footer -->
<app-footer></app-footer>

11.We can create components for header, footer and home content with the command below.
ng generate component header
ng generate component footer
ng generate component home

12. You can see in the app this components are created in different folders so in each part you can put the html respectively.

13. There are services in the Angular which are used to fetch data from the apis i.e node or any other api. As it is not good practice to directly call the api from the components as it is like view part.

14. To create a service we will use this command.

 ng generate service services/common

15. Will create CommonService in the services folder.

16. We can use service in multiple  components or other services.

17. To use in component we should include it like as i am including in the app.module.ts you can use same process to include it in any component.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { HomeComponent } from './home/home.component';
import { FooterComponent } from './footer/footer.component';
import { CommonService } from './services/common.service'; //here it is included


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    HomeComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [CommonService],
  bootstrap: [AppComponent]
})
export class AppModule { }

18. Also put in providers of the  app.module.ts

19. Same way you will include it in the app.component.ts

20. And in the component you need to first call in constructor.

import { Component } from '@angular/core';
import { CommonService } from './services/common.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {


  constructor(private commonService:CommonService) {

  }
  title = 'Client';
}

21. So by the variable commonService you can call the functions of the Service which you created and use it in app.











No comments:

Post a Comment