All About AngularJS, Angular 2 and Angular 4
As the name suggests, AngularJS is a JavaScript framework. It is an open source framework, used for developing Web Applications. AngularJS was developed in 2009 by Miško Hevery at Brat Tech LLC.
AngularJS is used as a structural framework to develop dynamic web applications and allows us to use HTML as the base language. The features like Data binding and Dependency Injection help developers reduce a lot of manual coding effort and as all these happen within the browser itself, it can team up with any server technology as well.
AngularJS helps in extending the HTML controls using ng-directives. For example, an AngularJS application is represented by ng-app directive whereas the directive used for binding application data to the HTML view is ng-bind. Similarly, to bind the application data to the HTML controls, a directive called ng-model is used.
<!DOCTYPE html>
<html>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app=””>
<p>Name: <input type=”text” ng-model=”name”></p>
<p ng-bind=”name”></p>
</div>
</body>
</html>
Here,
- ng-app: Defines that the owner of the AngularJS application is the <div> element.
- ng-model: Binds the application variable name to the value of the input field.
- ng-bind: Binds the application variable name to the innerHTML of the element <p>
Advantages of AngularJS
a) It can be used to create RICH Internet Applications (RIA)
b) It enables the developers to develop client-side application in a cleaner and better way.
c) It enables the application to be complaint to any web browser as it automatically handles the code suitable for specific browsers.
d) It provides reusable components.
e) It is an open source and a free to use framework.
Hence, using AngularJS as a framework enables developers to build a high-performance web application which is easy to maintain and scalable as well.
Features of AngularJS
A few of the important features of AngularJS are mentioned below:
- Data-binding − It enables the synchronization of data between the view components and the model, automatically.
- Scope –It helps in binding the controller and view. These objects refer to the model.
- Controller − The JavaScript functions which is bound to a particular scope, is known as controller.
- Services — There are several built-in services which come along with AngularJS, for example $https: to make a XMLHttpRequests. These objects are generally instantiated only once in an application.
- Filters — This feature is used to select specific data from an array and return it in a new array.
- Directives — This feature can be used to create custom HTML tags which can be used as new customer widgets. AngularJS comes with built-in directives like ngBind and ngModel.
- Templates — This feature helps is creating a single view based on the information from the controller and model. It can be used as a single file (like index.html) or can be used as multiple views in one page using “partials”.
- Routing — This feature is used for switching views.
- Model View Whatever — This feature is nothing but the traditional MVC architecture, used for designing an application into different parts, each serving different purpose, in the application.In AngularJS, the traditional format of MVC has been modified to Model View Whatever.
- Deep Linking — This feature allows the state of application to be encoded in an URL so that it can be bookmarked and restored when needed.
- Dependency Injection –This feature helps the developer to easily develop an application, understand it and test it.
Angular 2: The Better Angular
Angular 2 is practically a completely new framework but based on the same concepts which helped the Angular 1 to gain the popularity among the developers, incorporated with new ideas and technologies which emerged in the recent years.
Features of Angular 2
Few notable features of Angular 2 are mentioned below:
• Components − Angular 1 was more focused on the Controllers but now in Angular 2, the focus has changed from controllers to components, as components helps in building the application and also help the developers to maintain the application.
• TypeScript –Angular 2 is based on TypeScript, which is an enhanced version of JavaScript and maintained by Microsoft.
• Services — Angular 2 provides an option to create codes that can be shared by different components of an application. These codes are termed as Services.
In addition to the above-mentioned features, Angular 2 has powerful templates, better event-handling capabilities and better support for application for mobile devices, making the life of the developers easier.
Components of Angular 2
The major components that comprise Angular 2 are mentioned below:
• Modules — Each module is created to perform a specific task in the application.
• Component — Components are used to bind the modules together.
• Templates — Template defines the views of the application.
• Metadata — Metadata is used to add additional data in the class, created in Angular JS.
• Service — Reusable component which can be created and can be shared across the entire application
Angular 4
Around 6 months after the Angular 2 was released, the next version of the Angular, Angular 4, has been released. The reason for this release was to ensure that new features are introduced and updating the features of older versions, which became incompatible over the time.
Features of Angular 4
Few important features related to the Angular 4 are listed below:
- Smaller and Faster — Applications developed in Angular 4 consume less space and run quicker as well, when compared to the previous versions
- View Engine — The change helped the developers to decrease the size of the generated code by almost 60 percent.
- Animation Package — The animation has been removed from the Angular core, so that if animations are not used, the additional code won’t end up in the application package.
- Improved *ngIf and *ngFor — The improved feature enables the developer to utilize the if/else design syntax.
- Angular Universal — It is kind of a repository containing the results of various external and internal work done by the Universal team.
- TypeScript 2.1 and 2.2 Compatibility — The TypeScript version has been upgraded improving the rate of ngc.
Source Maps for Templates — For any error caused in any template, source map can be created to provide a meaningful context concerning the original template.
