Why AngularJS

 

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.

AngularJS

Here a normal HTML Hello app.HelloHTML

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

HelloJavaScript

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

HelloJQuery

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

HelloAngular.pngNotice that here is no bootstrapping code.

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

HelloAngularMVC.png

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.

AngularServer.png

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…

HTML-JS-Future

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.

AngularJenkins

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

 

 

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: