Learning AngularJS

What Is Angular?

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. Angular’s data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology.

Angular is what HTML would have been had it been designed for applications. HTML is a great declarative language for static documents. It does not contain much in the way of creating applications, and as a result building web applications is an exercise in what do I have to do to trick the browser into doing what I want?

The impedance mismatch between dynamic applications and static documents is often solved with:

  • a library – a collection of functions which are useful when writing web apps. Your code is in charge and it calls into the library when it sees fit, e.g. jQuery.
  • frameworks – a particular implementation of a web application, where your code fills in the details. The framework is in charge and it calls into your code when it needs something app specific, e.g. durandal, ember, etc.

Angular takes another approach. It attempts to minimize the impedance mismatch between document centric HTML and what an application needs by creating new HTML constructs. Angular teaches the browser new syntax through a construct we call directives. Examples include:

  • Data binding, as in {{}}.
  • DOM control structures for repeating/hiding DOM fragments.
  • Support for forms and form validation.
  • Attaching code-behind to DOM elements.
  • Grouping of HTML into reusable components.

Some resources to help learn AngularJS.

The documentation

These links point to documentation of AngularJS version 1.2.28 codenamed finnish-disembarkation.

  • AngularJS conceptual overview – Briefly touches on all of the important parts of AngularJS using a simple example. For a more in-depth explanation, see the tutorial.
  • AngularJS Developer Guide – Detailed introduction to AngularJS.
  • AngularJS Tutorial – A great way to get introduced to AngularJS is to work through this tutorial, which walks you through the construction of an AngularJS web app. The app you will build is a catalog that displays a list of Android devices, lets you filter the list to see only devices that interest you, and then view details for any device.
  • AngularJS API Docs – The AngularJS reference materials.

Tutorials

  • Shaping up with Angular.js – A Google sponsored Codeschool interactive tutorial to learn Angular.js. that takes you through all the steps of building an application.
  • Learn AngularJS – Short interactive tutorial that teaches the basics. Good to get a quick overview of what AngularJS is.
  • A Better Way to Learn AngularJS – This AngularJS course is built with the intent of exposing you to the best available resources on each Angular topic. It aims to present these topics richly, and from a variety of vantage points, in order to provide a more complete perspective on them.
  • AngularJS tutorial build a Gmail clone – Learn AngularJS by building a Gmail clone.

Other

  • ng-newsletter – The free, weekly newsletter of the best AngularJS content on the web.

AngularJS directives

Some AngularJS directive projects to watch.

  • UI Bootstrap – This repository contains a set of native AngularJS directives based on Bootstrap’s markup and CSS. As a result no dependency on jQuery or Bootstrap’s JavaScript is required.
  • UI Calendar – A complete AngularJS directive for the Arshaw FullCalendar.
  • Angular UI Grid – A data grid for AngularJS, part of the AngularUI suite.
  • AngularUI – The directives companion suite(s) to the AngularJS framework.
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