AngularJS is a beautiful framework by Misko Hevery. There is so much we can do with it when it comes to web applications.

The following presents different technologies and frameworks and what they are tackling. It is based on that initial state that AngularJS has been approached in order to provide a new way of doing things.

Here a normal HTML Hello app.

Here is how we would get the same result in JavaScript. Hummm…

And here is how JQuery allows us to do the same with less characters.

And then comes AngularJS which does the same, in a much nicer way.

Notice that here is no bootstrapping code.

Ideally, you want to separate the View and Controller, and you have the following.

At no point is a callback function needed, or do you need to worry about when to execute the code.

The following shows how to handle form automatic update of the HTML document following some input changes. Left is JQuery and right is AngularJS.

Now, think about when comes the time to test your code.

Is Misko saying that JQuery sucks? No no no.
We all love JQuery. As a matter of fact, AngularJS is built on top of JQuery.
JQuery is fantastic for DOM manipulation. However, a web application is much more than just DOM manipulation.

JQuery allows you to “type less”. AngularJS increases the level of abstraction. It is really what a web browser would have been, had it been designed for a web application.

Angular goes further than JQuery, as it allows you to build your own Domain Specific Language (DSL) for your web application.

On top of reading from and writing to the DOM, the last piece we need inside any web application is the ability to communicate with the server. The following shows how a random greeting is taken from the server and used to update the message sent to the user.

The code above uses Dependency Injection (DI) in order to retrieve the proper XHR function to use. By parsing the function definition and calling inside a set of services.
An advantage of the built-in DI use here is that when comes testing time, we can provide a fake XHR function, which we cannot really do that easily in JQuery.

Welcome JavaScript Test Driver (JTD). “JsTestDriver aims to help javascript developers use good TDD practices and aims to make writing unit tests as easy as what already exists today for java with JUnit.”. Here it is.

DI also comes with the use of a “global state”. Angular takes care of removing this so that we can have 2 angular applications executing on the same web page without interfering with each other.
AngularJS also integrates unit/integration testing and end-to-end testing.

More notes…

We can summarize and say that AngularJS does:
– Increase the level of abstraction
– Help to make your application testable
It also is HTML/JS/Browser & Developer friendly.
Angular is also pure JavaScript, pure Client-side, tiny (25kB), composed of 2 elements. An HTML compiler and a JavaScript framework.

If you are curious, you can click the picture below the Jenkins CI pipeline used by AngularJS.

Click here to get access to an interesting explanation of Angular. This has been the basis of this post.

________
Links:
https://angularjs.org/
http://github.com/angular/angular
http://ci.angularjs.org/
http://www.w3schools.com/angular/angular_intro.asp
http://www.codecademy.com/learn/learn-angularjs
http://angular.io/
http://www.youtube.com/user/angularjs
Angular Team weekly meeting notes