Fundamentals of Angular and Its Latest Features
In this tutorial, we will be discussing Angular fundamentals. This part of the tutorial highlights the following content:
- Angular Fundamentals
- What’s new in Angular?
Watch this video on ‘What is Angular 8?’ from Intellipaat:
Observables in Angular applications offer support for transferring messages between publishers and subscribers. Observables provide benefits especially when it comes to event handing and asynchronous programming in Angular applications. We can 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 that resides in the below package:
The old version of HttpClient is still available in the package named:
However, 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, router helps in navigating from one view to another accordingly as the user performs tasks such as clicking on a button, selecting from a dropbox, etc. Using router, we can pass optional parameters to the view component which in turn will help the component decide what content to present.
Angular router can interpret an instruction out of a browser URL to navigate to any view.
It also logs all activities in the browser history so the backward and forward navigations through the back and forward buttons work as well.
We can use animations in our Angular applications to make them more appealing and fun to use. We use animations to improve the user experience.
There won’t be any technical issue coming up if we don’t use animations, but our application won’t hold the same appeal as it would with animations. Not just that but the web page transitions may seem abrupt without animations. Animations enhance the user experience and help in grasping user attention and focusing it to where it is needed.
Upgrading from Angular JS to Angular
Upgrading from an immediate older version to a new version is not a big headache, but going from Angular JS all the way to the latest Angular was as tedious as it could be.
Yes, now Angular team has come up with two new tools to take the burden off our shoulders if we want to upgrade our AngularJS application to the most recent version of Angular.
AngularJS applications still work and will continue to work in the future as well, but it’s still considered the best practice to upgrade the application as soon as the new version is out so as to enjoy the benefits of the new version.
As mentioned above, going from AngularJS to Angular is a little complicated and Google is very well aware of that. It made the migration from AngularJS to Angular as easy as possible by introducing the following two tools:
- ngMigration Assistant: This tool first analyzes AngularJS 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, pattern, size, etc.
- ngMigration Forum: This is a community hub where we can look up and find all necessary information regarding migration, which can make this process smoother. Anyone can contribute to this community, by sharing, discussing, and learning information about migrating from AngularJS to Angular. Not only that we can also come to this forum if we are confused about whether we should upgrade our application or not. We will find answers to such queries here.
Now that we have become acquainted with the installation, architecture, and fundamentals of Angular 6, let’s discuss what features make Angular 6 different from the 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, a lot has changed under the hood when it comes to tooling. Let’s now discuss these additions in detail.
Angular team has made it possible to use Angular components in a non-Angular environment using Angular Elements. This new feature lets us wrap our Angular component as a web component and embed it in a non-Angular environment, such as react app, etc.
Angular 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 the compile instructions. The static analysis slowed things down. But now, Angular Ivy, using the locality feature, compiles one file at a time and the metadata.json file is no longer needed, i.e., we 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.
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. However, we can switch to this setting by going to the above-mentioned file.
Two New Commands: ng add and ng update
Angular CLI used in Angular 6 has now two additional commands. To add new libraries to our project and to update the codebase of the project, we can use the ng add command. The ng update command lets us update all the Angular dependencies from package.json.
If we have used service workers to deploy our project for the first time in any of the previous versions of Angular, we must be aware of the fact that as amazing it is to use service worker for network interception, caching, and push notifications, it is also very difficult to remove a service worker from the project.
With Angular 6, now, the issue is resolved. A safety-worker.js file has been included in the configuration that lets us deactivate the existing service workers. We can also now redirect navigation requests using the service workers.
In Angular 6, animations improvements have been made. The polyfill web-animations-js is no more needed for animations. Angular team has updated the implementation of animations in Angular 6 that can save us some precious bytes.
This is not a new feature but a bug fix. Some characters such as parentheses, semicolons, etc. were not serialized in the route parameters. Angular 6 fixed this issue by encoding them appropriately in Angular 6.
Google has been using this compiler in nearly all of its software. Now, this compiler is included in Angular 6. Bazel compiler is a build mechanism that only rebuilds what is necessary to build in a project. Since the source code keeps changing very often, it just doesn’t make any sense to rebuild the whole application after every little change. Therefore, with the help of the Bazel compiler, we will be able to rebuild only the code that has been changed. It saves a lot of time and provides us with fast and incremental builds.
Internationalization (i18n) in Angular
Angular 6 comes with i18n, the new Angular CLI that helps in internalizing the Angular application, i.e., the apps designed in Angular 6 can be available in different languages now. Once we have internationalized our app, it will be able to support multiple languages.
This is all about the fundamentals and features of Angular 6. Now, in this Angular 6 tutorial, we will move ahead with learning about Angular Bootstrap.