Fundamentals of Angular and its latest feature

In this tutorial, we will be discussing Angular Fundamentals. This part of the tutorial highlights the following content:

Fundamentals

Angular
Some of the Angular Fundamentals are:

Observables

 
Observables in Angular applications offer support for transferring the messages between publishers and subscribers. Observables provide benefits especially when it comes to event handing and asynchronous programming in Angular applications. You create an Observable instance as a publisher and that instance defines a subscriber method. This subscriber method defines how to obtain or generate the messages that are to be published.

HttpClient

 
Httpclient is a library in Angular that helps in handling http requests. Angular 6 uses the updated version of HttpClient which resides in the package named @angular/common/http. The old version of HttpClient is still available in the package named @angular/http but Angular team has decided to remove it from the next versions to make the migration of the already existing Angular 4+ applications easier.

Routing and Navigation

 
In Angular the router helps in navigating from one view to another accordingly as the user performs the tasks such as clicking on a button, selecting from a dropbox, etc. Using router, you can pass optional parameters to the view component which in turn will help the component decide what content to present.
The Angular router can interpret an instruction out of a browser URL to navigate to any view.
Router also logs all the activity in the browser history so the backward and forward navigations through the back and forward buttons work as well.

Animations

 
You can use Animations in you Angular applications to make them more appealing and fun to use. You can use animations to improve the user experience.
There won’t be any technical issue coming up if you don’t use animations but your application won’t hold the same appeal as it would with animations. Not just that but the web page transitions may seem abrupt without the animations. It can enhance the user experience and helps in grasping their attention and focusing it to where it is needed.

Watch this What is Angular 8 video

Upgrading from Angular JS to Angular

 
Upgrading from an immediate older version to the new version is still not that big of a headache but going from Angular JS, all the way to the latest Angular was as tedious as it could be. Yes, I said “was”. Because Angular team has come up with two new tools to take the burden off of your shoulders if you want to upgrade your Angular JS application to the most recent version of Angular.
Angular JS applications still work and will continue to work in future as well but it’s still considered best practice to upgrade your application as soon as the new version is out so as to enjoy the benefits of the newer version.
As mentioned above, going from Angular JS to Angular is a little complicated and Google is very well aware of that. So they have made the migration from Angular JS to angular as easy as possible by introducing the following two tools:

  • ngMigration Assistant: This tool will analyze the Angular JS application and then based on that it recommends a migration path best suited for that application. It even provides stats on the application’s complexity, patterns and size etc.
  • ngMigration Forum: This is a community hub where you can look up and find all the necessary information regarding the migrations which can make the migration smoother. Anyone can contribute in this community, by sharing, discussing and learning information about migrating from Angular JS to Angular.Not only that, you can also turn to this forum if you are confused about whether you should upgrade or not. You will find the answers here.

Now that we have become acquainted with the installation, architecture and fundamentals of Angular 6 let’s discuss what are the features that make Angular 6 different from the other older versions.

What’s new in Angular 6

Angular 6 comes with some exciting new additions and some significant bug fixes. Although the number of additions is not that big but when it comes to tooling, a lot has changed under the hood. Now that you are familiar with the architecture, let’s discuss these additions in detail.
1. Angular Elements
Angular team has made it possible to now use angular components in a non angular environment using Angular elements. This new feature lets you wrap your Angular component as a web component and embed them in a non Angular environment such as react app, etc.
2. Ivy
Ivy is the new rendering engine introduced in Angular 6, which also acts as a view engine. It takes the components and their templates and compiles them to HTML and JavaScript.
From a development point of view, nothing has changed. You still write the components the same way you used to in the previous versions but with this rendering engine, a lot is happening under the hood. Ivy, without changing the way you create components and write templates, provides improvements in bundle size and build time, meaning that the code generating the corresponding HTML and JavaScript is lighter and the process of compiling the code is a lot faster. Ivy, in Angular 6 is still very new and not very stable as it is in experimental phase only, but it’s out there, included in this Angular version.
Ivy uses two concepts namely, Locality and tree-shaking.

  • Locality: Before the concept of Locality was used, Angular had to do a static analysis of the entire codebase to generate a json file namely, metadata.json, containing compile instructions.
    The static analysis slowed things down. But now, Ivy, using Locality, compiles one file at a time and the metadat.json file is no longer needed. Meaning you will have a faster recompile time. And changes in one component will be less likely to start recompilation for the whole app.
  • Tree Shaking: Tree shaking is not essentially an Angular feature but it is utilized by Angular for Ivy. Tree shaking removes the dependencies that are not used throughout the given project and thus simplifies the final build. It is basically an optimization step implemented during the build time.

3. Removing Whitespaces
Now, Angular 6 comes with a new setting called preserveWhitespaces that can be accessed in the tsconfig.json file. The default compiler in Angular 6 is going to have the said setting activated by default to preserve whitespaces but you can switch this setting by going to the above mentioned file.
4. ng add and ng update
Angular CLI that is used in Angular 6 has now two additional commands.
ng add: This command allows us to add new libraries to our project and updates the codebase of the project.
ng update: This command lets us update all the angular dependencies from package.json.
5. Service worker
If you have used service workers to deploy your project for the first time in the previous versions of Angular you must be aware of the fact that, as amazing it is to use service worker for network interception, caching and push notifications, it’s also very difficult to remove to a service worker from the project. But now with Angular 6 that issue is also resolved. A safety-worker.js file has been included in the configuration which lets you deactivate existing service workers.
You can also now redirect navigation requests using service workers.
6. Animations
In Angular 6, animations improvements have been made. The polyfill web-animations-js is no more needed for animations. Angular team updated the implementation of animations in Angular 6 which might be able to save you some precious bytes.
7. URL serialization
This is not a new feature but a bugfix. Some characters such as parentheses, semicolons etc were not serialized in the route parameters. Angular 6 fixed this issue by encoding them appropriately n Angular 6.
8. RxJS 6
Angular 6 has an updated version of RxJS, which is version 6.
RxJS is short for Reactive Extensions for JavaScripts. It is a library in Angular that is used for reactive programming. RxJs allows you to work with asynchronous data streams and this library helps in composing asynchronous and callback based code in Angular.
9. Bazel compiler
Google has been using this compiler in nearly all of its software. Now they have included this compiler in Angular 6. Bazel compiler is a build mechanism which only rebuilds what is necessary to build in a project. Since source code keeps changing very often, it just doesn’t make any sense to rebuild the whole application after every little change. So, with the help of Bazel compiler, you will be able to rebuild only the code that has been changed and the code that depends on the changes made. It saves a lot of time and provides us with fast and incremental builds.
10. i18n
Angular 6 comes with i18n that is internationalization. The new Angular CLI in Angular 6 helps in internalizing the Angular application which means that the apps designed in Angular 6 can be available in different languages. Once you have internationalized your app, it will be able to support multiple languages.

Recommended Videos

Leave a Reply

Your email address will not be published. Required fields are marked *