GET UP AND DEVELOPE YOUR FIRST ANGULAR APPLICATION FROM SCRATCH

What is Angular?

Angular is a JavaScript based framework to build reactive single page web applications. It is use to build UI of web application, which gets execute at client site in the browser.

History of Angular

Angular’s first version was release in 2009. That time it was based on MVC design architectural pattern but as technology advanced, angular switched to component based architecture.

Angular 2 was complete rewrite of angular 1, and then after angular kept on releasing its version with small incremental but effective changes. There are two groups of angular developers. One group is still using Angular 1 and they call it as “Angular JS”. Second group uses newly re-written angular and its subsequent versions. They call it just an “Angular”. Latest version of Angular is Angular 6.

Prerequisites to learn Angular

To learn an Angular, you must have hands-on of HTML, CSS and good knowledge of JavaScript since Angular is completely based in JavaScript.

What is component pattern?

Before we start learning Angular, we will understand first, what is component pattern?

Angular uses component pattern. Component pattern in simple word is, combining smaller, discrete building blocks into larger finished product. In software development, components are logical units those can be combined into larger application. Component contains internal logic and properties those are shielded or hidden from the lager application. The larger application then consumes these building-blocks through specific gateways, called interfaces, which expose only what is needed to make use of the component. In this way, the component’s internal logic can be modified without affecting the larger application, as long as the interfaces are not changed.

Required softwares for angular development

1. Any editor, preferably Visual Studio Code
2. NodeJS
3. Angular CLI

Why we require NodeJS when we are developing an Angular Application?

“Angular” is entirely new framework and it is written in Typescript. Browser does not understand Typescript JS (i.e., .ts) we need to compile them in plain JavaScript i.e., .js.

We need to use Node and NPM compile them into js file so that we can deploy them in production.

Most of the Angular packages or libraries at GitHub repository (github.com/angular/angular) are distributed as different NPM packages. Node Package Manager is heavily dependent on Node.js.

You can download latest version of NodeJS fom this link.

You can download “Long Term Support” version of Node JS from the provided link. When I was writing this article, available version of Node JS was 8.12.0 LTS (as shown in the figure).

Once we install Node JS, we also need to install Angular CLI.

Why we require Angular CLI for Angular Application development?

Angular Command Line Interface (Angular CLI).

The Angular CLI enables us to start building Angular applications and deploying them through a series of console commands. The Angular CLI makes it easy to create an application that already works, right out of the box. It already follows some best practices.

To install Angular CLI we need to execute following command in command prompt.

npm install –g @angular/cli

Once we are ready with above mentioned installation, we can create our first Angular application using Angular CLI.

 Create an Angular Application through Angular CLI

To create an angular application by using Angular CLI, we need to execute following command in command prompt in required application directory.

ng new my-first-app

Here “my-first-app” is the application name. Angular CLI will create a new directory in current directory with this name and then it will add all necessary files inside it required for angular application to run along with basic component. This process will take a minute or two to complete.

To enter into application directory execute following command.

cd my-first-app

Once you are inside the application directory, you can execute following command to run our first angular application.

ng serve

This command will run compile and run application, and will also host it in internal development server. You can access your application by putting following address in any web browser. If you do that you should see a standard default Angular page in the browser.

http://localhost:4200

Summary:

In this article we learned,

1. What is Angular?
2. Angular’s history and its available version since its introduction.
3. What is Component Pattern?
4. What is the use of Node JS and Angular CLI in Angular application development?
5. How to create an Angular application using Angular CLI?
6. How to run an Angular Application?

In next article, we will see how to modify an application which we created in this article and we will also learn some new angular concepts and modules.

Please follow and like us:
Sending
User Review
5 (4 votes)

3 Replies to “GET UP AND DEVELOPE YOUR FIRST ANGULAR APPLICATION FROM SCRATCH”

  1. Very nicely explained to start with.. Even being developer of Angular I didn’t know many minute details. Thanks for wonderful article.

Leave a Reply

Your email address will not be published. Required fields are marked *