Getting started with Angular6

Jinal Shah  Print 
14 Aug 2018
15 Aug 2018
Beginner
387

Hello Readers, this article is for all those of you, who are new to Angular in general. The main motive behind this article is to make you understand what actually Angular is all about. The idea is to give you a good starting point

Angular is open-source and front-end based web development platform, which performs best when used for building dynamic, SPA (Single Page Application), developed and maintained by GOOGLE.

Traditional Web Application vs. SPA

Now, the next question comes to our mind is, what actually Single Page Application is. Right? Let us first look at how our Traditional Web Application performs?

Traditional Web Application runs from the server’s end. We have a User of the system, who requests Client (let us say our browser), which in turn requests Server. The server simply holds our business logic, data and renders our website.

When the user clicks on our link, Client will send a request to the server. The server will handle this request and will send back a response which contains HTML code which browser will render and final response is shown to the user.

The problem with this approach is that we spend a lot of time sending the request to the server and getting the response. As request and response have to travel through the internet, a lot of time is wasted and, which in turn will lead to the slow performance of the whole website in general. So, as a solution, we need some mechanism where we do not have to send new request upon each action. SPA approach has this facility. Implementation of SPA looks like this:

In SPA, the user still clicks on the link and requests the client but, the request is handled by the client on its own and, renders the HTML page through JavaScript. So, naturally, it raises one more question that, now where is the role of the server?

Server will play its role when the user needs some data that must be processed by the server (say, for example, database operations) or some business logic that must be stored at server side, and of course, at the time of initial loading. In only these cases, we will send the request and wait for the response. In short, much of data will not traverse through the internet, which will make application to run faster.

Sounds interesting right!? One more benefit of SPA is async. Which means we can still render the page and provide instant output to the user. But, at the same time, we will wait for our desired data to arrive from the server’s end and we will again render the page.

So, now the SPA leads to different counts of requests. At the initial loading, request and response will take place. Now assume if the second request does not require server involvement then, no response and request will take place. And if any request requires server involvement then only request will be sent to the server. However, at this point, we can still provide the instant response because of the async.

Angular Version History

Angular is in the market for almost 8 years. The version which you are using currently is not the first version launched. Then which one was the first one? Let’s quickly move to the Version History for Angular.

Initially, the Angular team came up with one single name “Angular2” for two different approaches. But this bottleneck had put developers in dilemma. So team bifurcated this name into two. “AngularJS” refers to the version 1.x and “Angular” refers to the version 2 and above.

AngularJS

Firstly, it was released in October 2010 on GitHub. Version 1.0 was launched in June 2012. It is referred to as “AngularJS” or “Angular 1.x”. It is based on javascript. It uses the client-side Model-View-Controller(MVC) and Model-View-ViewModel(MVVM) to make development and testing much easier.

Angular 2.x.x

Angular 2 is the complete rewrite of Angular 1.x. It was announced in September 2014. Angular2 is Typescript based framework. Typescript is a superset of JavaScript, Microsoft planted seeds and Angular team adopted it for development purpose. It is based on service and component concept.

Angular 4.x.x

After skipping the version 3, yes, to avoid confusion with the Angular’s router version (3.0.0), the team came up with one higher version in March 2017. Angular 4 is compatible with Angular 2 because the team did not want to break the whole ecosystem. Angular 4.3 was the minor release, which means it does not contain any drastic changes.

Angular 5.x.x

Angular 5 was released in November 2017 to support Progressive Web Apps and material design.

Angular 6.x.x

Angular 6 was the major release in May 2018. It focused less on the framework but more on making it easier to move ahead with Angular in future.

You all must be wondering that what is the major difference in Angular 1.x (AngularJS) and Angular (version 2+)?

  1. The major difference between these two frameworks is that AngularJS is a popular JavaScript Framework and Angular is TypeScript Framework.

  2. Whereas, AngularJS was not mobile-oriented, but Angular was developed keeping mobile phase in mind.

  3. Angular has more language choice than AngularJS.

  4. With AngularJS does not support SPAs whereas, Angular does incorporate this phenomenon.

  5. The controller concept of AngularJS was replaced by component in Angular v2.

Advantages of Angular

Now you all must be knowing that Angular V2 has more Advantages. Let us dive deep into the same. So, as a developer one question continuously revolves around our mind is that, why actually should I use this over other technologies. Right!? Let me give you the quick glimpse of the benefits.

  1. Component Based

    The whole architecture of Angular is component based, which allows reusability and modularity.

  2. Cross Platform

    Ionic, React native and Native Script are such examples of mobile application support given by Angular.

  3. TypeScript writes JavaScript

    TypeScript plays a vital role in the place where you don’t know javascript. Here you write a simple program in typescript and it automatically gets converted to JavaScript i.e. (.ts) file is converted to (.js).

  4. Services

    They are sets of code which can be shared by different Components of an Angular 2 application. So if we have data component which gets data from a database this can be shared so that it could be used by other components when required. Which brings consistency.

  5. Productivity

    With greater consistency, you get the added benefit of productivity. When you learn how to write one component you can write code in all other components with the same guidelines keeping in mind.

  6. Debugging Easy

    Typescript code can be debugged easily in the browser as long as proper file binding is done at the compile time. But still, we are not satisfied with this. Right!? Let us take a tour to its real-life feasibility.

Who are using Angular?

Google, Paypal, Tata Consultancy Service careers are some of the well-known companies who have used AngularJS as a development platform, CVS shop, Onefootball, Microsoft customers, Citibank Customer Service have used Angular as their development platform.

So, now I’m hoping that you guys are keen to learn Angular. So let’s get started! Let us move to the Prerequisites for learning Angular.

Getting Started with Angular?

According to me, to learn anything not only technologies, the first thing you require is your Interest. But, let me first clear the air, that knowledge of Angular 1.x is not required to learn Angular V2 and more. So just sit back and relax!!

First thing which comes in our mind is which IDE shall I use. Right? Yes, you can use any editor of your choice Like Sublime Text, Visual Studio Code etc. But I prefer using Visual Studio Code developing the app because it is free, it has various extension availability, moreover, typescript snippets are there which will add frequently used code snippets. Once the choice regarding IDE is done.

Next step is Node and NPM. If Node.js is not there on your machine, Install Node.js Version >= 5.0. You can get Node from following site https://nodejs.org/en/

NPM comes along with Node, so installing node will install Node and NPM at once. After performing this step just check the version of Node and Npm to ensure proper installation by firing following command :

node –v
npm –v

If your command prompt answers the versions for npm and node. Then you are good to go to the next step which is to Install angular CLI(Command Line Interface)

Angular-cli command line utility responsible for quick project generation and setting up required components and much more. Type following command at your command prompt to install angular CLI.

npm install –g @angular/cli (-g stands for Global).

Once you are done with this step, angular-cli is installed at your machine. Now you can create a new project for angular by firing:

ng new (yourAppName)

After this, go to the working directory and issue the following commands one by one run your application.

cd (yourAppNameFolder)
ng serve –o

If this is done, you are good to go!!

Let's Start with Angular using online editor StackBlitz

Alternatively, you can use online IDE StackBlitz for Angular development, which is powered by Visual Studio Code. Here, StackBlitz IDE is using the Angular template as created by Angular cli tool with no build configuration.

Understanding Angular App Folder Structure

Now, let us switch to the next step after installation. You might get to see the whole lot of files and folders once your project is made. Right!? Don’t worry. Let’s clear it out. The folder structure looks something like this:

  1. e2e. stands for end to end testing. It is the way to ensure correct working of components together to provide desired functionality.

  2. node_modules is the place where our all third party library resides, which can be used for development purpose.

  3. Src folder contains the actual source code for development. As you can see in the picture, src folder has 3 subfolders: App, Assets, Environment.

  4. App folder is the prominent part of Angular. It has all the components and modules of the application.

  5. Assets folder is the place where we can store our images and icons.

  6. Environment folder has two files: environment.prod.ts stores configuration for production environment and environment.ts stores configuration for development environment.

  7. favicon.ico. is the icon file which is displayed on the browser when you run the application.

  8. index.html is the first html file that is loaded when your application is run on browser.

  9. Main.ts is doorway for our application. It is the typescript file. Here we can bootstrap(load) our main module using methods.

  10. Pollyfills.ts is the scripts which eliminates the need to set up everything. In the other words, it makes our application compatible with different browsers. It bridges the gap between our Angular app and browser.

  11. style.css is the file where global styles for our application resides.

  12. test.ts is used for testing purpose.

  13. tsconfig.app.json has the root files and the compiler options.

  14. angular-cli-json is standard configuration file.

  15. .editorconfig is used to define standard and consistence coding patterns for team development purpose.

  16. .gitignore is used when exporting your files and folders to github.

  17. karma.conf.js is the file which is used for unit test.

  18. package.json is the file which holds metadata for projects such as project name, version and handle dependencies of the project.

  19. tsonfig.json file has setting to convert your typescript code into javascript code to make the browser understand our code.

  20. tslint.json file checks your code for errors. It can be customised according to your own rules.

Yes, so file and folder structure understanding are very important for any developer. Right!? Angular provides many development and testing tools. And this is the thing we as a developer want.

Summary

So, now let us take a quick recap of what we have understood so far. Angular is a framework used for building client-side application. It is written in typescript, but it converted into javascript to bridge the gap between browser and typescript. It revolves around two major concepts that are, components and services which brings productivity and consistency. What I have included in this article is the just a basic overview, for Angular Sky is the Limit. Keep going and coding!!

Hands-on Learning
Free Interview Books
 
+