Getting Started With Angular CLI

Introduction

Angular is a framework to build client-side applications. It is especially used to create single-page applications where the View is refreshed asynchronously without having to reload the whole application.

For any application that relies mainly on JavaScript, Angular is a great choice. Now, the real question is why learn Angular when we have a lot of JS libraries already. Well, there are so many reasons. Angular supports the modular approach where the application you build has a clear structure and uses components, it makes use of the reusable code. Angular has a lot of inbuilt capabilities, such as routing, validation, animation, etc. which make the development quicker and easier. Angular also facilitates unit tests and maintainable code. Finally, Angular is a product of the Google team and makes use of TypeScript provided by Microsoft.

In this introduction, we will learn what Angular is and why you should learn Angular.

Let us go back to the history of Angular, first.

History of Angular

• 2010: AngularJS was released. This was a huge hit in the market and a lot of users used it to build their applications.
• 2016: Angular version 2 was released.

This is called just Angular. Today, AngularJS is referred to as 1. x version, and Angular (without a JS) is referred to as a higher version of Angular. In December 2016, Angular v4 was announced while version 3 was skipped.

• 2017: Angular version 5 was released.
• 2018: Angular 6 was released.

Now, let us start with whether you should learn Angular version changes.

If you don't know Angular 4 yet and start with Angular 5, well, you can go for it. The Google team has decided to upgrade Angular twice a year and stick to the semantic versioning.

Semantic versioning

Semantic versioning of a software product can be understood with this simple example.

Let us say, there is a Version 1.2.3. Here, 1 is major, 2 is minor, and 3 is a fix (patch).

• The patch number is changed whenever there is a kind of bug fix or any kind of patch released.
• The minor version increases when there are added features that don't break any functionality.
• The major version number changes only when there is a break in any of the functionality. Since Angular is upgraded twice a year, so you can see the changes in the major version twice a year.

You can start learning Angular anytime, without any hesitation. Experts predict that Angular is going to be the most powerful and popular framework in the future.

So now, if you are going to learn Angular 5, you need not worry about what will come in Angular 6 or 7. The concepts are not going to change and you just need to upgrade the version since most of the things will remain the same in terms of functionality.

Learning about the new changes will hardly take a day if you already know the concepts.

Prerequisites

• Basic knowledge of HTML, CSS, and JS
• Basic knowledge of TypeScript

To set up the development environment, we need the following.

To install Node, go here and download the latest stable release. When you install Node, Npm also gets installed as a Node Package Manager.

Once done, open the command prompt and check the below command.

> node -v

You will see the node.js version installed.

 > npm -v

You will see the npm version installed.

Now, our next step is to install Angular CLI. It is the command line interface for Angular that allows you to add building blocks to your Angular application by just typing out the commands.

It makes the development quicker and faster by simply using the commands. A couple of commands you need to learn to work with CLI are mentioned below.

To install Angular CLI, go to the command prompt and type the following command.

 > npm install -g @angular/cli

This will install Angular CLI globally.

If you want to check the version of Angular CLI installed, you need to use the command.

> ng –v

If you are not getting the same "Angular CLI" written, then make sure to add the Angular CLI path to the environment variable.

Now, you have Node, Npm, and Angular CLI installed. The next step is to get a useful editor. I will use Visual Studio Code but you can feel free to use any editor for editing the code.

Download Visual Studio Code from here. 

Let us now create a sample application.

Create a sample folder. We will mainly work in this folder. We will make use of Angular CLI for creating our application. Visual Studio Code has an integrated terminal from where we can run our commands.

Goto view > Integrated command.

Note. make sure you are in your application folder.

To create a new application, run the below command on any location.

> ng new TestApp

Once your command is completed, you will have a TestApp folder created inside your sample folder.

Now, you will have your project folder called 'TestApp'. Navigate to your project folder.

> cd TestApp

Now, run the below command to run the application.

> ng serve

Once you get the command running successfully from webpack, go to the browser and browse the location 'localhost:4200'.

So with the help of a couple of commands, you will be executing your first Angular application.

Too many things have become very easy because of Angular CLI. Still, one should know how the flow of control is being handled in an Angular application and from where all the HTML is being displayed. We will learn all this in my next article.

• 2010: AngularJS was released. This was a huge hit in the market and a lot of users used it to build their applications.
• 2016: Angular version 2 was released.
  • 2017: Angular version 5 was released.
  • 2018: Angular 6 was released.
  • Node
  • Npm
  • Angular CLI
  • Text Editor - VS code or sublime.