What is Angular?
Angular is a frontend web application development framework based on TypeScript, built by folks at Google and heavily contributed to by a huge community of developers around the world. It is a Single Page Application (SPA) framework, which means that Angular is capable and is primarily used to build single page web applications or SPAs.
Angular logo Angular is developed by the same team of individuals that developed the popular framework AngularJS. The modern Angular requires you to have knowledge of the Typescript language which is a strict syntactical superset of JavaScript and adds optional static typing and some other features to the language that otherwise JavaScript lacks. For more information, check out Full Stack Development Online course.
Here is an article on angular cli.
The AngularJS framework was re-written and called "Angular 2", but this led to a lot of confusion and panicwithin the developer community. To clarify, the Angular team started to use separate terms for each framework. At this point, "AngularJS" now referred to the 1.X versions and "Angular" without the "JS" referred to versions 2 and up. Since then, all the versions of the framework other than 1.X are just called Angular. You can, however, mention the version number to be more precise.
TypeScript is designed for development of large applications and transpiles to JavaScript. As TypeScript is a superset of JavaScript, existing JavaScript programs are also valid TypeScript programs. So, you can still use JavaScript in your TypeScript code files, but please do not do that.
In this article, we will take a closer look at how Angular has evolved into one the mostpopular web development frameworks and understand its pros, cons, features and more. We will leave you with a few quick tips and suggest how you can get started with understanding Angular indepth to achieve mastery over the subject.
History of Angular
AngularJS was the first version of the framework, created by Google, that first came out in 2010and it shook the developer community. There were so many amazing features that AngularJS offered. Most talked and loved of all the features that it offered was two-way binding between the view and the model.
So, it let us developers get rid of a lot of useless code to set up bindings and keep the view and model in sync at all times. AngularJS was golden. AngularJS became very popular within the developer community and was widely adopted.It received a lot of traction. Still, the team decided to take another step further and developed a new version which was initially named Angular 2 but later was called Angular without the “JS” part.
Soon after, in 2014, Angular 2.0 was announced which was a complete rewrite of the framework from scratch and unlike AngularJS that used JavaScript as the primary language, it used TypeScript. A final version of the framework, Angular 2, was released in 2016. Later, it was renamed to Angular to avoid conflicts and confusions within the developer community.
A lot of new changes were brought in and developers had to learn it all over again which was a tough change but was welcomed by the community. Angular opted for semantic versioning and from now on, all versions of Angular will just be called Angular.
Near the end of 2016, Angular 4 came out (yeah, they skipped Angular 3 to avoid some conflicts and confusions). With a few more major versions and performance upgrades in each version, we have now arrived (at the time of writing of this article) to Angular 9.
Angular 9 has better than ever performance and latest features. In these intermediate versions, there have been updates to the performance, CLI features, progressive-web app features, router, and a lot more. They even upgraded to a better rendering engine in Angular 9.
Angular 10, a major upgrade to the popular web development framework, has reached the release candidate stage, with six release candidates published as of June 17, 2020. The upgrade to the Google-developed, TypeScript-based framework focuses more on ecosystem improvements than new features.
Advantages of Angular
Angular hascome a long way since 2012. There are benefits to using the framework and there are some drawbacks as well, especially if you are a beginner. Let us talk about the good things first.
Maintained by Google
The best things about Angular is that it is developed and maintained by Google. As it is backed by a trusted company, trust is well established within the community. Developers believe in the framework and in the fact that it will be maintained, and issues will be resolved, of course withthe help of community contributions.
Large community and ecosystem
Angular is actively maintained and has a large community and ecosystem. You can find lots of material on this framework as well as many useful third-party tools. Currently, Angular has around over 63K stars on GitHub, a clear indication of the popularity of the framework.
Github
Two-way Data binding
Two-way data binding in Angular will help users to exchange data from the component to view and from view to the component. It will help users to establish communication bi-directionally. Two-way data binding can be achieved using a ngModel directive in Angular. This ensures that the model and the view are always kept in sync without any extra effort.
Use of TypeScript
Angular opted for TypeScript as the primary programming language. TypeScript adds a lot of syntactic sugar to JavaScript. With TypeScript, we also get several productivity benefits. In editors like VS Code and WebStorm, we have access to robust code help (intellisense) as we type, making it easier to discover types, the features they offer, and most importantly the common syntactical errors.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript Support for i18n
Internationalization is the process of making sure that an application is designed and prepared to be used in regions with different languages. Localization is the process of translating your internationalized app into specific languages for particular locales. Angular can take care of most things when it comes to multiple languages. Dates, numbers, times, and other things are easily taken care of based on the locale. On top of that, the Angular CLI allows us to install the @angular/localize package and generate most of the boilerplate code necessary.
Support for lazy loading
An Angular module is a logical unit of code that performs a certain task or takes care of a certain responsibility in the application. A normal Angular application can be broken down into multiple modules, where each module is delegated a certain responsibility. A module can comprise of components, pipes, directives or more modules.
Breaking down an application into modules not only allows to easily manage an application as it grows, but also offers huge performance advantages. Instead of loading all the application code at once in the browser which may cause more loading time and a slower initial render of the web page, it loads only what is necessary. This is called lazy loading.
Only the modules that are required are loaded initially and more modules or rather chunks of code are loaded as an when required. This offers seamless performance and smaller loading times.
Every Angular app has at least one NgModule class, the root module which is responsible to bootstrap the project. Conventionally, it is named AppModule and itresides in a file named app.module.ts.
Dependency injection
Dependency injection or DI is one of the most important application design patterns and Angular has its own dependency injection framework. It is typically used in the design of Angular applications to increase their efficiency and modularity. This is closely related to the previous point - modularization of the Angular app.
Dependencies are services or objects that a class needs to perform its function. The class requests services from an external resource, generally another module or class in this case, instead of creating them themselves. This allows us to delegate single responsibility to each module.
The advantage of dependency injection design pattern is to divide the task into multiple services. The class will not create the dependent object itself, rather it will be created and injected by an Angular injector. Dependency Injection is technique that is used to reduce the coupling amongst various components of an application. Looser coupling allows for better testability and maintainability. To advance your career in web development, enroll in Web Development Full course.
Powerful Router
Routing or in-app navigation in Angular is taken care of by the Angular Router. It is a module available in the @angular/router package. Angular router is a very powerful and flexible navigational service. It usesa component called router-outlet to load various components into the view depending upon the URL in the browser.
Angular Router has built-in support for lazy loading components, so the modules are loaded from the server as the user navigates within the app. Huge apps have a lot of benefits because of this feature.
Support for Ionic
Angular was the first framework that was supported by the Ionic framework. It allows building cross-platform mobile applications for Android and iOS using the Ionic components and Angular code. As of now, more frameworks like ReactJS and VueJS are also supported but still, Angular is widely used with the Ionic framework for mobile application development.
Angular is widely used with the Ionic framework for mobile app development Availability of packages
There is a huge repository of open-source packages available for Angular developers. Some of the most important packages are NgBootstrap, Angular Google Maps, NgRx, NgTranslate, AngularFire, NgxTextEditor, Angular Material, Ng2 Pdf Viewer, NgxCharts, and many more. Some of these packages are maintained by the official Angular team and most of these are taken care of by the community of developers as well. It is most likely that if you are looking to build a complex feature or a component for your application, a package already exists for you, so why reinvent the wheel?
Disadvantages of Angular
So, we have seen the good things about Angular, but there is another side to the story as well. Let us talk about some of the downsides of using one of the most popular web development framework.
Steeper learning curve
While Angular is great, it may not be the case for a complete beginner. Even if you have experience with HTML, CSS and JS, you may feel a little bit uncomfortable with the steep learning curve that it has. It brings its own notions and philosophy to the table that you need to work around.
Angular is an opinionated framework which means that it has its own rules that developers need to learn and follow. This can be a good and a bad thing, but the learning curve can be uncomfortable for total beginners. I would recommend that you stay patient and start slow. Slow and steady!
Limited SEO Capabilities
Angular is just great for building powerful single-page web applications. However, as with all single-page web applications, there is a disadvantage when it comes to search engine optimization.
Usually single-page applications are rendered on the client side and therefore web crawlers of search engines like Google and Bing are not able to see the complete structure and content of the individual pages of the websites. With this limitation in place,it is not possible to list your website correctly in search engine results.
However, there are techniques and packages to make this work, but it is an extra effort in terms of development. Angular universal is a way to render the Angular application of the server itself. The technology enables server-side rendering for Angular applications. Angular Universal generates static application pages on the server through a process called server-side rendering.
While Angular universal takes care of most aspects, it still requires a lot of setup. If you prefer to do it all manually, there are documents available to help you do that but there are gotchas that you need to watch out for.
Too many versions
Angular has been evolving. It started out as a JavaScript framework AngularJS and now the current version is Angular 9 with a total of 6 major releases in between. This can cause confusion especially for beginners.
Many a time, beginners struggle to understand the versioning. I have seen students learning a version of the framework, latest at the time, and by the time they finish their first project, a new major release is out. This causes trust issues. Developers, at times, feel that they must keep working on their apps and resolve version conflicts and compatibility issues.
Decline in popularity
With the advent of newer frameworks like VueJS and ReactJS, Angular has seen a downfall in its popularity. Just a few years ago, developers were mainly debating on whether they should be using Angular or React for their projects. But over the course of the last couple of years, we saw a growth of interest in a third player called VueJS or Vue.js.
While the job market in Angular continues to expand, it has been observed that the popularity of the framework has been declining. I believe that too many versions is one of the main issues that the framework needs to address.
Lot of boilerplate code
If you are building a simple app, there is a lot of boilerplate code that the application requires. Although with tools like StackBlitz, it has become easier to try code ideas and experiment without having to install anything on your computer, but if you decide to start developing an Angular app on your system, you need to install a bunch of things and the most simple “Hello World!” application will have a lot of code that you do not care about.
What’s new in Angular 9?
Let us take a closer look at what is in store for us in the Angular 9 version of the framework. We will delve into the latest version of Angular 10, released in June 2020, in a separate blog post.
Step-by-step guide
The official Angular website offers a step-by-step guide on how to upgrade your existing apps to the latest version.
Guide
Ivy, the next-gen compilation and rendering engine
Ivy is the code name for Angular's next-generation compilation and rendering engine. With the version 9 release of Angular, the new compiler and runtime instructions are used by default instead of the older compiler and runtime, known as View Engine. You can, however, disable Ivy if you still want to use View Engine for your app. It is a huge milestone for the framework. Ivy offers faster build times and small build sizes. It also offers a new change detection system.
The important point is that we don’t have to change how we write our applications. Ivy aims to be compatible with the existing applications. Ivy is going to be smaller, simpler, and faster as quoted by the Angular team.
In the demo shown by Miško Hevery, the creator of the AngularJS framework,in ngConf 2018, the Hello World application was merely 3.2KB which is significantly small although 3.2KB is the result after minification + gzip.
Total bundle Size Ivy compiles one file at a time and therefore follows the locality principle. Ivy looks at a component's template when generating the compiled output. This process leads to faster compilation. Ivy makes sure that, if you are not using something in Angular, it does not get included. Since Ivy pipelining is simplified, templates will be part of the stack trace.
No more cryptic error messages when something is broken in our template syntax as we will see the exact line number where the error is.
The Ivy compiler has been designed to remove parts of Angular code that aren’t being used via a mechanism called tree-shaking and to generate less code for each Angular component. With these improvements, small apps and large apps can see the most dramatic size savings.
Angular ahead-of-time (AOT)
In Angular 9, AOT is enabled for Dev build as well. The Angular ahead-of-time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code.
Compiling your application during the build process provides a faster rendering in the browser. AOT allows faster rendering of the application and also makes sure that there are a lot less asynchronous requests. According to the docs, AOT compilation with Ivy is faster and should be used by default.
Are you ready to level up your programming skills? Join our Python for Programmers course and unlock a world of endless possibilities. Don't miss out on this opportunity to become a Python pro!
Lazy loading components
Before Angular 9, we could only lazy load modules. Now, you can also lazy load components. It is a great way to shrink the size of your main bundle and boost the initial load of your application. Lazy loading of single components has not been possible so far. But things have changed with Ivy.
Works with TypeScript 3.6 and 3.7
The latest version of the TypeScript is 3.7 and Angular 9 is updated to work with TypeScript 3.6 and 3.7. Angular 9 supports usage of the same TypeScript Diagnostics format for the TypeScript Compiler diagnostics, which will generate more descriptive error messages.
According to the official docs - “In TypeScript 3.7, when opening a project with dependencies, TypeScript will automatically use the source . ts / . tsx files instead. This means projects using project references will now see an improved editing experience where semantic operations are up-to-date and “just work”.
SupportscCSS variables or custom properties
Angular 9 supports CSS variables or custom properties. CSS variables or custom properties allowsdevelopers to define their own variables for CSS values that can be shared between components and style rules.
CSS custom properties or CSS variables allow the CSS property values to be changed at runtime. The possibility that the CSS custom properties can be updated during runtimeopens the opportunity to easily create themes for newer Angular application.
Angular:Quick tips and facts
Angular is a framework used for front-end development. This involves the client-side of the application and has little to do with the back end.
- Angular is best utilized for completing advanced, large-scale projects under the direction of a seasoned developer.
- Angular is created for enterprise-scale applications.
- Angular elements can be added to projects that were built using a different platform, such as React or Polymer.
- Angular is supported by Google.
- This program is not up to par with SEO best practices, so if your primary focus is search engine optimization, opt for a different platform.
- Angular is a JavaScript framework—not a JS Library.
- Angular ranked second in “most used technology” in the Stack Overflow Survey of 2018.
How to get started with Angular?
Are you ready to take on the best and become a master of the Angular framework? Check out the Angular Training and Certification which comes with instructor-led live training and real-life project experience.
This training will help you understand Angular in-depth and help you achieve mastery over the subject.
Master Angular programming with our in-depth online courses. Explore them now!
.jpg&w=3840&q=75)
