I have been a professional developer for 8 years now, the last 4 years have been focused on the front-end side of things primarily working with Angular.
Over that time, I have come to appreciate what Angular provides and through this article, I want to share with others who might be considering Angular for their next project.
If you are working with a small/growing team having these conventions and securities enforced by the framework can be a good thing.
Since Angular is a framework, it comes with a ton of built-in utilities that you would have otherwise used third-party libraries for. Angular comes with an HttpClient, a Router and even a Dependency Injection mechanism
Angular Directives are little pieces of re-usable enhancements for custom components and existing DOM elements. While you can create your own directives, Angular comes with some good ones built-in
Conditional rendering of elements is one of the most common things one needs to do, to make this simpler, Angular has the *ngIf directive.
Note: You can use ngIf without else too.
Too many conditions for your ngif? No worries, Angular has you covered, you can use the ngSwitch directive to toggle b/w various components.
Applying classes/styles conditionally is one of the most common use-cases in applications. Angular comes with some helpers that make implementing this a peach.
There is an alternative, short-hand syntax too -
Angular has 2 kinds of directives, Attribute and Structural. You can create your own directives to enhance functionality or add styles. For example, at SpotDraft, we use a custom structural directive to hide elements based on feature flags.
Pipes can be used to transform date formats, convert enums to their label values and even enhance data structures. Angular comes with some built-in pipes and users can create their own too.
Angular comes with a powerful Routing module and makes it very easy to implement Lazy Loading, authentication checks and pre-loading of data
Developers can easily implement route based lazy loading of modules.
Eg: We want to load the contracts module only when the user visits the /contracts path. We just need to add the following to our apps routing config.
That’s pretty much it. You can read more about lazy loading modules here.
Guards are a way to guard routes. For example, you might have a route that only admins can access, that check can be made easily in the guard and the user maybe taken to a 403 page if they don’t have the right permission.
Guards are part of the route config.
Read more about Guards here
Expecting some data to be present before a route is opened or a component is initialized is a fairly common requirement. Resolvers allow you to decoratively handle these dependencies in route configs.
In our route config, we add a resolver like -
This is what a resolver looks like -
Most http calls to the backend would involve adding some authentication/authorization headers/tokens to the API call so that the backend can validate the request before processing further.
Angular has a way to have global handlers that can modify outgoing requests and listen to errors/responses. They are called Interceptors.
Reactive Forms use an immutable approach to handling form state, whenever something changes, a new state is created.
Reactive forms also use observables so you can subscribe to things like change in values either on a form level or an individual control. This allows you to create observable chains to implement required business logic which you can combine with other streams and do some powerful stuff!
One great feature that I like about Reactive Forms is the ability to group individual controls together and add a validator on the combined value of that group.
For example, you have a classic password reset form where you want to validate that the value typed in both the new password field and confirm password field are the same, this can be done like -
Angular also allows developers to create custom form elements.
angular-cli is the official way to initialize and manage your Angular project. It abstracts away Webpack and other tooling and provides many configurations and options like fileReplacements, style pre-processor etc.
Schematics are like yeoman generators. They integrate with angular-cli and allow generation of code in one command which helps with maintaining standards and consistency. A developer can create their own schematics too.
Updating a framework/library is always a daunting task, specially on larger applications with many dependencies. Angular-cli aims to help here with the ng update command that not only works with the core packages, but also with packages like angular-material. Angular also publishes an interactive update guide that is super helpful
This is one thing that in my opinion makes Angular really powerful.
Angular heavily uses the concept of Dependency Injection. This means that you can write components and services that depend on certain other services or functions or even constants without actually creating those instances manually.
Services in Angular are Singletons by default. This coupled with Rxjs BehaviorSubject/Subject can be easily used to do lightweight state management and create an event bus to share events throughout the app.
As your application grows, you might want to look into proper state management like Redux, NgRx, Akita etc. But using services to manage and expose state works with those solutions as well.
As I said earlier, Angular’s dependency injection is a really powerful system that allows you to manage complexity that comes with medium-large scale applications.
Angular comes with support for CSS Bundling out of the box. You can also use pre-processors like SCSS, LESS or Stylus. This is a good thing as you don’t need to deal with Webpack configs and loaders and you can get to building straight away.
Another great thing you get for free with Angular is Style Encapsulation, this means that by default, a component’s style declarations are limited to that component and you don’t have to worry about them leaking into the global scope and affecting other components.
There are many libraries out there today that are trying to solve the problem of scoping of styles. Again, not having to choose one and this working out of the box is a big help.
Component styles, coupled with CSS Properties allows you to keep styles private and still override the things you want to be overwritten.
Rxjs is a library that allows us to write reactive, asynchronous and event driven programs with ease. It's functional in nature and fairly powerful once you wrap your head around it.
Rxjs can seem a bit confusing at first, with its subscribes and operators, but, with time you learn to think in Rx and eventually (if you are like me) you might dread not having Rxjs on some other project.
In my opinion, event driven - reactive programming is ideal for client side development and hence Angular uses Observables extensively, whether it's the HTTP Client, Reacting to Router Events, Consuming path/query params etc.
Think about creating an auto-complete/suggestions UI. With Rxjs it's very easy to write expressive, functional code for the same.
Once you create the observable you wanted, you should use the async pipe to subscribe to it.
By using the async pipe, you can offload the lifecycle of the observable to Angular. Once the component is destroyed, Angular will clean up the subscription for you!
While this article just scratches the surface of all good things in Angular, there are some goodies that I just want to include.
Let's say you want to listen to Shift Enter and do something with it, you would do something like -
Angular already provides an easy way to bind template properties to styles. But there’s still a case where your template property is a number. So you have to something like -
We can actually use a shorthand here -
Angular also has first class support for dealing with Web Workers.
This command creates the files, updates the configs and existing code.
As I said, this article is a (very) high-level overview of Angular and its features, but I hope it helps you evaluate using it for your next project!
This article will be incomplete if we don’t talk about trade-offs, or things that I wish were better.
Check out our open job postings.