Angular 6 Tutorial With Example Using Angular CLI Step by Step

Generic placeholder image
Brijpal Sharma
angularjs  

Date:-September 01st, 2018 , Posted On:- Web Development


Angular 6 Tutorial With Example Using Angular CLI is today topic, we learn how to work on angular CLI step by step.

we know that angular is the most demanding framework for desktop and mobile application, We will start this tutorial by installing Angular using Angular CLI.

Angular 6 Tutorial

First, we need to setup environment for angular CLI

Step 1: Set up the Environment.

First, install node.js and npm on your computer and system if they are not already on your computer.

After that install the Angular CLI globally.

# run in administrator mode

sudo npm install -g @angular/cli

# or

yarn add global @angular/cli

Angular CLI install all necessary NPM package.

Step:2 Create a new Angular project 

Open a new terminal and create a new fresh new angular project using the following command.

ng new myapp

Here myapp is our project name 

After successfully download project now the project is initialized. go into our project folder.

cd codermen

Open this project on your editor here I am using Visual Studio. for open use of this command.

code .

To start the development server by the following command.

ng serve

Step:2 Install bootstrap 4 and jquery in Angular

I am going to install bootstrap 4  in this angular project using this following command.

npm install bootstrap@4 jquery --save

After successfully install bootstrap and jquery we use in our project.

Step:3 Create components 

 

We are creating two component using this following command.

ng g c dashboard

And, create another component.

ng g c users

Here g c stand for generate component.

After creating this file Angular automatically update the app.module.ts file.

Open src\app\app.module.ts file in your editor. and import RouterModule and Routes

import { RouterModule, Routes } from '@angular/router';

And

const routes: Routes = [
  { path: 'users', component: UsersComponent },
  { path: 'dashboard', component: DashboardComponent }
];

Here two path are defined first one is users and the second one is a dashboard. Now export Route module

imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
 exports: [
    RouterModule
  ],

Ok, now we are going to create a nav bar in view page and define a <router-outlet> component.

<div id="app">
    <nav class="navbar navbar-expand-sm bg-light">
        <ul class="navbar-nav">
        <li class="nav-item">
            <a routerLink="/" class="nav-link">Home</a>
        </li>
        <li class="nav-item">
            <a routerLink="/dashboard" class="nav-link">Dashboard</a>
        </li>
        <li class="nav-item">
            <a routerLink="/users" class="nav-link">Users</a>
        </li>
        </ul>
    </nav>
    <div class="container">
        <router-outlet></router-outlet>
    </div>
</div>

Save the file and open this application in the browser and go to http://localhost:4200/

Home page of angular

Step: 4 Create fake data by JSON server

Here we need to fake data for tutorials purpose first install json-server using this following this command.

yarn global add json-server

# or

npm install -g json-server

Now we going to create a new folder inside src directory named data and in that folder, create one new file named db.json. let us add the following code(data) inside a db.json file.

{
    "results": [
    {
        "id": "1",
        "name": "Raj",
        "movies": "100"
    },
    {
        "id": "2",
        "name": "Brij",
        "movies": "3"
    },
    {
        "id": "3",
        "name": "Punit",
        "movies": "10"
    },
    {
        "id": "4",
        "name": "Shiva",
        "movies": "30"
    },
    {
        "id": "5",
        "name": "Chris",
        "movies": "20"
    }]
}

Now, times to start json-serve using this command.

json-server --watch src/data/db.json --port 4000

Our JSON server is running at port: 4000 and URL is: http://localhost:4000/results

Step 5: Setup HttpClient

To play with data in vuejs and react we need the third party to install but in angular is a full feature framework so we need only setup HttpClient so add some code in app.module.ts file

import { HttpClientModule } from '@angular/common/http';

 imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    HttpClientModule,
],

Now, inside users folder, create one new file named User.ts. It is an interface, which tells the application that, which type of data is on the backend that we need to display on the view page.

export interface User {
    id: Number;
    name: String;
    movies: Number;
  }

Create one new another file user.service.ts file

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class UserService {
  constructor(private http: HttpClient) { }
  url = 'http://localhost:4000';
  getUsers() {
    return this
            .http
            .get(`${this.url}/results`);
        }
}

Now, include this file inside the users.component.ts file.

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
import { User } from './User';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {

  users: User[];

  constructor(private userService: UserService) { }

  ngOnInit() {
    this.userService
      .getUsers()
      .subscribe((data: User[]) => {
          this.users = data;
        });
  }

}

On, almost is done now time to display data in view page with help of a loop. so add some code in users.component.html

<table class="table table-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Movies</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of users">
      <td>{{ user.id }}</td>
      <td>{{ user.name }}</td>
      <td>{{ user.movies }}</td>
    </tr>
  </tbody>
</table>

Now, you can see the data in your view page.

 


About the author

user profile
Brijpal Sharma

Hello, My Name is Brijpal Sharma. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of Codermen. I started this blog to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers...

0 comments

You must be logged in to post a comment.