Getting Started Angular 4 using Angular CLI

by Didin J. on Mar 28, 2017 Getting Started Angular 4 using Angular CLI

Getting started Angular 4 using Angular CLI in Node.js environment to create simple Angular app.

To make an Angular 4 development easier and faster we use an Angular 4 command-line interface or Angular-CLI. The Angular 4 CLI is a great feature that made by official Angular developers. An interesting thing in this new Angular 4 is smaller and faster bundle and the new feature on "*ngIf". That's the feature that we will try in this getting started tutorial.

Table of Contents:

Let's the journey begin.


Install Angular CLI

For making quick Angular 4 development, we will use Angular CLI. Before you start to install Angular CLI, make sure you have installed the latest Node.js on your machine. After that, open terminal or Node command line then type this command.

sudo npm install -g @angular/cli

You will see a message like below if installation successfully.

Getting Started Angular 4 using Angular CLI - Angular CLI Installation

To view available CLI commands type this.

ng help

And this is the useful command that will make development faster. 

Scaffold Usage
Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Guard ng g guard my-new-guard
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module


Create New Angular 4 Project

To generate a new Angular 4 Project, go to your projects folder then type this command.

ng new angular-app

That command will generate an Angular 4 project and install NPM packages, so wait for minutes. Now, type this command to run the Angular 4 application.

npm start

or

ng serve -o

It will open the browser automatically then go to this URL http://localhost:4200. You should see this in the browser.

Getting Started Angular 4 using Angular CLI - Angular App Home Page

Now, open or view file package.json from the root of the project folder. You will see Angular 4.0.0 and Typescript 2.2.1 dependencies.


Generate Angular 4 Component

To generate an Angular 4 component, type this command.

ng g component cities

Open and edit file src/app/cities/cities.component.ts then add an array of cities below the Class name.

cityList = [ { city_name: "Bandung", prov_name: "Jawa Barat" },
             { city_name: "Jakarta", prov_name: "DKI Jakarta" },
             { city_name: "Surabaya", prov_name: "Jawa Timur" },
             { city_name: "Yogyakarta", prov_name: "DI Yogyakarta" },
             { city_name: "Semarang", prov_name: "Jawa Tengah" },
             { city_name: "Medan", prov_name: "Sumatera Utara" },
             { city_name: "Tangerang", prov_name: "Banten" },
             { city_name: "Denpasar", prov_name: "Bali" },
             { city_name: "Makasar", prov_name: "Sulawesi Selatan" }];

Open and edit src/app/cities/cities.component.html then add these lines of City List iteration and displayed as a list in the Angular template.

<ul *ngIf="cityList.length>0; else loading">
  <li *ngFor="let city of cityList">
    {{ city.city_name }} - {{ city.prov_name }}
  </li>
</ul>
<ng-template #loading>No cities found</ng-template>

There's nothing special compared with Angular 2 except *ngIf has 'else' statement which points to the template with the text "No cities found" that will show if cities have no value.


Create An Angular Router for The New Component

To make the new component accessible, we have to make routing for it. Open and edit src/app/app.module.ts the add this import of Angular RouterModule.

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

 

Now, create the route for cities component inside @NgModule imports section.

imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  RouterModule.forRoot([
    { path: '', redirectTo: 'cities', pathMatch: 'full' },
    { path: 'cities', component: CitiesComponent }
  ])
],

Next, replace all tags in src/app/app.component.html with this Angular <router-outlet> tag.

<router-outlet></router-outlet>

Finally, run this app and see the result on the browser.

This tutorial is experimental, don't try it yet in the production app.

If you don’t want to waste your time design your own front-end or your budget to spend by hiring a web designer then Angular Templates is the best place to go. So, speed up your front-end web development with premium Angular templates. Choose your template for your front-end project here.

That just the basic. If you need more deep learning about MEAN Stack, Angular, and Node.js, you can take the following cheap course:

Thanks!

Loading…