What is Angular?
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
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
3. Angular CLI
Why we require NodeJS when we are developing an Angular Application?
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.
Once you are inside the application directory, you can execute following command to run our first angular application.
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.
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.