Last updated on July 26, 2018.
Dive into Angular's core concepts and hot topics: Angular Elements, Angular Ivy, Angular Schematics, Angular HttpClient, Progressive Web Apps, Service Workers, UI Libraries, etc.
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.
The latest update of Angular 6 has introduced a few new things that are very hot right now. There are Angular Elements, which allow you to wrap any Angular component in a Custom Element and then use it outside of the Angular ecosystem. Plus the new CLI commands, ng add, ng update and ng generate library which are all long-awaited features that everyone is super pumped to try out. We talk about all the new cool things with Angular 6 in section 4 so check it out for more details.
ng generate library
In the ng-conf 2018 day 1 keynote, Miško Hevery and Kara Erickson gave us a first look at Angular's upcoming new render engine called Ivy. Ivy, which will be part of an upcoming release, boasts smaller and faster builds with a simpler compilation pipeline. Part of Ivy's magic is that it has been designed from the start with tree-shakable providers. Basically, if your app doesn't use a feature of Angular, it won't get shipped as part of your bundle. Ivy also only compiles one file at a time, which means faster re-building through incremental builds. Make sure to find out more about how Angular Ivy works.
Angular Schematics are being talked about more and more in the Angular community. If you are new to schematics and would like to know more, check out our article "The What and How of Angular Schematics: The Super Simple Version". We go over the basics, like how schematics is just a fancy word for "recipe", and what you can do with those recipes. Schematics can be super useful. You can enable build commands from your library or service with them (like using ng add and ng update)! You can also use them to generate project skeletons with the environment set up with the latest stuff. We even use them here at Kendo UI for Angular.
Angular 4.3+ introduces a new way to make HTTP calls with the new HttpClient. HttpClientModule, which is in @angular/common/http, replaces HttpModule (no need for @angular/http anymore!). It features a simplified API, improved testability features, typed request and response objects, streamlined error handling, and much more. There are also improved Observable APIs. No need to map your response to JSON anymore - HttpClient does this for you! Finally, one of the best new features is the return of HTTP interceptors, which were extremely popular in AngularJS for things like adding authentication to outgoing requests. For more detailed information, you can read this article digging into the benefits, as well as the updated official documentation.
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.
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 info on PWAs, check out Google's PWA page. 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. Finally, you'll need a UI for your PWA, and what better than Kendo UI with support for PWAs!
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 this 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."
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.
The current major release version of Angular is version 6, which was released on May 4, 2018. This update of Angular introduces some very exciting features such as Angular Elements and the new CLI commands. Keep reading for a breakdown of the new goodies.
As Stephen Fluin put it in his Angular 6 post:
"The first release of Angular Elements is focused on allowing you to bootstrap Angular components within an existing Angular application by registering them as Custom Elements."
Check out more details on getting started with Angular Elements to learn how you can use them in your apps today.
Other than the tree component, there are also two other new components, the badge and bottom sheet components. The badge component is as you imagined, a small badge hovering at the top right or left corner, indicating a number. Badges are commonly used to indicate unread items or actions left to do.
The bottom sheet component is a service that allows you to open up a panel on the bottom of the screen, as seen in the below gif. These bottom pop-up panels are meant for mobile. They are designed to offer a list of options after a specific action is taken. When you press a button, for example, more options pop-up in this panel from below. Pretty snazzy!
The @angular/cdk/overlay package is where the magic happens, and the reason why we are able to have such nifty pop-up panels in version 6. This package has new positioning logic that smartly tells the pop-ups where to be on the screen in all situations.
There are many more updates to Angular Material, including a new Sidenav, Dashboard and Data Table. You can see more of these on the Angular Material's website.
ng update is a lovely new CLI command that will look at your package.json and tell you what things are out of date. It truly is the bee's knees. The Angular team also recently came out with this awesome update guide to help you out with updating your versions.
ng add is another new CLI command that everyone is raving about. It allows you to add new dependencies to your app with a single command. It utilizes a schematic script that will tell it what config changes to make, any extra dependencies to install, or even what scaffold out initialization code specific to the package you are downloading.
The CLI now supports multiple projects under one roof (or workspace as some like to call it). Instead of the old .angular-cli.json files, we now use angular.json files for our CLI build and configuration.
The CLI now supports library generation in one handy single command:
ng generate library <name>
This command will generate a library within your workspace. It will be configured for testing and building right out of the box.
All these features represent the highlights of the latest Angular release but there is more to cover so be sure to find out what else is new in Angular 6.
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 an overview on the ins and outs of migration, take a look at this blog post on migration methodologies.
Or, for more detailed tutorial on migration, check out this comprehensive, step-by-step video course about ngUpgrade at UpgradingAngularJS.com.
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 for Angular.
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:
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.