Angular CLI Tutorial

Angular CLI Tutorial

In this Angular CLI Tutorial makes it easy for you to start with any Angular project. Angular CLI comes with commands that help us create and start on our project very fast. It has commands to create a project, a component and services, change the port, etc.

Audience

This tutorial is designed for software programmers who want to learn the basics of Angular CLI and its concepts in a simple and easy manner. This tutorial will give you enough understanding on the various functionalities of Angular CLI with suitable examples.

Prerequisites

Before proceeding with this tutorial, you should have a basic understanding of HTML, CSS, JavaScript, Typescript, and Document Object Model (DOM).

Overview

Angular command-line interface (CLI) makes it easy to start with any Angular project. It comes with commands that help us create and start our project very fast. Let us now go through the commands available to create a project, a component, and services, change the port, etc.

To work with Angular CLI, we need to have it installed on our system. Let us use the following command for the same −

npm install -g @angular/cli

To create a new project, we can run the following command in the command line and the project will be created.

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve //

ng serve // will compile and you can see the output of your project in the browser −

http://localhost:4200/

4200 is the default port used when a new project is created. You can change the port with the following command −

ng serve --host 0.0.0.0 --port 4201

Commands for Angular 4

The following table lists down a few important commands which are required while working with the Angular 4 projects.

Sr.NoCommands & Description
1Componentng g component new−component
2Directiveng g directive new−directive
3Pipeng g pipe new−pipe
4Serviceng g service new−service
5Moduleng g module my−module

Whenever a new module, a component, or a service is created, the reference of the same is updated in the parent module app.module.ts.

Next Topic : Click Here

This Post Has One Comment

Leave a Reply