AngularJS, the brave framework

AngularJS Logo
AngularJS

A while back I wrote about Front End development and how picking the right technology or framework will affect the direction and success of our development projects. This time I am going to write about a specific framework AngularJS and how this brave little framework has changed the way front end development is being done.

What is AngularJS?

AngularJS is an open-source framework that is developed and maintained by Google (with large amounts of contribution from the community) it makes front end development easy by doing two things well.

  1. Angular forces the developer to use the Model View Controller architecture  (Angular also allows for Model View ViewModel, I want to write about the different architectures in a future blog)
  2. It handles data binding between Model and View in a really elegant way.

Angular Design Goals

Straight from the Angular wikipedia page:

AngularJS’s design goals include:

  • to decouple DOM manipulation from application logic. The difficulty of this is dramatically affected by the way the code is structured.
  • to decouple the client side of an application from the server side. This allows development work to progress in parallel, and allows for reuse of both sides.
  • to provide structure for the journey of building an application: from designing the UI, through writing the business logic, to testing.

Decoupling DOM manipulation from application logic results in smaller, easy to digest Javascript files. We all have a horror story of the two thousand line spaghetti .js file which everyone is afraid to touch. Taking all the DOM manipulation code out of the business logic code makes the code easier to read and easier to debug.

Decoupling the client side of an application from the server side means that the front end team can continue to develop and test and just mock out the services that are require. Then when the server side completes the services we just need to do some integration.

Providing structure. AngularJS helps developers focus on the piece of code they are currently writing. If we are busy writing a DOM manipulating directive then that’s all we need to focus on. Time to write some business logic? Great that goes in the controller so lets jump there and write that. How about some unit tests? Nice and easy because we didn’t mix up our DOM manipulation with our business code our tests can be written easier.

Extending HTML using directive

Directives are Angular’s way to help you develop web applications. Directives are what HTML would be like if HTML was designed with web applications in mind.

In essence directives are markers on DOM elements that let Angular attach specific behaviour to those elements, they even allow Angular to completely change how those elements look.

Some examples that we would use directives for:

Hiding a <div> element based on the value inside the “hideDiv” value.

<div ng-hide="hideDiv"></div>

Disable a button:

<button ng-disabled="disableSubmit">Submit</button>

And many more

Angular comes built in with directives that help us get started developing, it’s library of directives is pretty extensive. Angular has also made it really easy on us to write our own directives.

Some directives attach behaviour to elements while others change the entire element and how it looks. Directives deserve their own post (which is also coming soon). This will help you get started.

Two way data binding

Using some pretty cool magic Angular automatically synchronises data between model and views. So if for example we use the JSON object I wrote about last week:

{
"music-man" : { 
 "first-name" : "Bob",
 "last-name" : "Dylan",
 "age" : 74,
 "instruments" : ["Vocals", "Guitar", "Keyboards", "Harmonica"],
 "favouriteBeverage" : "probably Coffee"
 }
}

And we bound favouriteBeverage to an HTML input box like this:

<input type="text" ng-model="$scope.music-man.favouriteBeverage" />

If the model was somehow updated (maybe via a method call) the text inside the input box would be updated. Also if the text inside the input box is updated then the music-man’s favouriteBeverage value inside the JSON object would also be updated.

This form of data binding is a boon for people who have worked with Javascript back in the day. A lot of your effort was invested into writing code that would update the view based on model changes and vice versa. Which is no longer needed.

Active community

Angular is maintained and developed by Google, however it has a really active community. In fact as part of the ng-conf which is a community run conference on Angular, in the Keynote Brad Green and Igor Minar (the guys at Google who run the Angular project) dedicated a large portion of their talk to thanking the really active community.

In the last month the Angular team has managed to do 107 pulls on their GitHub account (stats here).

Excluding merges, 48 authors have pushed 472 commits to master and 891 commits to all branches. On master, 1,092 files have changed and there have been 62,439 additions and 49,525 deletions.

 

There is a lot more to Angular and I will be covering some of it as the weeks go by.

Until next time, may things that were difficult become easy for you.

-R

 

 

4 Comments

  1. reenen said:

    how does angular relate to node? I recently installed node at work and are really impressed so far.

    2015/06/13
    Reply
    • rafal said:

      AngularJS is strictly a front end framework. All the Angular code you write runs on the users browser. Node.js is for the backend, it’s brilliant and I want to write something about how good it is soon.
      In fact an Angular Front-End and a Node.js backend it a very popular combination.

      2015/06/13
      Reply
  2. […] week I wrote about AngularJS on a high level. This week I am going to focus on AngularJS directives, what makes them so good, […]

    2015/06/20
    Reply
  3. […] creating front ends and most recently front ends using AngularJS (which I’ve written about in past blogs). I enjoy writing front ends there is something rewarding in seeing your thoughts translated […]

    2015/07/19
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *