5 Reasons You Should Switch to AngularJS

0
878

I learned to program websites using JavaScript and PHP (HTML/CSS also, but these are a must for any developer). It was the path of least resistance for a number of reasons: 1) PHP and HTML work well together so it makes it easy to understand the basics, you can see how requests work directly in HTML using the action tag, no need to understand controllers, routes, etc; 2) You can get away with using HTML/JavaScript 95% of the time with basic websites –no need to have an extensive backend, possibly just sending simple emails; 3) there are TONS of documentation, Stack Overflow questions and blog posts.

Having studied computer science in college, I had strong fundamentals in backend systems, algorithms and debugging, so the change to web development was disappointing, to say the least. No more IDEs and being able to comb through your code as I had been taught; instead it is more of an experiment where you change some code, pray a little bit and hope everything looks decent. Don’t get me wrong– there are methods/tools that you can use for debugging in web development– but in comparison to backend programming, it is messier. A lot of hit-and-miss– not much algorithmic problem solving.

And after a year of that, I said: I am done with that. I have used a variety of frameworks and technologies to change my development approach and AngularJS is one that I recommend. Here are the top 5 reasons why:

  1. Automatic updates to data: one thing I hate is having to do something over and over again– as any programmer would. In vanilla JavaScript or jQuery we are constantly using JS to update values; for example, if clicking on a button results in an action, many times we want to confirm that it functioned correctly (e.g. Your message has sent successfully!), so we would show the HTML element with this confirmation text or we would replace the text of an HTML element with the new message. We always have to check stuff and update it directly in the HTML. In AngularJS, we can create a model that represents a page, a section or an area of the HTML document and then change the attributes of the model, which are then automatically updated by AngularJS– no need to access HTML directly.
  2. You Can Model the Front End: as I explained in #1, we create models that represent portions of a page. For example, let’s say I want to create a wizard that will import a file for the user based on some inputs (like the name of the file, where it is stored, where it should be saved, etc). I could create a model that controls this. The model would consist of variables that describe the values for the inputs and the functions representing actions associated with the wizard, like saving the data or reseting the data inputs. The key part of this is that the models are directly linked to the HTML elements (AngualrJS has its own attributes within HTML elements). So I add the name of this data-import model to an HTML element using the AngularJS attributes, and now it knows which model it is associated with in JavaScript. This means easy updating of values and it makes our website’s front-end much more modular, clean and easy to read.
  3. Hiding/Showing Elements is a Breeze: this task is one that web developers constantly deal with for many reasons. We can use ng-show, an attribute in an HTML element, that holds a boolean expression (an expression that evaluates to true or false); the element is shown if the expression evaluates to true (or hidden if false), and will be updated automatically! Continuing from our previous example of the model for the data-import wizard, we could have a series of steps in the wizard (e.g. first, type name; second, choose the data source; third, select where to save), where the elements shown in the first step only show if a certain value is true, and the same holds for the other steps. We could simply have our “Next” button in the wizard change this value in the model, and the ng-show attribute will automatically hide the the current step and go to the next.
  4. ng-repeat: this attribute, which can be added to an HTML element, will repeat the printing of an HTML element based on a JavaScript object. For example, say we needed to show a select input box, where the user will select a value from a list. We could create this list from an array of Strings that holds each option. In a select input, we need an “<option>” element for each value; we could create one of these elements with ng-repeat=”value in optionsArray”, which will create an option element for every value in the array. Then we can use “value” as a variable in our logic to output the name.
  5. Reusability with Directives: one of the key aspects of AngularJS is its ability to create “directives.” This allows you to create a function or action that will be used throughout the web application without having to worry about the specific case or HTML elements. For example, in our data-import wizard, we could create a directive that sends a file to our server at a specified location. Our directive lets you set the file and the save location, so it is generalized, but the code that sends the XHR request will remain the same. Directives also allow these functions to be called asynchronously, so that your data model (the controller) can move on and smoothly run the application without waiting.

These are just 5 great reasons to use AngularJS, but there are tons more that make developing web applications easier. There is always a learning curve when it comes to learning new technologies, but I can certainly vouch that it is worth the time for AngularJS.

LEAVE A REPLY

Please enter your comment!
Please enter your name here