Angular JS was mainly built –
- To provide a proper architecture to the application, throughout its life cycle, from UI designing to the testing phase.
- To provide a modular architecture to the application, so that client end and server end of the application can be designed and developed parallelly.
• To enable the developers to design DOM (Document Object Model) independent application logic.
The framework gained substantial popularity among web developers. As promised by Google, to make Angular JS more user-friendly and effective, it is updated twice a year. The first version was released in 2009 & in the latest version, Angular 5 was released on 1st Nov 2017. Developers can soon expect Angular 6 and Angular 7 as well. Although Google is committed to providing the backward compatibility for all the new releases.
In this post, we will take a deeper look at the Angular versions released in 2017.
- Angular 4, in March 2017
- Angular 5, in November 2017
Apart from being a major release jump from version 2, Angular 4 also had many new features along with changes which were non-compatible with the previous versions. Few of these interesting new features were:
- b) Dynamic Components with NgComponentOutlet: *ngComponentOutlet directive enables the web developer to develop dynamic components in a declarative way.
- To ensure that the application package is not heavy due to additional coding, which is not required for the specific application, Animations were put into a separate package of its own, which were earlier part of @angular/core moduled
- ) TypeScript 2.1/2.2: Angular 4 improved the Type security of the applications and the speed at which the ngc-Complier executes. This will help to ensure coding faults like defining a variable & telling TypeScript that “null” and “undefined” can be entered as the variable’s value.
- e) HTTP Request Simplified: Adding parameters to the “HTTP” request, to perform a search operation has been simplified.
f) Service: To perform the get or update operations, a new service was introduced, known as “Meta tags”
On the other hand, when Angular 5 was released, it came with a whole bunch of additional and new features, service improvements and bug fixes. Some of these features were actually, a pleasant surprise for the existing Angular users as well. We have listed down a few very interesting features for our readers so that they can easily understand the difference between the two versions.
- a) Build Optimizer: This is a tool which was included in the CLI to help the developers in creating a smaller bundle for the application. Apart from decreasing the users’ bundle size, the feature also helps in increasing the boot speed of the application for the users.
- b) Compiler Improvements: To enhance faster rebuilds for production and AOT (Ahead of Time) builds, Angular 5 supports incremental compilation.
- c) New Router Lifecycle Events: This new feature was added to enable the developers in tracking the cycle of the router, starting from running guards to the completion of activation.
- d) HttpClient: This feature has been recommended for all the application as HTTPClient was highly appreciated. The framework developer is not suggesting anymore, to use the previous @angular/HTTP library. Developers can update the HTTPClient in 3 easy steps:
1. In each module, replace HttpModule with Http Client Module from @angular/common/http.
- Inject the HttpClient service
- remove any map(res =>res.json()) calls, which are no longer needed.
Apart from the above-mentioned features, the version came with a lot of Bug fixes and performance improvements as well. Few of the bug fixes are mentioned in the below table:
|animations||always fire inner trigger callbacks even if blocked by parent animations||#19753, 5a9ed2d,
|ensure animate Child () works with all inner leave animations||#19006, #19532, #19693, f42d317|
|ensure inner :leave animations do not remove node when skipped||#19532, #19693, d035175|
|bazel||fix the output directory for the extractor to be genfiles/ instead of bin/||#19716, 405ccc7|
|common||attempt to JSON.parse errors for JSON responses||#19773, 04ab9f1|
|router||RouterLinkActive should update its state right after checking the children||#19449, 6f2939d, closes #18983|