Monday, July 7, 2014

Learning Angular

Opening:

I keep hearing how awesome this AngularJS (Angular) is. Thus, I will walk through a tutorial and make a webpage with Angular to see what I think.

What is AngularJS:

Angular is a Model View Whatever (MVW) Framework meaning it has a data structure in the background which feeds the view with the data to display to the user, allowing you to update the page and post the updated data easier.

My initial thoughts:

First thoughts of Angular after reading https://angularjs.org/ are this Javascript (JS) plug-in will make life easier in dealing with dynamic webpages by allowing me to have a model view controller (MVC) on the client side. This way I don't have to worry about how to handle the data given to me from the server I can focus on how to display and manipulate the data for the user.

The meat:

Alrighty, let's get started YEAH. docs.angularjs.org/tutorial this is the official Angular tutorial location. It is where I learned how to use Angular. What I've learned from the tutorial:

  • Angular has some really cool features built in.
  • Angular expects you to follow a certain design and implementation path. It allows you to do things a different way but it makes life hard if you try.
  • Doing Test Driven Development (TDD) with Angular is simple and suggested.
  • The Angular community is active and alive (they're not robots).

After going through the tutorial I decided to make a website that would allow me to rate drinks. The layout is pretty simple. It will have a form that will allow me to put in the name of the drink, give it a rating via stars, and then a description of the drink. It will display a list of the drinks I have rated with X amount of characters from the description as a snippet. When you click on the rating or name of drink it will take you to a page that has the full description. It also allows the list to be filtered. Here is the page I made Drink Rating

The page has 2 Angular plug-ins that allow me to add in the rating with stars and also to do local storage (no db). Since both plug-ins followed the Angular design there was no fancy do this or do that to make them work. To set up the local storage plug-in with Angular, I simply including the JS file and referencing the local storage variable in the angular controller. With the rating plug-in I added code to the view so the plug-in would know where to store the data and how to display it.

The one big downside I have seen with Angular, which could also be a big down-side for you depending on how you intend to use Angular, is that Angular is strict on its usage and how the data flows. IF you have an existing project you will have a hard time adding it to that project. Another issue is Angular no longer supports IE8. These two issues will limit my use of Angular in my world since most people want support for IE8 still and/or already have an existing project.

Conclusion - I would only use Angular if I was creating a new app focusing on 'new' browsers. I do know that you can get Angular to work with IE8 or IE7 but who really wants to do that?

In the end pro and con List:

PRO:

  • Large community for support and tools
  • Makes handling Client side easy and dynamic. 
  • The time spent spinning up a site that needs to be dynamic is GREATLY reduced
  • It is designed with TDD in mind

CON:

  • Can't easily add it to an exciting site
  • Does not support some older browsers (granted they are OLD IE browsers) 

The END:

I found that after playing around and using Angular I was able to easily create, manipulate and show data. It has traditionally been a pain to do that on the client and it added a nice layer of structure. Being designed with TDD in mind makes it worth putting the effort to do TDD. If I am able to use Angular in future projects I will. Once you use Angular you will see the light at the end of the Angular tunnel, I promise.

No comments:

Post a Comment