Starting with AngularJS

Monday, February 18, 2013

In my MVC 4 Fundamentals video I have a section using the ASP.NET Web API on the server with jQuery and Handlebars on the client to build a somewhat interactive UI. A few people have asked what the code would look like with AngularJS.

The first part of the example, display a list of videos, is easy with Angular. Here is the HTML:

<div ng-app ng-controller="VideoController">    
    <table>
        <thead>
            <th>Title</th>
            <th>Length</th>
            <th></th>
        </thead>
        <tbody>                 
        <tr data-id="{{video.Id}}" ng-repeat="video in videos">
            <td>{{video.Title}}</td>
            <td>{{video.Length}}</td>
            <td>
                <button class="editVideo">Edit</button>
                <button class="deleteVideo">Delete</button>
            </td>
        </tr>
        </tbody>
    </table>    
</div>

The ng-app directive represents the application "root" for angular. Most applications would have ng-app on the body element, or the top html element, but you can also root the application further into the DOM. The ng-controller directive provides the name of a controller function for Angular to find and invoke. The controller provides the model and allows us to use data binding in between the model and the view (the HTML).

The controller function looks like this:

var VideoController = function($scope,$http) {
    $http.get('/api/videos/').success(function(data) {
        $scope.videos = data;
    });
};

Angular will inject the $scope and $http parameters into the controller (names are significant). $scope is where we can place the model, while $http is a service that provides low-level HTTP communication (we'll see a higher level service in a later post). The above code is calling a Web API controller on the server to retrieve a list of videos, and placing them into the $scope when the call is successful. Back in the HTML, an ng-repeater will loop through the videos when they become available (Angular knows when the model changes), and outputs table rows with video information (via {{ }} templates).

The above is a quick demonstration of why I like Angular. It's quick, clean, and easy to learn. In my original demo I also inserted, deleted, and edited videos. We'll take a look at these scenarios next.


Comments
gravatar Steve Gentile Monday, February 18, 2013
good to see you engaging on this - I've also been learning with AngularJS over the last few weeks. There is much here I prefer over KnockoutJs
gravatar Andrew Benz Monday, February 18, 2013
What I've liked about Angular so far is that while it's doing a lot of magic behind the scenes, it lets most of the javascript you write stay ignorant of that magic. The abstraction isn't perfect, but it's the best I've used so far.
gravatar Ricardo Trujillo Tuesday, February 19, 2013
I am using angularJS for a personal project for three months, and has simplified my developer life! I used to use Jquery, Backbone, on all of those javascript frameworks, and of course wrote hundreds of lines of javascript code (even with coffee), but actually, when I take a look at this project JS files, I see far fewer lineas of javascript code.
gravatar Mike Tuesday, February 19, 2013
In a previous post you seemed to indicate that you were not a fan of JS frameworks in general, and also you happened to use Knockout as an example. So I'm curious why you like Angular, especially as compared to Knockout. I'm still struggling to decide which framework to use, if any.
gravatar Scott Tuesday, February 19, 2013
@Mike: Of course there are many intangibles, but when I started trying Angular the abstractions, the code, and the patterns all made sense to me. The framework feels natural, my model is still my model (POJSO, if you will), and even the tutorials show how to write tests for the code. All those things add up to me liking the framework quite a lot.
gravatar Mike Tuesday, February 19, 2013
I've only played around a bit with KO, and actually did find it really fun to use, so I have nothing whatsoever negative to say about it, but I suspected, based only on cursory glances at ToDoMVC, that Angular would be the better framework. I chose KO to play with first because it seemed to be easier to get started with, and the easiest to layer on after-the-fact to existing applications, and would be an easier sell to a MS shop. (And these are important.) Then there's Bootstrap which I'm also now evaluating. It is getting confusing out there so I am very glad that you are writing about these things, and please do give your opinions!
gravatar Nevin House Tuesday, March 5, 2013
I would be very curious on your opinion of how AngularJS and its directives compare to the simpler KnockoutJS (which supports MVC) and the better known BackboneJS, thank you.
gravatar Scott Allen Saturday, March 9, 2013
@Nevin: AngularJS is a much bigger framework that also does routing, dependency injection, and more. I prefer Angulars approach to data binding (no observables) as well as the {{}} syntax.
gravatar Saurabh Monday, April 1, 2013
Hi Scott, I would love to see a complete post on ASP.NET MVC 4 with AngularJs. Is there any plan for this? I am about to start a new project in which i want to introduce both , Please let me know if you are planning to write something on it.
gravatar Scott Allen Monday, April 1, 2013
@Saurabh nothing formal in the works as yet. If I did it would be at least a few months out from now, sorry!
gravatar Saurabh Tuesday, April 2, 2013
@Scott : Thanks for letting me know, is there any link you wanna suggest on the topic?
gravatar Scott Allen Tuesday, April 2, 2013
@Saurabh: I thought the AngularJS tutorial (http://docs.angularjs.org/tutorial/index) was a great way to get started for myself.
Comments are now closed.
by K. Scott Allen K.Scott Allen
My Pluralsight Courses
The Podcast!