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:
- What’s new in Angular
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 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.
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.
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.
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.
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.
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.
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.