Adventures in Angular

This week, for one of my self-imposed learnings, I spent a bit of time trying to grasp and implement some of the functionalities of AngularJS.

What:

For those who aren’t familiar or haven’t worked with it — Angular is an open-source, front-end Javascript framework created by Google. It was built to provide an efficient system for handling some of the more cumbersome aspects of building single-page applications (SPAs). Single-page apps work by loading a single page in your browser and then changing that page’s content dynamically based on user input (as opposed to loading up a brand new page for each view). Because the page never needs to fully reload or redirect at any point — and because it only loads the info you’re using — SPAs allow for faster-performing apps with a better over-all user-experience.

AngularJS uses an MVC (model-view-controller) architectural approach — other frameworks that use this approach include Django (Python), Phoenix (Elixir), and Rails (Ruby). More on MVC structuring can be found in a previous post. Angular allows for the expansion of your HTML syntax by enabling the incorporation of ‘directives’, which add the functionality to create more dynamic templates.

Why Angular?

As mentioned earlier, one of the main cases for using Angular (and SPAs in general) is the improvements they make on application speed. While this typically references improvements made on the client-side, it can also very well be applied to upgrades on the end of the developer— as you become more nimble and comfortable with Angular “magic”, you can create well-structured, powerful applications with minimal code in less time.

AngularJS has a number of built-in features, which — once you have decent command of them — enable you to do a lot with a little. A few of these handy features are:

• Directives — mentioned above, and essentially allow you to expand functionality and dynamism of your markup with commands.
• Data Binding — allows you to sync data between the model and the view so that every time there is a change in the model, the view changes (and vice-versa).
• Services — allow you to access external data and establish reusable code to handle business logic in your app.
• Templates — because AngularJS has built-in ability to extend HTML with framework-specific elements and attributes (including directives, expressions, filters, and form controls), it enables the browser to access and render data from the model extremely quickly — making AngularJS an excellent templating engine.

I’ve been exploring Angular primarily through a combination of tutorials (both text and video), the ever-trusty (albeit, somewhat cluttered) Stack Overflow, and the official AngularJS documentation — one benefit of using a Google-backed technology is there is no shortage of documentation.

I’m still struggling a bit with implementing services, as I’ve been running up against some CORS (Cross-Origin Resource Sharing) issues, but am going to keep working through my practice-project apps. Looking forward to building something fun to show off soon... Happy Friday, y’all.

Song of the Day: “Lovers in the Parking Lot” by Solange