Angular 2 CLI – An Introduction

We have seen before how yeoman allows us to write the apps faster by taking care of most of the scaffolding work [HTTP based Rest Service in Angular JS using Yeoman]. Angular-CLI is a similar feature of Angular 2 providing support of different parts of an angular app, giving more time to developers to focus on more important parts of the app without wasting any time in repetitive tasks.

In this post we are going to create a simpleton cart application using Angular CLI. The application would allow to list / add / edit and delete items in a shopping cart application.

Requirements for following along…

The application would use Angular CLI to create the application. The tutorial assumes that you have NodeJS installed and you have an updated version of npm. You can verify that from your terminal.

Installing Angular-CLI

The first step is to install Angular-cli itself. It is an npm package. Here we are creating a separate folder for our project. We are cd’ing into the folder. Then we are running the npm install for angular-cli. We are using -g switch as we want to install it globally so we could use the tool globally.

This is just failing because we are not running the terminal as admin. You can just use sudo -s for this purpose. You will need to provide admin password. Then you should easily be able to run the same command.

Creating Project

Angular-cli installs ng tool. This is the actual tool used to generate scaffolding for angular2 apps. In order to create a new project, we run it as follows:

But you might get another surprise, here is what happened to me.

Actually the problem is with npm itself. Just upgrading npm to the latest version should fix the issue.

Just make sure that you install angular-cli again. Just notice ember-cli and dependencies being installed.

Now let’s try to create our project again. You can see that it has completed successfully without any failures.

Running Server

You can run the project by simply running ng serve command on terminal. Here it has launched the app on port 4200.

Project Structure

Angular-cli has done the basic necessary scaffolding for us. Let’s open this in some editor. Here I have opened this in Visual Studio Code. There are different folders created. Let’s keep the discussion about these folders for a separate post later and let’s focus on app folder.

Here the main app component is displayed. You can notice @Component. It is a decorator to associate metadata to a component. Here templateUrl attaches an angular template, specifying how this component can be displayed. It also has a style sheet associated using styleUrls.

Our AppComponent has a title property with assigned value ‘app works’. This is used by template as follows:

Now you understand why ‘app works’ was displayed when we ran the project earlier. Let’s update the property to Angular2 Cart and the UI is updated as follows:

Component Hierarchy

Angular2 app is really a hierarchy of different components. We can add other components and add them as child components to our app component. Let’s add another component for our cart. Let’s name it cart.

You can notice that a separate folder is added with the same name as follows:

Now we need to add cart component to the main app component. Please notice that selector for new component is app-cart. We will be using this selector to add it to the template as follows:

But the app component really doesn’t know about this selector. It has to know what and how to display this selector. The what is the cart-component, and how should be specified by the cart-component itself, so the app-component shouldn’t really be worried about it.

Actually, all child components are added to the component metadata using directives specifier. All the tags in the template are checked with the components in the directives list to determine if the selector is for a particular component in the list.

Now we have cart-component as a child of main app-component. And the UI is updated as follows:

Adding Service

Adding an angular2 service is as simple as adding a component using angular-cli. Here we are adding a service to get us the list of items in the cart or adding an item to the cart. Let’s run the following to generate scaffolding for cart service.

Here the service is added to the main app folder. Since an app can have a number of services, you can be more creative for the folder structure of services.

Let’s update the service code as follows:

Here we have two methods. One is to get the list of items in the cart. The other is to add a single item to the cart.

And we also need to update the cart template as follows:

And the UI is updated. There are two elements pre-populated. And we have two items through the submit button as follows: