fbpx
Select Page

Difference Among Angular 8, 7, 6, 5, 4, 3, 2- Breakdown, New Features, and Changes part 1:

Introduction:

In this blog, I would like to give in-depth information about why various versions of angular like AngularJs, Angular2, Angular4, Angular5, Angular6, Angular7 and Angular 8. The below figure shows the versions of angular till date.

Asfswfw

This blog is divided into parts. Part 1 gives the in depth information about the AngularJs features, architecture etc. Below figure shows the all released angular version till date.

The first version of angular was released in OCT 20 ,2010 known as AngularJs. AngularJS was produced by Misko Heavery. AngularJs is freely available web application framework maintained by Google. He had built a structure to handle the limitations of HTML and also taking the best practices of the in build libraries which were never ready before. It lay the base of the current front-end application development. Angular JS was one of the best platforms used to make single-page application which can, easily testable well structured, and maintainable. It is a JavaScript Model view controller framework .To learn the AngularJs framework you need to know about the following thing:

  • Prior knowledge of HTML, CSS and JavaScript
  • Understanding of Model-View-Controller (MVC) concepts.
  • JavaScript including creating functions, managing

Events etc to learn more click here.

AngularJS having the predefined toolset that will help to build application in structured and rich web application in modular style. AngularJs can manipulate   HTML using directives add functionality. AngularJs is very helpful to create powerful dynamic web application. you can also create your own directives or dynamically change the DOM manipulation logic. AngularJS also implement two-way data binding to connect web page with the business logic this  means that if you do any changes in the view part it modify in the model part no need to use  event handling. AngularJS gives simplified code and allow using API Calls to reuse the code. It’s very flexible to communicate with the server. Let’s start with AngularJs for that need to install the AngularJS framework.

AngularJS Installation Steps:

To install the AngularJs Follow the below instructions:

Step 1:  Open this link https://angularjs.org/

Step 2: It will give two options –Try the newer Angular or      Download AngularJS

Step 3:  Click on the download button after that below window open

 

Step 3:  Click on the download button after that below window open

Angular 1

Step4:  Click on the download button then it will download        angular.min.js.

Step5: Include this angular.min.js file into html page.

Great Features of AngularJS

In a time of single page application development, AngularJS could be the definitive way for you to get at the forefront of the competition. Below figure shows the top features of AngularJS.

Features Of Angularjs

For Free Demo classes Call: 8237077325
Registration Link: Click Here!

  1. The MVC Framework

To devolve the dynamic application angularjs provides the MVC (model view controller) architecture .As per the technical concern you already know any application built with different modules. All these modules having different logic that are used according to the requirements. So developers first need to create different module and combine them together. In short we reuse the code again and again due to that lots of time saves.

  1. HTML User Interface

HTML user interface is again another great feature of the angularjs is used to build the front end of the application.Html language is easy to understand and having the less number of tags. So for the easy, quick and properly arranged code angularjs uses the html as user interface language.

  1. Access to the POJO Model

POJO stands for “Plain Old JavaScript Object” model which offers planned logic and objects. For the highly interactive and user-friendly apps developers can get the clear code.

  1. Behavior with Directives

Directives is another great feature of the AngularJs which helps to improve the angular functionality. Directives easily add attributes manipulate elements. Here no requirements of the document object manipulation concept without that the elements can be manipulated. Here there is no need to manipulate the DOM element directly. AngularJs directive initialize with ng so anything with ng is a directive.

Example:

Example 43

  1. ng-app Directive:

ng-app is the initialization of the angular application. Here we cannot write any code related with ng-app but still we are seeing the example related with directives.

  1. ng-model Directive:

ng-model is again one directive of the angular which binds the property  called fullname   with scope. So to bind with the html view model with property value  you need to bind fullname with input field using interpolation property {{fullname}} .

  1. c) ng-init directive

Basically ng-init directives are used to bind the data and display on the browser for more details see below example.

  1. d) Data binding Expression:

Data binding expressions are used to do the mathematical operation with the help of operands and operators directly. Data binding expressions write within the double curly braces like {{expression}}.Below example takes the data from the init directive ,initially set the value.

Example:

Example 44

Result:

Number1: 12

Number2: 10

Result : 120

  1. e) ng-repeat directive

ng-repeat directives is used to enhance the html element easily .we can bind and enhance actually data which is retrieved from the controller. For example, we store the product information into the array and iterate this data using ng-repeat below example shows in detail. Days is the array which having the days of the week  and <ul> ,<li>is the html element  which dynamically change.

Res

Result

Looping with the ng-repeat Directive

  • Monday
  • Tuesday
  • Wednesday
  • Thursday
  • Friday
  • Saturday
  • Sunday

Using Filters:

Angularjs having the concept of filters  which are used to modify the data after the processing like user sends the user name in capital letters and we want to display on screen as a small letters then there is a need to apply the filtering concept in angular js. To apply the filtering on the data we need to use the pipe  [|] Which is  filtering separator between the data and filter. In angularjs some filters available in-build like uppercase, lowercase etc. Below example shows the filtering concept in detail.

Example 2:

Example 45

Result:

Filtering and sorting data using filter in angularjs

  • ANGULAR
  • ANGULARJS
  • ANGULAR2
  • ANGULAR4
  • ANGULAR5
  • ANGULAR6
  • ANGULAR7
  • ANGULAR8

Sorting and filtering data using filter

Filter by Name:

An

Result:

  • ANGULAR
  • ANGULARJS
  • ANGULAR2
  • ANGULAR4
  • ANGULAR5
  • ANGULAR6

In the above example we are trying to filter each employee name by filter . the “nameText” is the model used in the input field. Suppose we type their as ga then all the names that start with an then all the employee names starts with an display on the screen.

For Free Demo classes Call: 8237077325
Registration Link: Click Here!

AngularJS  framework with MVC design pattern.

Now we are going to see how the MVC architecture is used to change the above example.

Views, Controllers and Scope

View – View is the presentation layer of any application. in view part all the  HTML activity happen using the directives, filters and data binding.

Controller -Controller specifically used to work on the data required by the model. Controller contains the all JavaScript code.

Scope – Scope is the intermediate of the controller and the view scope is used to exchange data between controller and view.

MVC Architecture

MVC can separate the application logic from the presentation layer and supports partition of concerns. The controller gets all user requests after which it works with the model to retrieve any information needed by the presentation layer. The information retrieve by the controller is then used by the presentation layer to create a final response. The architecture of MVC can be represented as follows:

Mvc Architect

 

Model is responsible for the current state of web application data. It will receive requests from presentation layer and follow the controller rules. Model sends request to the back end server to save data in backend and retrieves the data from backend using server side scripting language. Model can respond to presentation layer request.

View is responsible for arranging the data that is developed by the model and displays the output to the user screen.

Controller will control the complete application. It receives requests from the presentation layer. Controller will combine with the model to organize the records and reply to the view request.

Let’s illustrate step by step with the help of example.

 

 

Step 1: Create first controller

 

function SPController($scope) {

//code here.

}

First step is to create controller with a name SPController. Beforehand, controller is mentioned as a JavaScript constructor function. A single argument with $sign known as scope is passed. Every controller has its meticulous scope. Scope binds both view and controller.

 

Step 2:  Module Creation

 

Model is nothing but the JavaScript object. It lives within controller. To make model easy to get to in the view, a $scope object is needed.

 

myApp.controller(‘SPController’, function($scope)  {

$scope.users = [

{name:’Smith’,age:23},

{name:’Mike’,age:24},

{name:’John’,age:26},

];

});

In the above code, a model named ‘users’ is created, which is an array of objects.

 

Step 3: Putting it collectively into the view

 

Now, controller is group and models are defined. To display data to the client side, a view has to be created. Below code creates the view part.

<h1>AngularJS MVC Architecture</h1>

<div ng-controller=”SPController”>

<ul>

<li ng-repeat=”user in users”>

 

</li>

</ul>

</div>

Appjs

Output:

Summary

        AngularJS provides a strong “Single Page Application” structure for building strong client-centric applications. These are the few live examples of popular apps that use AngularJS like video-streaming application ,user-review-application, travel app, weather-app,ecommerce ,social applications etc.lets see some advantages of angularjs like Built by Google, Great MVC,Comprehensive,Unit Testing Ready etc.AngularJs also having some drawbacks Confusion,Lagging UI,Name Clashes etc. Due to some disadvantages Google decided to release the next version of angularjs which is the superset of angularjs.

 

Author: Manisha Jadhav | SevenMentor Pvt Ltd

For Free Demo classes Call: 8237077325
Registration Link: Click Here!

Call the Trainer and Book your free demo Class for now!!!

call icon

© Copyright 2019 | Sevenmentor Pvt Ltd.

 

Pin It on Pinterest

× How can I help you?