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.

It's been 5 days since Angular 4.0.0 available. Now, we have to try this new Angular 4 using Angular CLI. 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. Let's the journey begin.


1. 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 in 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


2. Create New Angular 4 Project

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

ng new angular-app

That command will generate 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.


3. Generate Angular 4 Component

To generate 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 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 this lines.

<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.


4. Create 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.

import { RouterModule }   from [email protected]/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 tag.

<router-outlet></router-outlet>

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

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

Thanks.
 

All Partners-10usd 336x280
Loading…