Angular-CLI is a generator for Angular 2 and 4 projects (with the above version), using this Angular-CLI help we no longer need to setup such as folder needs, how to run, how to build and others. All of which have been ordered (command) through Angular-CLI. Like Ember.js features that have Ember-CLI, Vuejs with Vue-CLI and React with create-react-app then like that Angular-CLI function for Angle.

By the time this article is written Angular-CLI has reached the stable version 1.0.4, you can see more complete release history here.

https://nodejs.org/en/download/

Angular-CLI is also ready to be used in production or projects with larger scale and complex. The feature has been said to qualify and meet the needs of the developers but will also tetep no regular repairs and regular will not violate the older version.

Angular CLI Installation

1. Make sure you have installed nodejs yes, if not downloadable here. We recommend that you download the LTS version (Long Time Support) to be more stable and minimal bugs.

2. Install Angular-CLI in global by typing this command

npm -g @ angular / cli

or if you want to install the latest version with typing this command

npm install -g @ angular / cli @ latest

How To Use Angular CLI

Create a New Project

With Angular CLI we can create new projects Angular 2 and 4 in the easy way, here is how to create a new project using Angular CLI:

1.First create a project folder with the new PROJECT_NAME ng command. This will make your Angular project folder fast. After creating the project folder, Angular CLI will also pair the required dependencies automatically so that this process will take a long time depending on the condition and speed of your internet.

2.After the above process is complete we will run the project that has been created type the command below

// Move to the folder project

cd PROJECT_NAME

// For run the project

ng serve

3.Open your favorite browser and access http://localhost:4200/page, if all the steps are running smoothly you will be taken to the base page of your Angular project.

4.This generated project is included with hot reload capability when you change the file inside.

Creating New Components

In addition to the ability to generate initial folders, Angular-CLI can also generate many things in your project, such as components. to generate components You can use commands

ng generate component my-new-component

// or

ng g component my-new-component

With this easy way, then we have created a new component.

Create a New Service

Service is a part that can be injectable in Angular, this feature is often used for a fairly complex logic wrap so it is not directly exposed in the component. Some people also use the service to become state management and become a bridge between components to throw each other data. To generate service with Angular-CLI can with command:

ng generate service my-new-service

// or

ng g service my-new-service

Creating a Custom Pipe

Pipe / filter is a feature used to perform data manipulation such as formatting, adding multiple words to fit the desired look and more. Pipes or ones on AngularJS known as filters already existed since the first version of Angular but on version 2 and 4 again brought up with some performance improvements. To generate a pipe / filter with Angular-CLI can use the command:

ng generate pipe my-new-pipe

// or

ng g pipe my-new-pipe

Other features

In addition to the little mentioned above, Angular CLI also has many other capabilities, for the full feature can be seen in Angular CLI Github.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---