Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

AngularJS: first impression

DZone's Guide to

AngularJS: first impression

· Web Dev Zone
Free Resource

Never build auth again! Okta makes it simple to implement authentication, authorization, MFA and more in minutes. Try the free developer API today! 

I have dived into AngularJS a bit to find out why everyone is talking about it. The fact that Misko Hevery has his hands in it is probably a point in its favor, but I never got the time to experiment with front end libraries since I live in the back end.

I'm still in an early part of the learning curve, playing with about controllers and directives, but here are my first impressions and how I approached my study.

Guides

I am following the wonderful A Better Way to Learn AngularJS , which links particular chapters of the official documentation and Egghead videos (a screencasts series). The guide explains why each new concept is important and provides a series of boxes to tick when you have finished to read each link or watched the videos.

Learning a library from its documentation is much more difficult: due to the curse of knowledge the information contained is written and reviewed through the lens of experts. You're probably better off with this kind of external guides written by developers who have followed the same road you're taking now (although the information contained in official documentation can be more accurate at times, especially with boring topics such as version differences and browser peculiarities such as IE 7 requiring a special form for the ng-app directive).

The guides also succeed in showing several design iterations with real concepts: for example, giving immediately the ability to pass parameters inside directives so that details can be pushed in from HTML code instead of mixing logic and presentation inside JavaScript code.

Concepts

What strikes me is that Angular introduces several higher level abstractions, and forces them onto the programmer without excessively pinning down your code with dependencies. For example:

  • defining a controller only involves a new-able named function, and thanks to duck typing its arguments can just be plain old JavaScript objects during testing.
  • .factory, .filter and several others Angular application method only require to pass in anonymous Factory Methods that can set up your objects. JavaScript is helping here, providing anonymous functions as the lowest common denominator between your code and the framework.
  • When it comes the time to approach more complex concepts such as transclusion, it's clear the developers have encountered these problems time and again in the past and have thought up a reusable solution (even giving it a fancy name, which is necessary to easily talk about the problem).

The approach followed is declarative as much as possible, but there is a clear separation and API between the engine and the components that can be plugged in. In other frameworks you learn that there is a Grid or Form component first, and when you need some tabs they have either to be provided by the framework itself or you're screwed. In Angular you learn the API of the directives engine first, and after that you can look at existing implementation of directives and decide if you like them or if you need to write your own.

(This comparison is not totally fair because Angular does not provide front end components like Ext JS and such.)

Build something

Forget about the tools ... buy a decent book and type in the programs by hand. One at a time thinking as you go. After 30 years you will get the hang of this and be a good programmer. -- Joe Armstrong

I can't stress this enough: go and build something with a new tool, even if you throw away it afterwards. Going through the motions of picking up the library code, writing some of your own and running/debugging it in the browser will make what you learn stick in your mind.

Perosnally, I built a cat generator with infinite scrolling that generate new cats selecting their names from a long array and their photo from an external API (nothing fancy). This simple example forced me to learn directives, controllers and some basic usage of the scope; at the same time, it gave me a goal which is more motivating that making two "foo:, bar:" forms talking with each other.

Quality

Angular is focused and humble: the documentation itself tells you to build CRUD screens, not application in need of huge customizations such as WYSIWYG editors or browser games. It augments your toolbox providing an engine and several patterns to build components on top of it.

Two-way binding is a fundamental feature of Angular, but it's difficult to get it right due to the plethora of events generated by browsers that have to be reconciled (I found a bug in the online examples of Angular that happened on pressing backspace twice in a modern version of Firefox within minutes.) That said, it will definitely make your life easier to have this feature extracted inside the framework instead of having to wire all events manually.

The fear I always have with frameworks is that if you don't already know how to move around in JavaScript and in the DOM, you're learning black magic. This is true of all frameworks: if you don't build one and throw it away first, you won't understand how they work under the hood. When things break it can be maddeningly and I hope you keep your development cycle so short to be able to take tiny steps, adding a line or two at a time to see what works and what doesn't until you build the confidence to write bigger components in one shot.

Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}