Dive into Angular's core concepts and hot topics: Angular Labs, Angular Elements, Progressive Web Apps, Service Workers, AoT Compilation, UI Libraries and more.
Whether you're currently using Angular or not, if you're doing any kind of frontend development these days, you've no doubt heard about this framework. One of the most popular frameworks around, Angular is a TypeScript-based, open-source library for web application development. The Angular ecosystem is huge; there are a ton of tutorials, resources and sites that cover everything from the basics to the cutting-edge of Angular. It can be exhausting to keep up with them all and determine what's worth your time, so we've done the hard work for you. This page collects the best resources we could find, and provides a comprehensive resource for newcomers and seasoned Angular developers alike.
Looking for just the latest, hottest Angular news? This is the section for you. The Angular world moves fast, and today's big trend is tomorrow's old news. In this section, we've provided an overview of the most active developments and tidbits in the Angular space. If you don't read anything else on this page, be sure to read this section.
In the Fall of 2017, the Angular team announced "Angular Labs," an umbrella category for many of the experimental and in-flux features the Angular team is working on. The goal is to create a clear dividing line between the stable and production-ready aspects of the Angular ecosystem, while allowing for experimentation and iteration on emerging ideas that may make their way into Angular proper in the future.
If keeping tabs on the cutting edge of Angular excites you, definitely keep an eye on everything under the Angular Labs umbrella.
When Angular Labs was announced, the team organized three existing initiatives under that label: Schematics, Component Dev Kit and the ABC project. They also announced on new initiative that's quite exciting, and worth mentioning here: Angular Elements.
The goal of the Angular Elements project is to allow developers to build Angular Components that can be packaged up and used outside of an Angular application. Under the hood, Elements relies on the Custom Elements specification, which is not quite yet implemented in all browsers, though support is coming soon.
As an example of how this would work, in practice, let's assume that you've built a calendar widget for an Angular application, and another team - this one building a React app - needs to create a calendar widget as well. With Angular Elements, you can bundle that widget into a self-contained, custom element that the React team could drop into their app.
In a GitHub thread on the status and roadmap for Angular Elements, Rob Wormald said that Elements should be released with Angular 6, although it would remain experimental for a time. There's a lot of excitement around the potential of Angular Elements, but the Angular team wants to proceed deliberately and with caution, and not fall into the trap of releasing anything before its ready.
If you're interested in keeping tabs on Angular Elements, make sure to follow the Elements branch in the Angular GitHub repo, though you should expect this to be merged with the master around the time of the Angular 6 release.
Progressive Web Apps (PWAs) represent a new way to approach web development, especially for responsive and mobile web apps. By following a few new web APIs and a number of development practices and guidelines, PWAs are intended to allow developers to build mobile web apps that behave a lot more like natively-installed applications.
Why does this matter? Because, in reality, people primarily use native apps, not web apps, on their phones. According to comScore, people spend 87% of their on-device time in native apps, and only 13% on the mobile web.
And while we can't completely generalize why this is, native apps have a number of built-in advantages that make users more likely to engage with them over a mobile web experience, including home screen launch icons, push notifications, offline support and better performance. Generally speaking, in the eyes of consumers, native apps are more dependable.
But the other side of this coin is that native app usage is highly concentrated among a few apps, for most consumers. Many studies have found that users tend to use only a few installed apps on a regular basis, meaning that all that time and money you are looking to spend to create a fully-native app that mimics what your web app already does might be a waste if you're not immensely sticky.
Thankfully, PWAs exist to make it easier for web developers to create mobile web apps that have many of the advantages of native apps, including installability and offline support, without having to creative a fully-native mobile app.
In practice, PWAs center around a new level of care for the experiences your users have while using your app. According to Google, one of the primary drivers of PWAs, PWAs are all about delivering user experiences that are reliable, fast and engaging. They are experiences that have the reach of the web, and which:
For more guidance on building a PWA, or adapting an existing app to the PWA model, you can follow this checklist from Google.
There are some good resources available to help take you through the process of creating a PWA, and you can find a great tutorial series here, complete with code samples you can download.
One of the key technologies in the PWA umbrella is Service Workers. A Service Worker is essentially a programmable network proxy inside the browser, which allows you to "catch" when the browser needs to make a network request and either dispatch the request, or retrieve the requested information from a cache or local store. What this means is that Service Workers enable developers to deliver an offline capable experience by being able to detect and respond to offline or high-latency conditions in an app. For an in-depth introduction to Service Workers, check out this article from Matt Gaunt at Google.
Angular has built-in support for Service Workers and is something you should consider enabling, even if you don't go for the full PWA approach.
Service Workers have support in Chrome and Firefox, but are not yet supported in Safari or Edge. That's about to change, however. As of version 11.1 for desktop and 11.3 for iOS, Safari will support Service Workers, which is a huge boon for mobile web developers building PWAs. Edge version 17 should provide support for Service Workers, as well.
Even if you're not yet using it, you've certainly heard a lot about Angular over the last several years. But what is it, really? And where did it come from? In this section and the next, we'll provide a gentle overview of core concepts in Angular, and a bit of its history.
Angular is a large, complex framework that provides a lot of great features. At its core, however, much of the power of Angular comes from four key concepts that any aspiring Angular developer will want to be familiar with. They are:
Nearly everything in Angular is a component, including the root element of your application itself. Whether a custom element you create or an entire single-page app, everything in Angular is either a component, or a collection of components. There are aspects of Angular that are not components, per se, but the component is a central concept to the framework, and represents the majority of what Angular developers will write and work with when creating an Angular app.
Components are the #1 key concept and are also a common foundational feature in other frameworks as well. Take a look at this comparison of components in different frameworks for additional info.
One of the toughest aspects of building a complex application is dependency management. Not only because complex apps tend to have a lot of dependencies, but also because our traditional approaches of including dependencies in our apps - via in-line imports and declarations - tend to be brittle and create a lot of places to touch when dependencies need to be updated or changed.
In contrast, Angular uses something called Dependency Injection (DI) at its core. With DI, developers declare dependencies in a central location or locations, and when new objects are created, dependencies are automatically created and "injected" into the app. DI can be a daunting topic for newcomers, but is quite elegant and powerful once you grasp it. Thankfully, the Angular team has a great resource you can code along with to learn how DI works in Angular.
Property Bindings have been a key construct of single-page apps (SPAs) from the beginning, and Angular is no different. Central to the framework is the idea that app data is separate from presentation logic, and that changes to data should automatically update every place where that data is displayed or used in an app. This is accomplished through property bindings on templates in custom elements. By default, Angular bindings are one-way, though two-way bindings are supported using the ngModel directive.
It's hard to believe that Angular has been around for almost 10 years, but it's true! There's a great article that covers much of the history of Angular, but we'll give you a quick overview here.
As with many great tools and libraries over the years, Angular started as a side project. In 2009, Miško Hevery and Adam Abrons released a a project they called <angular/>, a library meant to help developers and designers build web apps with simple HTML. The name "Angular" was inspired by the angle brackets (<>) that surround all HTML tags like <div>, <script> and <ol>.
During an interview he did with InfoWorld in 2013, Miško had this to say about the inspiration for Angular:
"We wanted to see if we could make it easier for Web designers, not necessarily Web developers, but Web designers, to sprinkle a little bit of extra HTML into their code so that they could turn a static form to something they could actually send in an email. The idea would be that you could [for example] have a mom-and-pop shop that sells pizza or something, maybe you could [have] a simple ordering system just by adding a bunch of these tags and they could send an email to the server."
Soon after releasing Angular, Miško began working at Google. By 2010, he was working on the Google Feedback application and he convinced his manager at the time, Brad Green, to give Angular a try during a rewrite of the application. In that single project, the amount of time and code the team saved was plenty to convince Google of the power and potential of Angular.
On the heels of the Google Feedback rewrite, the team open-sourced the library that Angular had grown into over the course of the project, before officially releasing v1.0 in May of 2011. Adoption was fast and furious, and today Google boasts that over 1.5 million developers use Angular.
Angular was originally released as AngularJS - the 1.x version. Anything with a 1.x version is still referred to as AngularJS. There are still many projects using AngularJS, but the final release is coming in mid-2018 and it will enter long term support mode at that point.
The 2.0 version represented a complete rewrite of the library and, as such, is referred to simply as "Angular." The latest version of Angular is 5.x at the time of this writing.
Angular also provides a number of conventions for you to use when approaching your own app development. These conventions, or opinions, can be especially helpful for large teams working together on a single code base. Angular provides a very comprehensive style guide with a number of options that cover nearly all aspects of modern web app development. For more information about the "what" of Angular, there's no better place to start than the Angular home page.
As of this writing, the current major release version of Angular is version 5, which was released on November 1st, 2017, just a few days off the originally-planned release date of October 23rd. Not bad for one of the largest open-source projects around. And while Angular 5 is a big release, the upgrade path from 4.x versions is quite straightforward.
What has been going on in Angular in 2017? And what is coming in 2018? Here's a look at the recent changes in the Angular world.
So, what's new in Angular 5? Here's a breakdown of some of the new goodies.
Angular's improved build optimizer now makes your app bundles even smaller. For those new to the tool, it's a feature of the Angular CLI tool that helps produce the smallest version of your production scripts, CSS and other assets. And the best part is that all you need to do to take advantage of this improved feature is to upgrade to the latest CLI (v1.5) and use it to create production bundles before deploying. If you're concerned about the runtime cost of Angular, give this feature a try!
Angular 5 introduces the @angular/service-worker package to bring service workers into any and all Angular applications. As we discussed earlier, service workers are a key aspect of PWAs, and formal support out-of-the-box is a huge step towards making PWAs even easier to build with Angular.
The three items above are some of the most notable features in Angular 5, but there's a lot more to get excited about, big and small. Here are some highlights:
For an exhaustive list and more information about what's available in the Angular 5 release, you can check out the official changelog.
If you're reading this and asking yourself this question, chances are you're wondering a few things about Angular. Like:
Let's look at each of these questions, in turn.
Another common question comes from developers and teams that adopted AngularJS versions in the 1.x timeframe. In the early days of the rewrite, the official word from Google was that there would be no migration assistance or tooling provided for those looking to go from AngularJS to Angular 2 and above. Thankfully, the team has since backed away from that stance, and there are a number of migration resources available. While we recommend moving to Angular 2+ when starting new projects, we recognize that, even in these cases, there are likely legacy modules and features that you'll want to carry forward.
Quite a bit has been written on migration. For more information on the ins and outs of migration, take a look at this blog post on migration methodologies.
Finally, if you're evaluating web frameworks, you're probably considering React and Vue, along with Angular. And while this page is targeted towards the Angular ecosystem, we recognize that Angular doesn't make sense for every type of app and every team. There are many factors to evaluate when selecting Angular, React or Vue. And while there are areas where the libraries stack up well against each other, there are some where one is a clear choice.
More importantly, the context of your organization, the needs of your customers and the skills of your development team should factor heavily into the framework you choose for your next app. With that in mind, here are some bullets to consider when making a choice between Angular, React and Vue.
As with most things, your context is key, here. There is no incorrect choice between Angular, React and Vue, so long as it is informed by your needs. As you consider your choice, we recommend this whitepaper for an in-depth comparison, as well as this video, which provides an overview of a few other popular web frameworks.
As webpages got smarter and smarter and morphed from a static display of information to interactive experiences, the overall structure changed as well. A series of interlinked HTML pages began to be replaced with fewer and fewer pages that were able to dynamically change what was being displayed. Eventually, all functionality started to be stuffed into what is - literally - a single page application (SPA).
Downsides? For starters, goodbye usable URLs. No more linking to specific "bookmarks" in the flow like "mysite.com/products/training_bat," for example. Your SPA only has one URL - "mysite.com." And creating content on the fly programmatically is almost thumbing your nose at Google and daring it to try to figure out what's actually on your site. Still, there are ways to get around both of these with a little care.
Assuming you've decided to go with Angular, you're probably ready to jump in and get coding. Before you do, however, we suggest taking a few minutes to plan out your Angular app and think through some of the key decisions you'll need to make as you build out your app.
Once you have considered these factors and more, you're ready to roll with Angular. Thankfully, there's an extensive quickstart and some awesome docs.
In 2018, building a web app isn't just about creating something that's functional. In fact, nowadays, if you have an app that works with a terrible user experience, you might as well not have an app at all. Fortunately, there are some great options for helping you put the best face on your app. Two of the leading options are Angular Material and Kendo UI.
The "Material" in Angular Material refers to Google's Material Design language, a set of design patterns and styles that Google uses for its mobile, desktop and web apps. It's become quite popular for both Android and iOS and the Angular Material library provides an extensive color palette, components, animations, icons, gestures, and more.
Whether you've decided to use Angular Material, Bootstrap or another UI library, chances are that your UI and functional needs extend beyond the built-in HTML components. Instead of building your own components, or cobbling them together from an uncoordinated mess of single-feature libraries and components, the faster approach is to use a robust library of UI components. Kendo UI provides the most popular UI library of native and purpose-built UI components, and is worth considering for your next app. Here are a few of the stellar features of Kendo UI for Angular:
Check out Kendo UI for Angular yourself by downloading a free trial today.
The web world moves fast, and Angular is no different, so if you jump into the ecosystem, you should know how to keep up-to-date.
Here's a list of places and resources to keep an eye on as you embark on your Angular journey:
And, of course, you can keep an eye on what people are saying about Angular. Here are a few suggestions (some of the Angular team members) for who to follow on Twitter, and there are lots of other people who are contributors to the Angular community that you will find:
This resource was assembled with the hard work of many people, and we want to recognize John Willoughby, Alyssa Nicoll and Brandon Satrom for their contributions as co-authors. Questions or comments for any of them? Let us know in the comments below.
Back to Top
John Willoughby is a product marketing manager and a software developer based in the Boston area. He is passionate about helping to give other developers better tools which is why he loves working with Kendo UI.