Angular. The JavaScript framework that strikes fear into the heart in many aspiring frontend developers. With a complex structure and steeper learning curve, it can be intimidating to get started. However, once you clear all of this, you're invited to a world of endless possibilities.
In this post, I will be going over how Angular works and go over some of my favorite features to, hopefully, entice you over to the dark side.
What is Angular
Angular is a Frontend JavaScript framework for frontend web development that is maintained by Google...
Sounds great! But what does that mean though? Well before we carry on with that, we need to understand the difference between a JavaScript libraries and frameworks as you’ll probably hear this a lot.
When thinking about the a framework vs a library, the best way to think about it is that a library is like pieces of individual furniture while a framework is made up of sets of ready made rooms.
Frontend libraries gives you the basic tools that focus on a base concept while a framework gives you a lot more structure to play around with.
With that being said, Angular is a frontend web development tool that comes with additional built in features like a libraries for forms and routing.
How it Works
While there’s a lot to Angular (which I’m not going to be going in depth with) there are three fundamental concepts that you need to grasp:
- Components: the building blocks of Angular applications
- Services: the way we add functionality into our apps.
- Modules: the way we organize our components and services in our Angular application.
I’ll explain all of these concepts in future details.
Components
Like most frontend tools, Angular is made of components. These components are then usually broken into three parts which regularly represents 3 files:
- Component: the part that handles all the logic.
- Template: HTML with Angular code to perform logic and embed data.
- Styling Module: styling for the component handled with your styling library of choice.
Components are also able to communicate to each through different methods like Parent, Child, Sibling relationships or have data parsed through services form one component to another.
Another cool feature of Angular is built in RxJS, a library for event driven, asynchronous communication. This allows data to be passed through components in real time.
Services
Angular services are used to provide functionality to your components. From interacting with a REST API to implementing gauds for access control (only allow admin users to access certain parts of the application).
Services are injected into components by using a method called dependency injection. This is a technique in which an object receives other objects (such as a REST API service) that it depends on.
Coupled Services
Coupled services, basically means that the service is one with the component. While this is convenient, it could cause problems such as receptiveness as your component starts to scale. To solve this, we have decoupled services.
Decoupled Services
Decoupled services, means that the services are separate from the component. Now the service can be used in other components as well, without the need for repetition.
Other benefits of dependency injection includes:
- Testability: With dependency injection, we can swap out the instance of the service in the component for a mock instance to be used in testing to makes sure everything works well.
- Maintainability: It becomes easier to keep your application’s state constant. If any service logic needs to be changed, it can be changed in one location.
- Separation of Concerns: Your components will only be concerned with what they need to and display. All the processing of data and other logic happens in decoupled services.
Modules
Components act as a way to organize each of the components in the application.
Modules are responsible for the:
- Declarations: all the components, directives and pipes that belong to this module.
- Exports: the declarations that should be visible and usable in the other modules of the application
- Imports: other modules and components that has to be used in the module.
This allows for a modularity system, where you’d break up your application into individual modules that are all responsible for their own concerns. This is common for a Domain Driven approach, where each domain acts as it’s own section in the application.
When you modularize your application, it separates the responsibilities that each part of the application (components) needs to run resulting in clearer code that is better to maintain and is less error prone.
Some other cool features
Pipes!
A pipe or allows you to transform data in an elegant way. One built in pipe, the Date pipe, turns your date object (which look like “1969-04-22T17:33:02Z”) and transforms it into something more appealing, 22 April 1969.
In addition, you can create your own custom pipes for things like currency formatting, enum formatting etc.
TypeScript as the default
Did I mention enums? This is possible in TypeScript, a super set of JavaScript that adds cool features such as type safety and enums.
This allows your application to maintain a constant state (in terms of data) from the database to the frontend.
Angular CLI
Angular comes with it’s own CLI (Command Line Interface), that allows you to execute commands to create, build and run your application. It also has commands that can be used to scaffold the code for components, services and modules.
Why you should be using it
With features like the Angular CLI and concepts like services through dependency injection and modularization, Angular allows you to write your application to scale effortlessly.
Angular has also been created with features to increase your overall productivity. It allows you to focus on pushing out new features and crushing the bugs that ‘magically’ appear in your app.
I hope you found this post insightful.
Be sure to check me out on Twitter for more Angular and development tips. Thanks for reading and have a great day! 😄
Oldest comments (13)
Nice post!
What I hate the most of Angular is the exhausting boiler before even reach the declaration of your component!, prettier does a very good job arranging everything for you, but some times you have 50 lines before the Component decorator.
What I love the most, is the use of TypeScript; I have worked with Ng, Vue and React, and the use of TS is amazing!; classes, interfaces, enums, types, it is remarkable all the unblocked features present in Ng Framework.
Ng framework, what is that, is it an acronym for Angular? Of course React works just fine with Typescript as well (as does Vue) ...
Hi Crisarji, thanks for reading!
I admit, the boilerplate code can drive a person nuts at times, but using the Angular CLI effectively is a great way of side stepping this. One can run a simple command such as
ng g component component-nameand all the boiler plate for the code is taken care of. One thing that gets to me though is the crazy amounts of imports you end up with in a complex component.The elephant in the room is of course React - why use Angular when React is so totally dominant nowadays, in which scenarios is Angular a better choice?
Angular is a better choice for large-scale projects with many developers working on the same project. Not all developers have the same expertise or code in the same way. Angular is an opinionated framework that guides everyone to write in the same way.
Yep that's what I gathered ... on the other hand, if the devs on a project already know React (and not Angular) then the story obviously becomes different already - and you could argue that React has also become somewhat more "opinionated" over the years - everybody seems to have converged on using Hooks now, to name an example, and things like routing and so on have effectively become part of the "core" tool.
It's also a hiring question. React being so dominant (because it's simpler) makes building and keeping a team a lot easier. There is no question that Angular can run laps around React when it comes to software quality, utiliy, scalability, maintainability. But if it's easier to pick up, code with, and get something written faster, then companies will prefer it always... Never the engineers that know better. :)
That's what I also think, React has become so dominant, everything else (Vue, Angular) is pretty niche ... it also means that the React ecosystem is a lot bigger, and so on. Yeah well to be honest I think this race is over ...
It's a bit simplistic to ignore any framework/library just because it's not popular. If that were a good argument, there would be no need for MacOS or Linux on the desktop, because Windows is more popular, there would be no need for iOS because Android is more popular, etc.
It all comes down to what is the best tool for the job, and that itself is answered through further questions:
I've been using Angular for about 6 years now, and the scale of the largest project I'm working on with it I don't think would be as simple or as clean were I to do in React. That codebase is almost 40,000 lines of code (although a little over half of that is unit/acceptance test code).
Totally agree, just seems that React is getting ever more dominant, not saying that that's a good thing per se but it seems to be the case ...
Hi Leob. Thanks for mentioning React. Answering your question could be a separate post entirely (and there are many "Angular vs React" posts out there). To me however, the short answer comes down to personal preference and what you want to build.
In my opinion, while you can use React for larger scale applications, it's better suited for smaller applications or websites that needs to get the most out of SEO because of the GatsbyJS and NextJS libraries. Angular is just much better suited for larger scale applications because of the way it structures it's code and all the things it includes the moment you create a new application (routing, reactive forms, RxJS etc).
No dedicated section for rxjs? But very good content ty!
Hi Edgar, thanks for reading! Now that I look at it, I should've mentioned RxJS, something to consider for my future content.