Introduction to Angular 4 : A beginner’s guide.

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

Hang in there, SPA isn’t the SPA that you wish to go. SPA in web terminology stands for “Single-Page Application”. Before we take a deep-dive into Angular and know how to get started with one such Application, let’s get to know about the single…, well the SPA’s, thanks to the short-hand notations.

SPA

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.

Wondering how it happens in a jiffy?

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.

How do we create these SPA’s?

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

• Angular.
• Backbone.Js
• React.Js
• Knockout.Js

That’s not the end, there are many more. So, let’s jump in to get a taste of Angular now.

I know this is so much but thanks for making it till here, you are now about to embark on a journey through Angular 4.

Let’s welcome Angular 4.

Angular 4

What is Angular ?

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.

Angular 1 vs Angular 2 vs Angular 4:

Angular JS or Angular 1 was released by Google early in 2010. It was used for building client-side web apps. Initially different versions of it were created to add extra feature sets.

However, Google has completely rewritten the framework to meet the new needs of web apps and released what is called the Angular or Angular 2 in 2016. In fact Angular 2 itself is written in Typescript.

Later, angular 4 and then Angular 5 are released with some more features, developer productivity and small payload size.

The Angular CLI:

Assuming you are comfortable with node and npm, let’s get the angular CLItool. Open node.js command prompt and type in the command:

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.

Curious to 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 my-angular-app

No pain => No gain

Sit back and relax, as it takes time to install all the dependencies required.

Congrats! Now that you have set up your first angular app, you need to switch to that project

cd my-angular-app

You can now open the project in your favorite code editor and start working. Here, I’m using Visual Studio Code. The folder structure should look something like this:

Gentle reminder: Note that the .ts extension refers to typescript files and the typescript code is eventually being converted to javascript which is called transpiling.

You can install extensions in your code editor. For visual studio code, look for the following :

Let’s run the project:

Angular CLI provides us with the serve command.

ng serve

It lets our project run on http://localhost:4200. Alternatively, you can use the

ng serve --open

to let it automatically open the browser window running the angular application. Take a deep breath and here you go, Hurray! You can now see the application running live.

Let’s play around with it and make some changes:

1. In the app.component.ts file, try to change the title.

export class AppComponent {
title = 'My-angular-app';
}

2. In the app.component.css file, provide some styling.

h2{
color:green;
}

3. In the app.component.html file, create your own mark-up and observe that as you make changes, the application reflects those changes automatically.

<div style="text-align:center">
<h1>Welcome to {{ title }}!</h1>
<img src="" width="300" alt="Angular Logo" 
</div>
<h2>Here is what I learnt now: </h2>
<ul>
<li><h3>Installing Angular cli.</h3></li>
<li><h3>Creating a new angular project.</h3></li>
<li><h3>Running the newly created project.</h3></li>
<li><h3>Making changes to the project.</h3></li>
</ul>
<h1>CONGRATULATIONS</h1>

Woah! We are done with the introduction to angular 4. This is just an introduction to setting up an angular 4 project, to know more go ahead and checkout these awesome resources.

Resources:

1. Angular 4 quick start
2. Angular cli

Happy Coding!