In this article, I’m going to give you a general overview of a very popular and widely used client-side framework called Angular. This Angular introduction is mostly aimed at newcomer developers who have little experience with JS frameworks and wish to learn the basic idea behind Angular as well as understand its differences from AngularJS.
So, let’s get this Angular introduction started, shall we?
Why Do I Need a Framework?
Most JS frameworks these days are opinionated, meaning they have their own philosophy of how the web app should be built and you may need to spend some time to learn the core concepts. Other solutions, like Backbone, do not instruct developers on how they should craft the project, thus some people even call such technologies simply libraries, rather than frameworks.
Angular Introduction: What Angular IS
This is a custom tag that will be processed by AngularJS and turned to a full-fledged calendar as instructed by the underlying code. (Of course, your job would be to code the appropriate directive.)
Another quite important thing was Dependency Injection, which allowed application components to be wired together in a way that facilitated reusable and testable code. Of course, there’s much more to AngularJS, but we’re not going to discuss it thoroughly in this article.
AngularJS became popular very quickly and received a lot of traction. Still, its maintainers decided to take another step further and proceeded to develop a new version which was initially named Angular 2 (later, simply Angular without the “JS” part). It’s no coincidence the framework received a new name: actually, it was fully re-written and redesigned, while many concepts were reconsidered.
The first stable release of Angular 2 was published in 2016, and since then AngularJS started to lose its popularity in favor of a new version. One of the main features of Angular 2 was the ability to develop for multiple platforms: web, mobile, and native desktop (whereas AngularJS has no mobile support out of the box).
Then, to make things even more complex, by the end of 2016, Angular 4 was released. “So, where is version 3?”, you might wonder. I was asking the same question, as it appears that version 3 was never published at all! How could this happen? As explained in the official blog post, maintainers decided to stick with the semantic versioning since Angular 2.
Following this principle, changing the major version (for example, “2.x.x” becomes “3.x.x”) means that some breaking changes were introduced. The problem is that the Angular Router component was already on version 3. Therefore, to fix this misalignment it was decided to skip Angular 3 altogether. Luckily, the transition from Angular 2 to 4 was less painful than from AngularJS to Angular 2, though many developers were still quite confused about all this mess.
Angular 5 was released in November 2017. It is also backwards compatible with prior Angular versions. Angular 6 should be released quite soon, hopefully giving us even more cool features and enhancements.
Angular Introduction: the Advantages of Angular
So, why Angular? Well, because it’s supported on various platforms (web, mobile, desktop native), it’s powerful, modern, has a nice ecosystem, and it’s just cool. Not convinced? Let me be a bit more eloquent then:
- Angular presents you not only the tools but also design patterns to build your project in a maintainable way. When an Angular application is crafted properly, you don’t end up with a tangle of classes and methods that are hard to modify and even harder to test. The code is structured conveniently and you won’t need to spend much time in order to understand what is going on.
- No need to reinvent the bicycle. With Angular, you already have lots of tools to start crafting the application right away. You have directives to give HTML elements dynamic behavior. You can power up the forms using
FormControland introduce various validation rules. You may easily send asynchronous HTTP requests of various types. You can set up routing with little hassle. And there are many more goodies that Angular can offer us!
- Components are decoupled. Angular strived to remove tight coupling between various components of the application. Injection happens in NodeJS-style and you may replace various components with ease.
- All DOM manipulation happens where it should happen. With Angular, you don’t tightly couple presentation and the application’s logic making your markup much cleaner and simpler.
- Testing is at the heart. Angular is meant to be thoroughly tested and it supports both unit and end-to-end testing with tools like Jasmine and Protractor.
- Angular is mobile and desktop-ready, meaning you have one framework for multiple platforms.
- Angular is actively maintained and has a large community and ecosystem. You can find lots of materials on this framework as well as many useful third-party tools.
So, we can say that Angular is not just a framework, but rather a platform that empowers developers to build applications for the web, mobile, and the desktop. You may learn more about its architecture in this guide.
Angular Introduction: Angular’s Complexities
I have to say that, unfortunately, Angular is quite a big and complex framework with its own philosophy, which can be challenging for newcomers to understand and get used to. Learning the framework’s concepts is not the only task, however; on top of this, you also have to be comfortable with a handful of additional technologies:
- It’s a good idea to get the grasp of the Angular CLI to speed up the development process even further.
- Node’s package manager npm is used extensively to install Angular itself and other components, so you’ll need to be comfortable with that as well.
- Learning how to set up a task runner like Gulp or Grunt can come in really handy, as there can be lots of things to be done before the application is actually deployed to production.
- Using minifiers (like UglifyJS) and bundlers (like Webpack) is also very common these days.
- While developing the app, it’s vital to be able to debug the code, so you should know how to work with debugging tools like Augury.
- Of course, it’s very important to test Angular applications, which can become very complex. One of the most popular testing tools out there are called Jasmine (which is a framework for testing) and Protractor (which is used for end-to-end testing).
So, as you see, there are quite a lot of things to learn in order to start creating client-side web applications. But don’t be put off: there are numerous resources on the net that may help you learn all these tools and technologies. Of course, you’ll need some time to get the grasp of them, but as a result, you’ll get valuable experience and will be able to create complex apps with confidence.
In this Angular introduction, we’ve discussed Angular, a client-side framework supporting multiple platforms. We’ve covered some of its features and concepts, and also have seen how it differs from AngularJS, the previous version of the framework.
Hopefully you’ve now got a basic idea of what Angular is and in what cases it may come in handy!
If you would like to start learning this framework today, check out the SitePoint Angular tutorial series. And, of course, there are many additional learning materials on the site, so make sure to check them out too.
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
HTML5 Games: Novice to Ninja