AngularJS is not a single piece in the overall puzzle of building the client-side of a web application. It handles all of the DOM and AJAX glue code you once wrote by hand and puts it in a well-defined structure. This makes AngularJS opinionated about how a CRUD (Create, Read, Update, Delete) application should be built. But while it is opinionated, it also tries to make sure that its opinion is just a starting point you can easily change. AngularJS comes with the following out-of-the-box:
- Everything you need to build a CRUD app in a cohesive set: Data-binding, basic templating directives, form validation, routing, deep-linking, reusable components and dependency injection.
- Testability story: Unit-testing, end-to-end testing, mocks and test harnesses.
- Seed application with directory layout and test scripts as a starting point.
- Angular help developer to develop Rich Internet Applications (RIA).
- Angular has an options to write client side application using Javascript using a clean Model View Controller (MVC) mechanism.
- Code or Applications written in Angular JS are cross browser compatible. Angular JS framework automatically handles javascript code suitable for each browser.
- AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache license version 2.0.
- AngularJS is a framework to build large scale, high performance, and easy-to-maintain web applications.
Angular has the following key features which makes it one of the powerful frameworks in the market.
- MVC – The framework is built on the famous concept of MVC (Model-View-Controller). This is a design pattern used in all modern day web applications. This pattern is based on splitting the business logic layer, the data layer, and presentation layer into separate sections. The division into different sections is done so that each one could be managed more easily.
- Data Model Binding – You don’t need to write special code to bind data to the HTML controls. This can be done by Angular by just adding a few snippets of code.
- Writing less code – When carrying out DOM manipulation a lot of JavaScript was required to be written to design any application. But with Angular, you will be amazed with the lesser amount of code you need to write for DOM manipulation.
- Unit Testing ready – The designers at Google not only developed Angular but also developed a testing framework called “Karma” which helps in designing unit tests for AngularJS applications.
- Angular 2 is faster and easier than Angular 1.
- It supports the latest version of browsers and also supports old browsers including IE9+ and Android 4.1+.
- It is a cross-platform framework.
- Angular 2 is mainly focused on mobile apps.
- Code structure is more simplified than the previous version of Angular.
Angular 4 Features
Angular community has introduced some significant changes to Angular 4 and therefore, the major version number has been changed from 2 to 4 (skipping 3). The reason behind directly jumping to Angular 4 and skipping the version 3 was that the router package was in version 3.x, so instead of putting everything to 3.0 and the router to 4.0, the team chose to upgrade the versions of all the ng – modules to 4.0.
The following points introduced in Angular 4.0,
- TypeScript 2.1+ Required – TypeScript 2.1 and 2.2 have brought really nice features you should check out. Angular 4 now supports them (and you will soon be able to activate the new strictNullChecks TypeScript option for example).
- ModuleID Removed – They have added a new SystemJS plugin which dynamically converts “component-relative” paths in templateUrl and styleUrls to “absolute paths” for you.
- Ahead of Time Compilation – View Engine: As we know, in AoT mode, Angular compiles your templates during the build, and generates JS code whereas in case of Just in Time mode, this compilation is done at runtime. Now, AoT has several advantages, like we will get to know that our templates is incorrect at build time instead of having to wait at runtime, and the application starts faster (as the code generation is already done). The downside of AoT that people were facing was that the generated JS is generally bigger than the uncompiled HTML templates. So, in the vast majority of applications, the package is in fact bigger with AoT. The team worked quite hard to implement a new View Engine, that produces less code when you use the Ahead of Time compilation. The results are quite impressive on large apps, while still conserving the same performances.
- Animations – Angular Team have segregated animation package from @angular/core as a separate and dedication package. Therefore, if you don’t use animations, this extra code will not end up in your production bundles.
- Template is now ng-template – The template tag is now deprecated, which mean you should use the ng-template tag instead. It still works though. Now Angular has its own template tag called ng-template. You will have a warning if you use the deprecated template somewhere when you update to Angular 4, so it will be easy to spot them.
Angular 6 Features
- Angular Elements – To create a widget or component that can be included in any existing web page, was not a simple task in earlier versions of Angular. But in Angular 7, it can be done with the help of Angular Elements. The Angular Elements package will give us the ability to create an Angular component and then publish that component as a web component which can be used in any HTML page (even if that page is not using the Angular framework) in other environments.
- Service Worker Support – Service workers are basically scripts which run in the web browser and manage to cache an application. Service workers were first introduced in Angular 5. In Angular 7, service workers come with some bug fixes, including some new functionalities. So when we deploy the latest version of the application, we may need to deactivate or uninstall the existing service worker(s).
- Template Element – The <template> element is removed from Angular 7 framework and instead of using <template>, use <ng-tempalate>.
- i18n – i18n is coming with runtime rendering so that there is no requirement to build one application per locale.
- Ivy Rendering Engine – The introduction of Ivy rendering engine experience increases the speed and decreases the size of the application.
- Bazel Compiler – Bazel Compiler is actually a build system or mechanism which is used to build nearly all software at Google. This compiler only rebuilds what is necessary to build.
- RxJS 6.0 – Angular 7 now used RxJS 6 internally. These changes provide developers an increase in performance and are easier to debug AJAX call stacks and improve modularity also, making it as backward compatible as possible.
- A new method of connecting modules and services, in which services can be “tree-shakable,” meaning they can be left out of an application if not used.
- The Angular command-line interface, bringing commands such as ng update, for updating dependencies and code. Another command in the CLI, ng add, helps developers more quickly add application features, such as starting out with a Material Design application rather than with a blank application. Material Design is Google’s language for designing applications. The ng add command also supports turning applications into progressive web apps, which support offline web pages.
- The Tree component in Angular Material and the Component Dev Kit to help visual tree structures such as a list of files.
- Version 4 of the Webpack module bundler for JavaScript, generating smaller modules through a technique known as scope hosting.
Angular 7 Features
- CLI Prompts – Angular CLI has updated to v7.0.2 added some features like now it will prompt users while typing common commands like ng-add or ng-new, @angular/material to help you discover built-in features like routing or SCSS support. With Angular 7, while creating new projects it takes advantage of Bundle Budgets in CLI.
- Application performance – Angular team discovered blemish that Angular developer were including the reflect-metadata polyfill in production, which is only needed in development, In order to fix this, part of the update to v7 will automatically remove it from your polyfills.ts file, and then include it as a build step when building your application in JIT mode, removing this polyfill from production builds by default.
- Angular Material & the CDK – Angular Material and the Component Dev Kit (CDK), Angular 7 features visual improvements in Material Design which received a major update in 2018, refresh as well as virtual scrolling, for dynamically loading and unloading parts of the DOM to build high-performing, large lists of data. Also, applications can be fitted with a drag-and-drop capability by importing the DragDropModule or the ScrollingModule.
- Virtual Scrolling – The scrolling package <cdk-virtual-scroll-viewport> provides helpers for directives that react to scroll events. Virtual Scrolling enables loading and unloading elements from the DOM based on the visible parts. It enables a performant way to simulate all items being rendered by making the height of the container element the same as the height of a total number of elements to be rendered, and then only rendering the items in view makes very fast experiences for users with very large scrollable lists.
- Angular Compatibility Compiler (ngcc) – Just like the name suggests, this compiler will be used to transform the node_modules compiled with the ngc to node_modules which are compatible with the new Ivy renderer. Angular Compatibility compiler converts node_moduls compiled with ngc, into node_modules which appear to have been compiled with ngtsc. This conversion will allow such “legacy” packages to be used by the Ivy rendering engine.
- Angular Do-Bootstrap – It’s used for bootstrapping modules that need to bootstrap a component. Angular 7 added a new life-cycle hook (ngDoBootstrap) and interface (DoBootstrap).
- Better Error Handling – Angular 7 has an improved error handling for @Output if property is not initialized
