Welcome to Angular 7

The production release of Version 7 of  Angular,Google's popular JavaScript framework for building mobile and desktop applications, is now here.

Angular provides dependency injection, particularly useful for assembling data services for applications, along with use of an HTML template to compose components. In Angular, developers still compose components with an HTML component that connects to TypeScript code for imperative parts of the program.

For more on this topic:

TABLE OF CONTENTS

• Current version : What's new in Angular 7
• Previous version :What's new in Angular 6.1
• Previous version :New features in Angular 6.0
• Previous version : What's new in Angular 5
• The history of Angular's versions

Current version: What’s new in Angular 7

Angular 7 has the following new features:

• Application performance has been improved by automatically adding or removing the reflect metadata polyfill, making applications smaller in production.
• Default bundle budgets have been introduced; they will warn users when applications exceed 2MB. There will be an error if the initial bundle exceeds 5MB.
• With the CLI Prompts capability, the Angular CLI can prompt users to help them make decisions. The ng new capability asks if users want to add routing and what type of styles to use, while ng add @angular/material asks users what theme they want and if they want gestures or animations.
• The CLI documentation has been integrated into the main Angular.io docs.
• For  Angular Material and the CDK (Component Dev Kit), Angular 7 features visual improvements from the Material Design 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.
• Angular Elements components now support content projection via slots.

Where to download the Angular 7 release

You can download Angular 7 release  from GitHub.

Previous version: What’s new in Angular 6.1

Google’s Angular 6.1 arrived in late July 2018. Version 6.1 is slated to be the last minor release in the Angular 6.x line. 

Its router scroll position restoration lets developers configure the router to remember and restore scroll position while the user navigates an application. New events reset the scroll position; pressing the Back button restores the prior position. To turn this capability on, use this setting RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'}). This capability is expected to become the default setting in a future release.

Angular Version 6.1 also adds ShadowDOM Version 1 view encapsulation, by which CSS is connected to components. The component decorator has better cross-browser support and is necessary for content project with Angular Elements. ShadowDOM improves on CSS and DOM, letting developers bundle CSS with markup, hide implementation details, and build self-contained components in vanilla JavaScript.

[ JavaScript is the most widely deployed language in the world. Whether you're a beginning, intermediate, or advanced JavaScript developer ]

Angular 6.1’s scroll position management automatically resets or remembers a scroll when navigating around an application. This capability comes into play when using the Angular router. Developers have been building their own scroll positioning for Angular, but now they get this function out of the box.

Other capabilities in Angular 6.1 include:

• The ability to pipe an object through the keyvalue pipe, which provides an array suitable for use within an *ngFor.
• Schematics chaining has been improved through support for returning a rule from an existing rule. Developers can more dynamically determine rules to follow when designing schematics.
•  TypeScript 2.9 is now supported, in addition to Versions 2.8 and 2.7.

Previous version: New features in Angular 6.0

Version 6 continues an emphasis on being smaller, faster and easier to use. The new features include:

• Version 4 of the Webpack module bundler for JavaScript, generating smaller modules through a technique known as scope hosting.
• 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.
• Support for the RxJS 6 library for JavaScript, reducing bundle sizes for common use cases.
• 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 webpages.
• CLI support for libraries, with developers able to choose ng-packgr for transpiling libraries to an Angular format or use the Bazel tool to build libraries. Previously, developers had to build and package libraries by hand if they wanted to share components and services with other teams.
• Capabilities are included from the Angular Elements project, which packages components as reusable Custom Elements in an Angular application. A future release of Angular will make it possible to package Custom Elements for use in third-party applications, including those not using Angular.
• The Tree component in Angular Material and the Component Dev Kit to help visual tree structures such as a list of files.
• An optional, backward-compatible generic type to support typed nativeElement.

Along with the Angular 6 release, framework packages are being moved to Version 6 as well, including @angular/core, @angular/common, @angular/compiler, the Angular CLI, and Angular Material + CDK (Component Dev Kit).

Features still on the drawing board

But the planned Ivy renderer has been pulled from Angular 6 due to implementation difficulties. It’s unknown if it will arrive in fall 2018’s Angular 7 instead. Ivy inverts how a rendering pipeline works today: Currently, when Angular turns a template into JavaScript to run in the browser, the renderer runs in the browser with capabilities such as dependency. With Ivy, the developer’s code pulls in these capabilities. This lets developers leave out of the application-bundle capabilities that the application does not need.

Also on the drawing board for Angular is Angular for Designers, which is intended to improve the relationship between designers and developers and let designers be more effective with the framework. This initiative features multiple aspects, including a cloud productivity tool allowing for drag and drop of components, which can be loaded directly from NPM. Angular for Designers capabilities will be released over time.

Where to download Angular 6

You can download the Angular 6 release candidate from GitHub or via the terminal command npm install -g @angular/cli@next, then create a project with ng new, or use the command ng update –next to update a project.

Previous version: What’s new in Angular 5

Despite the “5” designation, the AngularJS upgrade was just the fourth release for the framework, which was initially called AngularJS and debuted in 2012. Angular 5’s release took longer than expected, missing previous release targets of September 18 and October 23, 2017.

Angular 5 features

Key Angular 5 features include:

• An emphasis on making it easier to build progressive web apps  , so apps can be cached in the browser. The progressive web apps concept, the product of a joint effort between Google and Mozilla, is about enabling development of browser-based apps that offer a superior, native-like experience. Google is still building support for capability in the command-line interface (CLI).
• A build optimizer that makes the application smaller by eliminating unnecessary code. (The build optimizer is a command-line tool.)
• Making  Material Design components compatible with server-side rendering. Google needs to fix a few bugs before releasing this functionality.
• Angular Universal State Transfer API and DOM support, for sharing code between server- and client-side versions of an application.
• The compiler has been improved to support incremental compilation. The compiler operates as a TypeScript transform, for faster rebuilds.
• Pipes for internationalized number, date, and currency. This increases standardization across browsers and eliminates the need for i18n polyfills.
• To remove more polyfills, the ReflectiveInjector has been replaced with the StaticInjector. As a result, application size is reduced for most developers.
• Multiple names are supported for components and directives, which is useful in helping users migrate without breaking changes.
• Angular 5 has an updated Httpclient.
• CLI 1.5, which generates Angular 5 projects by default.
• For Angular forms, developers can run validation and value updates on blur and submit rather than on every input event.
• The RxJS reactive programming library has been updated to version 5.5.2 or later, featuring operators that eliminate the side effects of code-splitting and tree-shaking problems. Also, RxJS now distributes a version using ECMAScript modules, pulled in by default by the Angular CLI.
• Router hooks have been added for tracking router cycles from the beginning of running guards until completion of activation.

Angular 5 does have an issue with production build source maps, with some maps resulting in undefined sources for errors. Also, many previously deprecated APIs, such as Opaque Token, have been removed.

The history of Angular’s versions

Released in November 2017, Angular 5 followed closely the releases of versions 2 and 4, which arrived in September 2016 and March 2017, respectively, skipping over a version 3 designation.

Although the original AngularJS JavaScript development framework already was a hit with developers, Google undertook a rewrite for the second generation, focused on better performance. “We couldn’t get more performance out of the old architecture,” Green said. Angular 2 was rewritten in TypeScript ,Microsoft's typed superset of JavaScript .“TypeScript let us do static analysis of source code. This is something we can’t do in JavaScript, so it becomes much more predictable,” Green said. TypeScript also lets Angular show developers errors in HTML templates.

Another feature added in Angular 2 was a compiler that sits in between written code and output shipped to a production application. This compiler optimizes the generation of template-rendering; code then can run at maximum speed in JavaScript virtual machines.

Angular 2 also offered a much cleaner component model. Interoperation with technologies such as web components was also a focus in Angular 2.

Angular 4, meanwhile, offered view-engine improvements and code-generation reductions. The Angular 4.3 upgrade, was released in July and featured HttpClient, which provided a smaller, easier-to-use library for making HTTP requests.

Angular 4.3 also has an attribute, @.disabled, for conditionally disabling animations as well as new router life cycle events. Since the 4.0 version, Angular also enhanced animations so parent and child elements can be coordinated across page transitions.

References : www.infoworld.com