Angular.js

Why Use Angular.js

You don’t have to have been in the programming world to have heard before about AngularJS. While it’s a relatively new technology, there are already multiple documents, books and articles exploring its features and ways of usage, its benefits and disadvantages, and more importantly it is currently being widely used to develop a wide variety of web applications and more.

If you’re new to this and haven’t actually had a chance to see the Angular power by yourself, you might be left wondering about what made these developers choose Angular for their projects. Here’s why I would choose it!
 
 
 

1. What should you keep in mind when choosing a framework?

Adding a new piece of technology to your web application is not a consideration to take lightly, since you have to know that there are a lot of factors to consider that can slow down or doom a project if the proper evaluation is not given right in the beginning. And when I say technology, I mean a framework, library, automation tool, whatever.

You have to see if this new technology you’re considering fulfills a number of criteria, such as whether it solves issues you’ve had in the past with the architecture of your application, or if you can master it in a reasonable time before starting to work with it. After all, you will not want to start using something on your project and then realize you don’t know how to make it work. Does Angular do these for you?

Additionally, you will have to decide if it will make your resulting software a more maintainable one and that can be created more quickly and effortlessly. Does Angular make it more testable and accepting of changes, or not? And moreover, does using it encourage you to use better programming practices, because that is important to making you a better programmer overall, which should be the case with everything you build.

There are other things to consider too, such as it’s completeness, the rate in which it changes and how do its creators and users support your journey with it. You will have to ask yourself if this new and unknown technology is right for your project by evaluating the features you will be able to add and how easily you can do that, whether it lowers the complexity levels you have to face or not.

Before choosing Angular, or every other technology for that matter, you will have to ask yourself these questions. So, while leaving you to ask these questions to yourself, I’m explaining below the reasons why Angular is it for me.

2. Angular and Architecture fixes it offers

Generally, most implementations of frameworks require you to split your app into MVC components in order to go about using MVC architecture, but then you have to string all these components together again for the endeavor to work properly. Comparatively, while Angular does require you to do the splitting up into MVC components of your app, it puts them back together by itself, with no input from you. Angular manages them properly, so that you don’t waste time or be tempted to use shortcuts that can impede the development process further on.

3. Angular is created by Google Developers

And while it looks cheap and unimportant that Angular is created by a big company’s engineers, it actually is kind of very important. That is because while a team of driven and dedicated developers can create a pretty good product, the selective process and experience of most Google employees is nothing to scoff at. This also ensures that this technology you’re preparing to use won’t be left unattended halfway through and leave your project unsupported for any problems and bugs it might encounter in the future. Plus not all developers that have created a technology for you to use are driven and passionate in making it work for you.

This also means that you not only have a large open community to learn from, but you also have skilled, highly-available engineers tasked to help you get your Angular questions answered. Because Angular is built by Google, you can be sure that you’re dealing with efficient and reliable code that will scale with your project. If you’re looking for a framework with a solid foundation, Angular is your choice!

4. Angular and it’s stand-out features

Angular would be your framework of choice if only based on the number of features it provides you with. Some of its more outstanding ones are:

  1. RESTful actions are quickly becoming the standard for communicating from the server to the client. In one line of JavaScript, you can quickly talk to the server and get the data you need to interact with your web pages.
  2. Views can be routed using the $routeProvider object, so you can link and organize your Views and Controllers. AngularJS also provides stateless controllers, which initialize and control the $scope object.
  3. Data Binding makes it possible for everything in the MVC architecture to be communicated throughout the UI whenever something changes, without the need for any wrappers, getters or setters, or anything else really. AngularJS handles all of this, so you can express your data as simply or complex as you like, with either arrays or custom types, or other ways that work for you.
  4. This bring us to the next cool feature: Dependency Injection. Since everything happens automatically, you can ask for your dependencies as parameters in AngularJS service functions, rather than one all-encompassing main() call to execute your code.
  5. Angular requires no additional platforms or frameworks, including testing.

These are the fundamental principles that Angular provides so that you can create an efficient, swift and maintainable front-end codebase. It can do all the heavy lifting on the client side, all while keeping in mind the user experience.

5. HTML for user interfaces

Another quirk of Angular is the fact that it uses the HTML to define the app’s user interface. Compared to a Javascript-produced user interface, the HTML one is less likely to let things break and not function properly, and is also more intuitive and easy. Plus you can bring in many more UI developers when the view is written in HTML.

HTML is also used to determine the execution of the app. There are attributes in Angular which are specialized to determine what gets loaded in a very straightforward way, without even mentioning how it will get loaded. This declarative approach greatly simplifies app development. Rather than spending time on how the program flows and what should get loaded first, you simply define what you want and Angular will take care of the dependencies.

6. Behavior with directives

Directives are Angular’s way of bringing additional functionality to HTML. It makes it possible for us to use a number of rich elements without ever having to manipulate the DOM to simulate them. All that our app needs to do is to assign attributes to elements to get any functionality out of the box.

Directives achieve this by enabling us to invent our own HTML elements. By putting all our DOM manipulation code into directives, we can separate them out of our MVC app. This allows our MVC app to only concern itself with updating the view with new data. How the view subsequently behaves is up to the directives.

Directives come in different forms: as an HTML element, as custom attributes, class names and comments as shown in the code snippet below, which allows them to be used as regular HTML elements.

example.html

 
<era></era> //element
<div era></div> //attribute
<div class="era"></div> //class name
<!-- directive: era --> //comment

Directives are designed to be standalone reusable elements separate from your app. In fact, if a particular element becomes adopted by the HTML5 standard, it should be as simple as removing your custom directive, and your app should behave exactly the same without needing to change your app.

Remember, as a rule of thumb, your controller should not manipulate the DOM directly. All DOM manipulations should be performed by directives.

7. Shorter code, more efficient and produced more easily

Angular can cover a great number of all the operations we have been doing in jQuery all along only with its ng-model and ng-repeat alone. Two-way data binding and saving to the server now takes a small number of lines in AngularJS, but in jQuery would require creating your own object, and several different click and event handlers. Switching from watching elements and events to watching a model is a big shift in the right direction, that makes everything easier in the long term.

It’s no news that with Angular you get to write less code. You don’t have to write your own MVC pipeline, since the view is defined using the more concise HTML. You get data models that are written more simply without the customary getters and setters, since Angular does all this for you. Data binding keeps you from having to insert data manually to the view and directives can be written by anyone else and still be integrated with your code seamlessly. All these are examples of how Angular keeps you from writing too much code and still get the same end result, if not better.

8. Testability

One of Angular most acclaimed features is its unit testing readiness. You already know that Angular as a whole is kept together by its Dependency Injection (DI), as it’s what Angular uses to manage the controllers and scopes. Because all your controllers depend on DI to pass it information, Angular’s unit tests are able to usurp DI to perform unit testing by injecting mock data into your controller and measuring the output and behavior. In fact, Angular already has a mock HTTP provider to inject fake server responses into controllers.

This is way better than the more traditional way of testing web apps by creating individual test pages for each component and then interacting it to see if it works.

9. Easy to get started

Another very important quality of Angular is the fact that you can get started with it almost immediately and it’s pretty easy to get the hang of it, not only to just get the initial idea but also become proficient in a minimal amount of time. There are some pretty awesome tutorials online on getting started with Angular, including free courses and books that guarantee you success in a very short amount of time.

10. Conclusions

There are many reasons why you would want to choose Angular for your projects, not only the ones mentioned above but also a lot more depending on what your requirements are and how you want to improve your web application. However, there are cases that Angular is not the best choice, such as for example, if you are writing a game or a computationally intensive math program, there is no reason why Angular would fit your particular problem domain. But for generic web apps, it should serve as a viable framework to build upon.

There are also differing opinions, most of which base their arguments on the fact that the same team is creating Angular 2 and they apparently wouldn’t do so if AngularJS is a viable option. However, my advice for you is: Keep in mind solely the needs and requirements of your app and then decide which technology is the most suitable one, without being influenced by the opinions of critics and Angular lovers.

Era Balliu

Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ivaylo Iliev
7 years ago

Hello, can you please give me a link for the AngularJS cookbook?
Thank you

Eleftheria Drosopoulou
Reply to  Ivaylo Iliev

Hello Ivaylo
,
You need to join our newsletter here: http://eepurl.com/6iVnH
After you enter a VALID email address, you will need to verify your subscription.
A verification email will be sent to you and after you successfully verify your email,
you will get a final welcome email which will contain the links to download the ebooks!

Gil Shapir
Gil Shapir
7 years ago

$Scope (mentioned in 4.2) is no more part of Angular JS 2 (however it has been a central entity within Angular JS 1)

Back to top button