Please enable Javascript for better experience...
Angular 6 tutorial - Step by Step
By Big | Apr 9, 2018 | In Tutorials | Total Views [ 43 ]
Taged In
(0 Like)
Rate

In this tutorial you will learn about angular 6, environment setup, basic concepts, basic difference between angular 1 and above (angular 2+) etc. Let's learn it step by step.

Introduction

Angular is a javascript framework which is used to build single page web application using HTML,CSS, Javascript and TypeScript language. Typescript is the superset of Javascript. Angular is the name of Angular version 2+. In last one decade we have seen a tremendeous change in Angular versions from Angular JS version 1.X to Angular version 2 to 6. In below section you can see Angular versions.

Agular versions from Angular JS to Angular

Angular started with Angular JS version 1.X in year 2010. Journey started from Angular JS 1.1 in year 2010 to Angular JS version 1.7.2 stable version launched in year June 2018. It came up with n number of concepts like SPA (Single Page Application)and MVC architecture with some powerful features like routing, one-way and two-way bindings, inbuild directives, services, validations and filters which made developer's life easier and application faster and interactive. But if at one side it has so many pros, on the other hand there were few cons also like unnecessary watches used to slower down application performance.

From year 2015 Angular JS totally changed and a new version came into existance which was Angular started from version 2 in year 2015. Angular version 2+ is popularly knowns as Angular and version 1.X is known as Angular JS. Major difference between 1.x and 2+ is architecture i.e Angular 1.x uses MVC architecture where as Angular 2+ uses service/controller. After Angular 2, many more versions came into picture like Angular 4 in 2017 and Angular 5 and Angular 6 which was introduced in late 2017 and early 2018. Angular was facilitated by new language known as TypeScript.

1x vs 2+

Angular 1.x versions and dates

As we discussed above, Angular 1.x came into existance in year 2010 with major features as scope, bootstrap, two-way and one-way binding, MVC (model-controller-view) architecture, routing, filters, directives, services with features as $digest(), $apply(), $watch(), ng-* and etc. Here are the versions and year of release.

  • Version 1.1: Year - 2010
  • Version 1.2: Year - 2012
  • Version 1.3: Year - December 2013
  • Version 1.4: Year - May 2015
  • Version 1.5: Year - Feb 2016 (This version had new features added where you could structured your application similar to Angular 2. In this release module.component() feature arrived where it was possible to create components.
  • Version 1.6: Year - 2016
  • Version 1.7: Year - June 2018

An example of creating component in Angular 1.5

 myModule.component('myComponent', { template: '<h1>Hello </h1>', bindings: { firstName: '<', lastName: '<' }, controller: function() { this.getFullName = function() { return this.firstName + ' ' + this.lastName; }; } }); 
<my-component first-name="'Alan'" last-name="'Rickman'"></my-component>

Angular 2+ versions and dates

You would know this that till the time when Angular 1.3x came into picture in year 2013, development of Angular 2 was already started with Typescript and EC6 (Ecma 6) and in December 2015 beta version of Angular 2 came into picture. You can read these old links of angular blogs from blog.angularajs.org. Till now we have four major stable versions with sub versions like 2x, 4x, 5x, 6x and version 7 and 8 are expected soon. Below are the list of stable versions. Month may vary a little but the years are correct. Let's see.

  • Version 2x: Year - September 2016
  • Version 3x: Year - This version was missed.
  • Version 4x: Year - March 2017
  • Version 5x: Year - November 2017
  • Version 6x: Year - May 2018
  • Version 7x: Year - Expected in September/October 2018
  • Version 8x: Year - Expected in January 2019

Major difference between Angular 1.x and Angular 2+

Angular 2+ is totally different from Angular 1.x in architecture design, rendering, language, UI and many more. Below we will see few difference between two.

Architecture designe

Angular 1.x follow MVC architecture. Angular 2+ uses service/controller design.

Javascript or Typescript

Angular 1.x uses javascript as language whereas Angular 2+ uses typescript which is totally different than Javascript. TypeScript is a superset of JavaScript which helps to build more robust and structured code.

Component based UI

Angular 1.x uses model-controller-view concept to build application and UI whereas from Anuglar 2+ Component based UI came into trend. This helps a developer to divide the applications into components with desired features and enable to call required UI. These have helped to improve the flexibility and reusability as compared to Angular 1.x.

Mobile Support

Angular 2.x is more in mobile support than 1.x.

Project build

Angular 2.x has reduced the bundle size of build as compared to Angular1.x.

In next chapters we will see how to build angular application and will also see new concepts and features used in Angular 2+.

Setting up first Angular 6 application - Installing Node.JS, NPM and Visual Studio Code IDE >>

Share this

About the Author

Big
Rahul Jha (Big)
Founder, Developer dotnet-concept.com
Has working experience in different phases of Software Development Life Cycle (SDLC) in CMS, Gaming, Health Care and Financial Services domain using Agile pattern. Working experience in Design patterns, ASP.NET, MVC, Windows application, WCF, ADO.NET, SQL Server and Test Driven Development (TDD) environment with JQuery, JavaScript, N-Unit, Entity Frameworks, LINQ, Code Refactoring and Business Objects Models.

User's Comments


 
Please SignUp/Login to comment...

Or comment as anonymous...
* Name
* Email ID
Comment