Angular Introduction


What is Angular JS?

AngularJS is a JavaScript framework. It can be added to an HTML page with a 'script' tag. AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.

Mesko Hevery, a Google employee, started to work with AngularJS in 2009. AngularJS version 1.0 was released in 2012.

  • The ng - app directive defines an AngularJS application.
  • The ng - model directive binds the value of HTML controls(input, select, text area) to the application data.
  • The ng - bind directive binds application data to the HTML view.

< ! DOCTYPE  html >
< html >
< script  src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" >< /script >
< body >
< div  ng-app ="" >
  
< p >Person Name:  < input  type ="text"  ng-model ="name" >< /p >
  
< p  ng-bind ="name" >< /p >
< /div >
< /body >
< /html >


AngularJS starts automatically when the web page has loaded.

  • 1. The ng-app directive tells AngularJS that the div element is the "owner" of an AngularJS application.
  • 2. The ng-model directive binds the value of the input field to the application variable name.
  • 3. The ng-bind directive binds the content of the element to the application variable name.

Advantages of AngularJS:

• Great MVC

As earlier, most frameworks require programmers to splitting the app into multiple MVC components. After that, the programmer has to write a code to put them together again. AngularJS strings it together automatically. That saves time, and reduces the app’s time-to-market. It provides the capability to create Single Page Application in a very clean and maintainable way.

• Intuitive

AngularJS is more intuitive as it makes use of HTML as a declarative language. Moreover, it is less brittle for reorganizing.

• Comprehensive

AngularJS is a comprehensive solution for rapid front-end development. It does not need any other plugins or frameworks. There are a range of other features that include Restful actions, data building, dependency injection, enterprise-level testing etc.

• Unit Testing Ready

AngularJS is unit testing ready, and that is one of its most compelling advantages


Drawbacks of using AngularJS


• Confusion

There are multiple ways to do the same thing with AngularJS. Sometimes, it can be hard for novices to say which way is better for a task. Hence, it is imperative for programmers to develop an understanding of the various components and how they help.

• Lagging UI

If there are more than 2000 watchers, it can get the UI to severely lag. This means that the possible complexity of Angular Forms is limited. This includes big data grids and list.

• Name Clashes

With AngularJS, you don’t have the ability to compose many NG-apps on the same page. This can cause name clashes.


What is Angular 2?

• Angular version 2.0 was released in September 2016.

• It is a completely revised component-based JavaScript framework in which an application is a tree of loosely coupled components.

• It is a more advanced version of angular JS.

• It is more of an "all in one" framework so it also helps in creating a single website without getting trapped into different JS frameworks.

• It is a modular framework in which our code is divided into individual procedures that offer a similar kind of functionality, hence improving the testing, up gradation and maintenance of the application.

• It has a lot of useful features such as- server-side rendering, cross-platform, and supports more languages than any other framework.


New Features of Angular 2:

• Universal server rendering- It is the library which is used to make building universal apps a smooth experience.

• A mobile toolkit- It provides all the mobile toolkit and techniques to build high-performance mobile applications. The web applications which are developed using the mobile toolkit can be loaded on any device with or without internet connection which is a great advantage.

• A command line interface-it can generate components, routes, services, and pipes with the help of commands.

• Data binding- data binding has been improved in Angular 2. So, whatever DOM element property we need to bind, we just wrap it in square brackets. For Example-

• Modular- various modules have been removed from angular’ s core, which has resulted in better performance.

• Modern- Angular 2 has been targeted as modern browsers in which various hacks that make angular harder to develop have been removed.

CLI Command to start working with angular 2- Step 1: Install the Angular CLI To install the CLI using npm globally, open a terminal/console window and enter the following command- npm install -g @angular/cli Step 2: Create a workspace and initial application To create a new workspace and initial app project, run the CLI command ng new and provide the name my-firstapp. ng new my-firstapp Step 3: Serve the Application Angular includes a server, so that you can easily build and serve your app locally. 1. Go to workspace folder(my-firstapp). 2. Launch the server by using CLI command ng serve with –open option. cd my-firstapp ng serve –open The ng serve command launches the server, watches our files and rebuilds the app when we make any changes to those files. The –open or -o automatically opens our browser to http://localhost:4200/.


What is the difference between Angular JS and Angular 2?


Angular JS Angular 2
Released by Google in the year 2010 Released in Sept 2016
JavaScript-based framework for creating Single Page Application. Complete re-write of AngularJS version.
Still supported but no longer will be developed. It's updated version regularly released because of Semantic Versioning.
The architecture of AngularJS is based on MVC. The architecture of Angular 2 is based on service/controller.
AngularJS was not developed with a mobile base in mind. Angular 2 is a mobile-oriented framework.
AngularJS code can write by using only ES5, ES6, and Dart. We can use ES5, ES6, Typescript to write an Angular 2 code.
Based on controllers whose scope is now over. The controllers are replaced by components, and Angular two is completely component based.
Factory, service, provider, value and constant are used for services The class is the only method to define services in Angular2
Run on only client-side Runs on client-side & server-side
ng-app and angular bootstrap function are used to initialize bootstrapmodule () function is used to initialize

What is the difference between Angular 2 and Angular 4?


Angular 2 Angular 4
Released in Sept 2016 Released in March 2017
The code generated using Angular 2 is bigger, and the file size is also larger. Angular 4.0 has reduced the bundled file size by 60%. Thus, code generated is reduced which helps to accelerate the application performance.
Angular 2 is not backward compatible with Angular JS. Angular 4 is backward compatible with Angular 2 for most applications.
There are no specific no proper disapproval phases to adjust codes There will be proper disapproval phases to allow developers to adjust their code
There is no animation feature offers in Angular 2 Animation features are pulled out of @angular/core and included into their package

What is the difference between Angular 4 and Angular 5?


Angular 4 Angular 5
Released in March 2017 Released in November 2017
Support for Router ParamMap New Router Lifecycle Event
Dynamic Components with NgComponentOutlet Compiler Improvements
Typescript 2.4 with this version that functions as a JavaScript superset that can be used for optional static typing, interfaces, and classes Angular 5 comes with build optimizer which is a part of the platform's command like a tool.
HTTP Request Simplified Optimization with HttpClient Feature
Includes Animation Package Internationalized Date & Currency