Things to Learn Prior to Getting Started with AngularJS

I, primarily being the Java Developer, wanted to play with Angular and other related Javascript frameworks. Thus, I got on to the AngularJS website and started playing and soon found myself left frustated as there were several concepts, such as following, which was difficult to comprehend, given my Java background and many of these concepts existing in Java world in different context with different meanings.

• Directives
• Templates
• Data Binding (Key to Angular; Other similar data binding frameworks are Knockout, Ember etc)
• Model-View-Controllers, Partial views
• Scope
• Modules

Later, I figured out that one of the key reasons for deeper learning curve and the whole confusion/frustation was the lack of knowledge on Javascript & related frameworks such as JQuery. Thus, I wandered around in search of what can get me started effectively, listed technologies to learn and got started. In a matter of a week or so, I found myself filled with confidence and ready to take on AngularJS and other similar Javascript frameworks.

Following are programming languages/frameworks/topics one could learn to get started with Angular in efficient and effective manner:

Javascript

As Angular is a Javascript framework, learning Javascript is a prime importance. Trying to learn Angular without knowing the basics of Javascript would only end up creating a frustating experience.

In my 15 years of experience or so, I have visited Javascript several times but never tried to go deeper into it as there was always someone who helped me achieve my objectives. This time, I made up my mind to learn it in a decent manner. And, Javascript lessons on Codecademy.com helped me a great deal. Thanks to those who created Codecademy.com. I was able to finish Javascript in a matter of 2-3 days in a satisfactory manner. Some of the key concepts that one would want to get hold on are following:

• DOM concepts
• Objects
• Functions
• Arrays & Variables such as String
• Conditionals

JQuery

While exploring Angular, I came across several pages where Angular was compared with JQuery. And, it became difficult to appreciate the advantages that Angular brings on the table with respect to JQuery as I was not very much familiar with JQuery. Also, there is something similar supported in Angular for DOM manipulation which is called as JQLite. Thus, I decided to learn it at the minimum such that I could understand the pros and cons and write simple JQuery scripts and comprehend associated complexities. Again, Codecademy.com came to a great help. If you are looking to quickly learn JQuery, get on with the JQuery lessons on Codecademy.com. Highly recommended. I spent a day or two and I got confident with JQuery.  Some of the topics I focused are following:

• Modifying (adding/updating/deleting) DOM elements
• Adding/removing/updating styles around DOM elements

Model-View-Controller (MVC) Concepts

As I was going through the Angular docs, I found the mention of MVC and how Angular is MVC based framework. It would be good for one to understand what is MVC framework, in general, before getting started. The good place to start will be the wikipedia page for MVC. The thing that puzzled me was the usage of MVC on client side. Quite difficult to comprehend given that I used MVC on server side for handling client requests and serving the responses. Simply speaking, MVC based architecture/design defines web interactions in form of three key components which are called as Model(M), Views (V) and Controllers. Model represents data, Views represents UI and Controllers represents a set of functions that changes the model based on users interactions. This is where I went on to search and found that there are concepts around Web components and Model-driven Views which are W3C recommended standards.

Web Components & Model-driven Views

To understand AngularJS well, one need to understand some of the  futuristic web standards concepts such as web components and model-driven views. They form the core pieces of the framework. One could watch/visit following videos/webpages to get a clearer picture on these concepts.

• W3C: Introduction to Web Components
• Model-driven Views
• Web Components and Model Driven Views
• Learn more about Web Components with these demos
• Building Next Generation Widgets with Web Components

Other Javascript Frameworks

Following are few other Javascript frameworks which would be good to understand to understand different aspects of Angular:

• Promises(asynchronous data processing)
• RequireJS (Asynchronous Module Definition(AMD) implementation)
• Handlebars (templating engine)