Saturday, June 8, 2013

How to start learning AngularJS?

If you are a web developer you definitely want to do your job in a better and cleaner way. Software developers in other worlds like those who work on XAML projects already take benefits of two way binding and also support for MVVM patterns.

AngularJS brings support for MV* patterns by giving you the ability of two way binding and using controllers in a very clean way. It also gives you the ability to extend HTML tags and create your own web application with your own HTML controls. 

Anyway I think the best way to learn about a new framework is to dive deep into it and quickly start writing some code in it. So I suggest you to try the following code to test it in reality without spending a big time. It needs maximum 30 minutes of your time to prepare your Visual Studio 2012 environment and see it in action.

Preparaing a sample web project using AngularJS in VS2012 

1- Create an empty solution, add a blank ASP.NET web project, Add a HTML file called index.html
2- Get 'Angular JS' package by Nuget (The package author is Fitzchak Yitzchaki)
3- If you are using Resharper, add the Resharper plugin for AngularJS (Link 3 bellow) and execute the bat file. It's safe. Close VS2012 ebfore running the bat file.
4- If you are not using Resharper then you can tweek your VS2012 using some modified files of the VS Intellisense given on this link.
4- Open VS2012 and copy the following HTML code into your index file:

<!DOCTYPE html>
<html xmlns="">
    <head ng-change ="test">
        <title></ title>
    </head >
    <body >
        <div ng-app="">
            <input type="text" ng-model ="data.message"/>
            <h1> {{data.message }}</ h1>

        <script type="text/javascript" src ="Scripts/angular.js"></script>
    </body >

Enjoy AngularJS!

The best reading material: Original Conceptual Guide

Nice short videos to teach AngularJS

Intellisense in VS2012 without ReSharper

Intellisense in VS2012 with ReSharper (plugin)