Angular 2, 4, 5, 6

starting with Angular js

What is Angular?

Angular is an open-source, comprehensive JavaScript framework developed by Google for building dynamic, front-end web applications. It supports MVC framework and good for building Single Page Applications(SPA). Now, it has become most preferred framework for building interactive components-based web applications.

It is developed by Google and got its first official released in year 2011 with the name “AngularJS”. Later the complete framework was re-written and released with new name “Angular” and “JS” suffix was eliminated. This major released happen with version 2.0 in September 2016. In this major change, $scope and controller were replaced with Components, new @Directive annotation was introduced, support of latest JavaScript standard (at that time ES6), TypeScript support, and Server-side rendering are few to name.

It supports most of Object-Oriented Programming (OOPs) features though some of them may be in different ways/fashion. We can have classes and objects, constructors, access modifiers, dependency injection, services-based communications etc.

So, is Angular a language like C#, Java, JavaScript etc?

Big NO. Angular is a framework which uses language languages like TypeScript. Though other language can be used, most of people uses TypeScript. This TypeScript internally "transpiled" into JavaScript by a JavaScript compiler called "Traceur".

Is Angular a stand-alone web-development framework like asp.net forms, MVC, etc.?

Yes, Angular framework is just like other development frameworks that enables you to build web application in it. Though if you want to integrate it with other frameworks like .net MVC you can do that.

What are important building blocks of Angular?

Below are important building blocks of Angular: -

Modules (a group of related components, directives, services, pipes etc.; In simple terms, it is a class decorated with @NgModule)
Component (a smaller part/block of application; TypeScript is used to write the logic for showing data on HTML. A single web page can be build of many components.)
Template (a blueprint or structure; Easy for plotting data; Written in HTML)
Directives (behavior of DOM element)
Data Bindings
Dependency Injection
Routing
Services

How to start?

It is very easy to start working in Angular. Below are simple steps to setup the environment and then follow the conventions of Angular 😊

Development Environment Setup
Create a "Hello World!" Angular Project
Build and Run the "Hello World!" Project

Step 1: Development Environment Setup

1.(a) Installation of npm and node.js

Here, we just need to install node.js. as it automatically installs npm (nuget package manager) along with it. NPM is used as a package manager. To just make sure the installation is success and version detail, we can run following commands at comman prompt: -

Node -vnpm -v

1.(b) Installation of Angular CLI

Once the npm is available, we can use it to install Angular CLI by running below command at command-prompt-

npm install -g @angular/cli

Step 2: Create a Hello World! Project

It is very easy to create a Angular project using CLI command. Just run the below command –

ng new ProjectName

It will take some time to create the project-

angular ng new project

Step 3: Build and Run the Hello World! project

ng new command creates a project, brings all dependencies to it. To build this, we need to go into the directory created with the same name of project.

cd ProjectName

Then type- ng build

angular ng build