Wednesday, 19 December 2018

Introduction to Angular6: A beginner’s guide

Angular, the most widely used framework for creating SPA’s.

SPA in web terminology stands for "Single-Page Application".

Why Single-Page Apps?

While traditional web apps require consistent rendering of data from server leading to a page-reload for every app request, the spa’s however, avoid this performance issue by loading content on the browser using Javascript, so most of the work is done on client-side.

If you are wondering whether the app is really a single page then, the answer is yes! there is only one URL or in simple terms one html page as such,and everything is rendered on the same page, you can fill a form, click a link and do almost everything on that page.

Essentially, it creates an illusion of navigating through pages which in fact doesn’t happen in reality. This leaves the user with a reactive experience.

How SPA Sites work ?

Our prime savior here is- AJAX. As spa’s heavily depend on AJAX calls to communicate with server, the server responds not with the markup-data but with json. This is how the presentation is separated from services making it more dynamic and responsive to users by reduced page-refreshes.

What frameworks does support SPA’s?

Well, thanks to these javascript frameworks we are able to build fully functional apps.

  1. Angular.
  2. Backbone.Js
  3. React.Js
  4. Knockout.Js
That’s not the end, there are many more.

Lets Jump onto Angular6

Angular is a Javascript framework to build more interactive web apps. It is designed for both Web, Desktop and Mobile platforms. While, we create apps using HTML, CSS and Javascript, Angular requires us to know Typescript (a typed superset of Javascript that scales), kind of stricter version of Javascript provided with OOPS features. Although, other alternative could be Dart, typescript is the most widely used language for Angular apps.

Note: Typescript is not ES6 or ES7. Browsers do not understand typescript , so the typescript code is transpiled to javascript first.

The Angular CLI:

> npm install -g @angular/cli
Wait until this command gets the angular CLI tool installed in your system. Now you can refer to the angular CLI using the ng command.

Let's create a project?

We want to create a new project, so angular provides us with the newkeyword. Change to the folder where you want to create the new project and type in the command
> ng new angular-app-name
Congrats! Now that you have set up your first angular app, you need to switch to that project
> cd new angular-app-name
> ng serve
It lets our project run on http://localhost:4200. Open the browser and run URL http://localhost:4200

Play around with it and make some changes. Let's catch up in next post