Tag Archives: Angular.js

MEAN web development #8: Sockets will rock your socks!

This week I’m planning to keep it short. We’ll look at sockets and how to utilize them using Node.js. Luckily this is a relatively easy task for which Node.js is famous. Sockets enable you to build real time websites, something that is difficult at best using HTTP.
This will also be the last article in the series in which we’ll look at a new technology. If you read everything up til now you’re pretty well on your way to becoming a MEAN web developer! Next week we’ll have a wrap up and after that, who knows 🙂

  1. MEAN web development #1: MEAN, the what and why
  2. MEAN web development #2: Node.js in the back
  3. MEAN web development #3: More Node.js
  4. MEAN web development #4: All aboard the Node.js Express!
  5. MEAN web development #5: Jade and Express
  6. MEAN web development #6: AngularJS in the front
  7. MEAN web development #7: MongoDB and Mongoose
  8. MEAN web development #8: Sockets will rock your socks!
  9. MEAN web development #9: Some last remarks

As usual you can find the code samples for this post on my GitHub page under the mean8-blog repository.

What are sockets?

I won’t really go into technical details about sockets, or networks sockets. What is important to know is that a socket is basically an endpoint connection that allows communication between computers in a network. In an earlier post, Web development #1: Internet and the World Wide Web, I have briefly discussed the internet protocols TCP/IP (Transmission Control Protocol/Internet Protocol) and I have mentioned other protocols such as UDP (User Datagram Protocol). Those protocols make use of sockets to transfer data across the web.

As we have seen protocols such as HTTP (and HTTPS) make use of the TCP/IP protocol, which makes use of sockets. As we know HTTP is a one way street, although the data flow isn’t. Think about it, with HTTP we can request data, but that data also has to be sent back to the client. What HTTP can’t do, but sockets obviously can, is sent data to a client. Now what if a server could send data to a client even though the client didn’t request it (at that exact moment)? Look no further! And that is exactly why sockets programming is becoming more and more popular!

The protocol used for this bi-directional exchange of data is called WebSockets and was standardized in 2011. As this is still pretty new keep in mind that older web browsers do not support this protocol. One thing to keep in mind is that WebSockets is really an upgrade from HTTP. A socket connection is actually established using an HTTP request.

Node.js has made it pretty easy to work with sockets. There are actually already quite a lot of tutorials out there and most of them let you build a chat application. Of course you can build anything requiring real time data. Think of real time Facebook or Twitter updates. It’s especially interesting when you consider the recent Internet of Things (or IoT) where everything is connected to the web. Let’s say someone rings your doorbell, which is connected to the web and sends you a picture of your front porch when someone rings the bell. Would you want to use HTTP to constantly poll/request if someone has just rang your doorbell? No you wouldn’t! In these scenario’s sockets are a necessity!

Sockets and Node.js

So let’s set up a small Node.js server that supports sockets. We could use ‘pure’ WebSockets for this, but I’m going to use a library for this called socket.io. This will make our life a lot easier on both the back- and front-end. socket.io is a layer around WebSockets that simplifies the API and, more importantly, falls back on other methods if WebSockets isn’t supported.

We’ll start by creating a Node.js server that serves some HTML page. We’ve done that a few times before, so that should be no problem. Remember that WebSockets requires HTTP to work, so we’ll need the HTTP module as well. And, as always, I’ll be using Express as well.

var express = require('express');
var app = express();
var http = require('http').Server(app);

app.use(express.static('public'));

app.get(['/', '/index'], function (req, res) {
    res.sendFile(__dirname + '/public/client.html');
});

http.listen(80, '127.0.0.1');

After that we can install socket.io (npm install socket.io).

var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.use(express.static('public'));

app.get(['/', '/index'], function (req, res) {
    res.sendFile(__dirname + '/public/client.html');
});

io.on('connection', function(socket){
    console.log('A user connected!');
});

http.listen(80, '127.0.0.1');

As you can see the http object is used to create an instance of socket.io. After that we can listen to the connection event for incoming sockets.

Now socket.io does a little magic trick, it automatically serves socket.io to our front-end. That means creating a socket instance on the client is really easy. First of all we need to include the script somewhere.

<html>
    <head>
        <meta charset="utf-8">
        <title>Sockets example</title>
        <script src="/socket.io/socket.io.js"></script>
        <script src="client.js"></script>
    </head>
    <body>
        <h1>Sockets example</h1>
    </body>
</html>

And then we can use sockets in client.js.

var socket = io();

Wow, that was easy!

And you’ll notice that if you put that in /public/client.html and browse to localhost Node.js will log ‘A user connected!’ to the console! So we’re already connecting.

Now we’ve talked about EventEmitters before in MEAN web development #3: More Node.js. socket.io uses them extensively. Each socket has a special ”disconnect” event.

io.on('connection', function(socket){
    console.log('A user connected!');
    socket.on('disconnect', function () {
        console.log('A user disconnected...');
    });
});

If you try that, browse to localhost, and refresh the page, you’ll see “A user connectioned!”, “A user disconnected…” and “A user connected!” in the console. So this already works pretty sweet, right?

Let’s add another event. You know I like music and albums are always a favorite test object for me.

io.on('connection', function(socket){
    console.log('A user connected!');
    socket.on('disconnect', function () {
        console.log('A user disconnected...');
    });
    socket.on('add-album', function (album) {
        console.log(album);
    });
});

“Wait a minute!”, I hear you say, “No way a socket has an add-album event!” Well, not yet… Let’s check back in our front-end JavaScript again.

var socket = io();
socket.emit('add-album', {
    artist: 'Led Zeppelin',
    title: 'Led Zeppelin III'
});

Save it, browse to localhost again and surely will the console print the album. That’s pretty sweet!

But we’ll need more. After all, we want to receive data on our client! Of course we aren’t going to see any data unless we show it on our page.

Let’s first check out the server. This is really very easy. Ready?

io.emit('add-album', album);

Nice, we can simply use io.emit and all connections will get an update. So our client sends out an ‘add-album’ event to the server and the server sends an ‘add-album’ event back to the client. We could’ve used any name as event.

Let’s check the front-end. I’ve added in some AngularJS, which I’ve talked about before in MEAN web development #6: AngularJS in the front. Actually I’ve copied this example from that post and changed ‘book’ to ‘album’.

<html>
    <head>
        <meta charset="utf-8">
        <title>Sockets example</title>
        <script src="angular.min.js"></script>
        <script src="/socket.io/socket.io.js"></script>
        <script src="client.js"></script>
    </head>
        <body ng-app="socketsApp">
        <div ng-controller="socketsController">
 
            <h1>Sockets example</h1>
            <ul>
                <li ng-repeat="album in albums">
 {{ album.artist + ' - ' + album.title }}
                </li>
            </ul>
 
            <input type="text" ng-model="newArtist" />
            <input type="text" ng-model="newTitle" />
            <button ng-click="addAlbum()">Add album</button>
        </div>
    </body>
</html>

And here’s the JavaScript.

angular.module('socketsApp', [])
    .controller('socketsController', function ($scope) {
        
        var socket = io();
        
        $scope.newArtist = null;
        $scope.newTitle = null;
        $scope.albums = [];
        $scope.addAlbum = function () {
            socket.emit('add-album', {
                artist: $scope.newArtist,
                title: $scope.newTitle
            });
            $scope.newArtist = null;
            $scope.newTitle = null;
        };
        
        socket.on('add-album', function (album) {
            $scope.$apply(function () {
                $scope.albums.push(album);
            });
        });
    });

Notice the $apply function of AngularJS. It’s a detail, but I need it to execute the code in the AngularJS context so that the view gets updated immediately.
What really matters is the socket.on function. I don’t have to explain it, you know how it works. It’s the exact same code you use on the server!

Now open up two tabs, two browsers, two windows, two whatever, and browse to localhost. Enter an artist and title in one window and submit. Now switch to the other window and you’ll see the album you’ve just added in the other window! No refresh, no nothing! If you’re really using two windows put them next to each other and see the effect live in real time.

Now maybe you’re thinking this is awesome, but there’s no need to send back the object to the client that just sent it to the server. For this you can use socket.broadcast.emit. This will send out a message to all sockets, except the one that’s broadcasting.

socket.broadcast.emit('add-album', album);

And the front-end would now look as follows.

$scope.addAlbum = function () {
    var album = {
        artist: $scope.newArtist,
        title: $scope.newTitle
    };
    socket.emit('add-album', album);
    $scope.albums.push(album);
    $scope.newArtist = null;
    $scope.newTitle = null;
};

Pretty sweet!

Rooms

Let’s say you’re building that chat app we were talking about earlier (basically what we created here too). Now maybe you want your web site to have multiple chat rooms. A room for C# discussion, a room for JavaScript discussion, or maybe people can create their own rooms about whatever (maybe cars, music, movies). And perhaps you want to implement a private chat as well (one on one, or only invited people). How can you do this?

I’ll leave the previous example for what it is and start a new one. From our page we want to be able to create a room, join a room, send a message and leave a room. So let’s check out the Node.js server side.

io.on('connection', function(socket){
    console.log('A user connected!');
    socket.on('disconnect', function () {
        console.log('A user disconnected...');
    });
    socket.on('add-room', function (room) {
        console.log('Added:');
        console.log(room);
        socket.join(room.name);
        socket.broadcast.emit('add-room', room);
    });
    socket.on('join-room', function (room) {
        console.log('Joined:');
        console.log(room);
        socket.join(room);
    });
    socket.on('send-message', function (message) {
        console.log('Send:');
        console.log(message);         socket.broadcast.to(message.roomName).emit('receive-message', message);
    });
    socket.on('leave-room', function (room) {
        console.log('Leave:');
        console.log(room);
        socket.leave(room);
    });
});

That’s quite a bit of code, but there’s not much new, really! When someone adds a room we just broadcast the room to all other clients so everyone can see the new room. Additionally we ‘join’ the room using socket.join. This creates a group of sockets that can be notified at once. When a user joins a room we simply pass in a room name and again call socket.join. Then when someone sends a message to a room we simply call socket.broadcast.to(roomName) and now only clients that have joined that specific group will get a notification. That’s pretty easy, right? When we leave a room we simply call socket.leave and the client will stop receiving notifications from that specific room.

The client-side scripting for this example isn’t really interesting. You can get the complete example from GitHub. And yes, I admit, the HTML could use a little work. The JavaScript works the same as in the previous example. We simply use socket.emit, to send events to the server, and socket.on to receive events from the server. I’ll leave it as practice for the reader to add user names, persist chat rooms, get a list of active rooms, implement private rooms, etc.

If you want to do more with sockets and socket.io I can recommend reading Syncfusion’s Node.js Succinctly. It has a chapter on ‘vanilla’ sockets programming in Node.js (including an example on UDP) and a chapter on socket.io. If you’re still struggling with AngularJS I can recommend reading AngularJS Succinctly.
Additionally Manning has a great book on Node.js, Node.js in Action, which, of course, also covers sockets. A second edition of the book is also in the making!

Next week we’ll be wrapping up the MEAN web programming series! Happy coding!

MEAN web development #6: AngularJS in the front

Hi all and welcome back! Welcome back to me too as I’ve been away for a while. Let’s just say I was enjoying a summer vacation from blogging. But I’m back to finish this MEAN series! This week I’ve got AngularJS for you. Maybe next week too.
And in case you need a refresher, here are my previous posts about MEAN:

  1. MEAN web development #1: MEAN, the what and why
  2. MEAN web development #2: Node.js in the back
  3. MEAN web development #3: More Node.js
  4. MEAN web development #4: All aboard the Node.js Express!
  5. MEAN web development #5: Jade and Express
  6. MEAN web development #6: AngularJS in the front
  7. MEAN web development #7: MongoDB and Mongoose
  8. MEAN web development #8: Sockets will rock your socks!
  9. MEAN web development #9: Some last remarks

So in the previous post we’ve seen how we can build pages using the Jade template engine. Pretty sweet, but we need something bigger, better and badder for our front-end.

You can find the examples for this blog on my GitHub page in the mean6-blog repository.

What is AngularJS?

You may have heard of AngularJS before. It’s one of the most popular open-source front-end JavaScript frameworks for the web developed by Google. And, of course, it’s the A in MEAN. But what does it do?

AngularJS is an MVVM framework, much like Knockout.js. It does a bit more than Knockout.js does though. Next to bindings AngularJS can be used for DOM manipulation, more like jQuery. And it does even more, like handling AJAX and routing. As Google likes to put it: AngularJS is “Superheroic” in that it does just about everything.

So instead of talking let’s see some action! First of all we need to install AngularJS. You can download it from the AngularJS website, or you can install it through a package manager such as npm or Bower (install angular). I’ve discussed all three methods in earlier posts so I will not repeat them here. Anyway, if you’ve downloaded my samples from GitHub you’ll be good to go.

The first examples of this post can be tested using nothing but the file system. For later examples with AJAX we’re going to need a little Node.js server, so I’ll add that later. The non-server examples can be found in the front-end.html and the front-end.js files.

So let’s take a look at a first example.

<html>
    <head>
        <meta charset="utf-8">
        <title>AngularJS example</title>
        <script src="node_modules/angular/angular.min.js"></script>
    </head>
    <body ng-app>
        <p>This is your first angular expression: {{ 'This is AngularJS' + ' syntax!' }}</p>
    </body>
</html>

So there are two things going on here. First is the ng-app directive in the body element. This tells AngularJS that body is the root element of our application and that AngularJS should do its magic. You can place it anywhere you want (like in the html element, or maybe a div element somewhere) and a page can have multple ng-app directives (which I won’t be doing in this post).

Next is, of course, the weird {{ }} syntax, which is the syntax AngularJS uses for its bindings. In this case you’ll see that ‘This is AngularJS’ and ‘ syntax!’ are, indeed, appended in your browser, like it was just some JavaScript. Try using {{ 1 + 2 }} and you’ll see it will print ‘3’ since 1 + 2 equals 3 in JavaScript (and not ’12’).

Now let’s look at something really very cool. Suppose you want to bind some value to an input. Here’s how to do it.

<body ng-app>
    <p>Enter you name:
        <input type="text" ng-model="firstName" />
        <input type="text" ng-model="lastName" />
    </p>
    <p>You have entered: {{ firstName + ' ' + lastName }}</p>
</body>

No JavaScript required! Wow, that is so cool! And firstName and lastName are updated real time, while you’re typing! We bound our inputs using the ng-model directive which takes care of creating and binding the firstName and lastName properties.

Enter controllers

You’ll often want more control over your code and putting all of your JavaScript into your HTML is not a good idea. So we’ll want to use AngularJS with some custom JavaScript file that we wrote. This is where things get tricky. Not very tricky, but you just got to know how it works.

An AngularJS application is defined by modules. Modules then define controllers.

angular.module('fullNameApp', [])
    .controller('fullNameController', function ($scope) {
        $scope.firstName = '';
        $scope.lastName = '';
        $scope.fullName = function () {
            return $scope.firstName + ' ' + $scope.lastName;
        };
    });

So as we see here we create a module by calling the angular.module function and passing it more than one parameter. This returns an application so we can call the controller function directly on the return value. In the controller function we pass in the name of the controller, so we can use it in our HTML, and a constructor function, which receives a $scope variable to which we can append properties.

Now our HTML would look like this:

<html>
    <head>
        <meta charset="utf-8">
        <title>AngularJS example</title>
        <script src="node_modules/angular/angular.min.js"></script>
        <script src="front-end.js"></script>
    </head>
    <body ng-app="fullNameApp">
        <div ng-controller="fullNameController">
            <p>Enter you name:
                <input type="text" ng-model="firstName" />
                <input type="text" ng-model="lastName" />
            </p>
            <p>You have entered: {{ fullName() }}</p>
        </div>
    </body>
</html>

So as you can see we’ve now named our ng-app directive and we’ve added a div element with an ng-controller directive which points to our fullNameController controller. Finally, we now use the fullName function. Notice that we could now set default values in our controller and they’ll be displayed on our page automatically.

$scope.firstName = 'Sander';
$scope.lastName = 'Rossel';

More directives

So let’s take a look at some more directives that can help you build amazing pages. ng-repeat can be used to repeat an element for every item in a list. So let’s add a little array on our controller.

$scope.favoriteMovies = [
    'Star Wars',
    'Lord of the Rings',
    'Fight Club'
];

And display it in an unordered list.

<ul>
    <li ng-repeat="movie in favoriteMovies">
        {{ movie }}
    </li>
</ul>

Now we want to be able to add and delete items from the list. This next piece might blow your mind, but there’s a very simple directive to make a text input that can make a comma separated list and convert it to an array real time.

<input type="text" ng-model="favoriteMovies" ng-list />

So we bind the input to our favoriteMovies using ng-model and then use ng-list to convert it to a comma separated list. Try adding “, Pulp Fiction” (or whatever movie you like) to the text input and the movie will automatically be added to the unordered list we had before!
And if you want something else instead of a comma specifiy it in the ng-list, like so:

<input type="text" ng-model="favoriteMovies" ng-list=" | " />

And what if we add objects instead of strings?

$scope.favoriteAlbums = [
    { artist: 'The Beatles', title: "Sgt. Pepper's Lonely Hearts Club Band" },
    { artist: 'Moby', title: 'Play' },
    { artist: 'The Prodigy', title: 'Fat Of The Land' }
];
<ul>
    <li ng-repeat="album in favoriteAlbums">
        {{ album.artist + ' - ' + album.title }}
    </li>
</ul>

So how about making that editable?

<div ng-repeat="album in favoriteAlbums">
    <input type="text" ng-model="album.artist" />
    <input type="text" ng-model="album.title" />
</div>
<button ng-click="favoriteAlbums.push({})">New album</button>

And that’s where we see the ng-click in action. Of course we could’ve called a function on our controller too.

$scope.addAlbum = function () {
    $scope.favoriteAlbums.push({});
};
<button ng-click="addAlbum()">New album</button>

There’s a little problem with ng-repeat that isn’t quite obvious from these examples. ng-repeat creates a separate scope for each object in an array. For objects this is no problem, but if you were binding to an array of primitives, such as integers or strings, the values wouldn’t be updated. So just remember to use objects when wanting to update array elements.

So how about adding a little styling to our page? With the ng-class directive we can add styles to elements based on some boolean value. The best part is you can add multiple classes based on one or more boolean values. So I have added a little embedded CSS to our page.

<style>
    .colored {
        color: red;
    }
 
    .underlined {
        text-decoration: underline;
    }
</style>

And two properties in the controller to specify whether we want some text to be colored and/or underlined.

$scope.addColor = true;
$scope.addUnderline = false;

Now in our HTML we can add two checkboxes for the two properties above and then add an ng-class directive on some element that adds the CSS classes based on the JavaScript properties.

Color: <input type="checkbox" ng-model="addColor" />
Underline: <input type="checkbox" ng-model="addUnderline" />
<p ng-class="{ colored: addColor, underlined: addUnderline }">This text might be colored and/or underlined!</p>

Pretty sweet, right? As you can see ng-class should simply evaluate to an object where each property is a class name with a value true or false to specify whether it should be applied.

But there’s an alternative. We could simply specify a string too. So consider the next JavaScript function which returns a string:

$scope.getClasses = function () {
    var classes = '';
    if ($scope.addColor) {
        classes += 'colored ';
    }
    if ($scope.addUnderline) {
        classes += 'underlined ';
    }
    return classes;
};

We can now use ng-class as follows:

<p ng-class="getClasses()">This text might be colored and/or underlined!</p>

Or you could return an array where each element is either an object such as in the first method or a string such as in the second method. I’ll leave that as practice for the reader though.

Also fun to mention, when you’re inside an ng-repeat directive you can use ng-class-even and ng-class-odd which work exactly as ng-class, but apply the styles only to even or odd elements.

Filters

AngularJS had a feature called filters. It can format values or actually filter lists.

Let’s go back to the first example. Let’s suppose you wanted to show full name in just uppercase or in just lowercase. This is an easy task!

<p>You have entered: {{ fullName() | uppercase }}</p>
<p>You have entered: {{ fullName() | lowercase }}</p>

We can also use a filter to format numbers and dates. It looks kind of the same, except this time you throw in a format.

<p>
    <input type="text" ng-model="number"><br>
    Number (default): {{ number | number }}<br>
    Number (no fractions): {{ number | number: 0 }}<br>
    Number (three fractions): {{ number | number: 2 }}
</p>
<p>
    Date (default): {{ date | date }}<br>
    Date (dd-MM-yyyy): {{ date | date: 'dd-MM-yyyy' }}<br>
    Date (yy/M/d): {{ date | date: 'yy/M/d' }}<br>
    Date (full): {{ date | date: 'fullDate' }}<br>
    Date (long): {{ date | date: 'longDate' }}
</p>

And for arrays you can do some awesome stuff too!  For this we use the orderBy or filter filter.

<h3>Ordered by title</h3>
<ul>
    <li ng-repeat="album in favoriteAlbums | orderBy: 'title'">
        {{ album.artist + ' - ' + album.title }}
    </li>
</ul>
<h3>Ordered by artist reverse</h3>
<ul>
    <li ng-repeat="album in favoriteAlbums | orderBy: 'artist' : true">
        {{ album.artist + ' - ' + album.title }}
    </li>
</ul>
<h3>Filtered on everything with '*y*'</h3>
<ul>
    <li ng-repeat="album in favoriteAlbums | filter: 'y'">
        {{ album.artist + ' - ' + album.title }}
    </li>
</ul>
<h3>Filtered on artist with '*y*'</h3>
<ul>
    <li ng-repeat="album in favoriteAlbums | filter: { artist: 'y' }">
        {{ album.artist + ' - ' + album.title }}
    </li>
</ul>

Keep in mind that we can get these values from our JavaScript controller as well. You can make the most awesome dynamic filters with very little trouble. Just make sure you pass in an object with the same properties as the objects you’re repeating and set their values to the values you’d like to filter.

AJAX with AngularJS

So as mentioned AngularJS does a lot more than just HTML binding. One feature we’re going to look at here is that of the $http service. Needless to say we’ll need a little back-end server to communicate with, so for the AJAX examples I’m going to create a Node.js server and some new HTML and JavaScript so we can serve them up using our Node.js server.

Here’s the server:

var express = require('express');
var bodyParser = require('body-parser');
var app = express();

var books = [
    { title: 'Lord of the Rings', author: 'J.R.R. Tolkien' },
    { title: 'Harry Potter', author: 'J.K. Rowling' },
    { title: "The Hitchhiker's Guide to the Galaxy", author: 'Douglas Adams' }
];

app.use(bodyParser.json());
app.use(express.static('public'));

app.get(['/', '/index'], function (req, res) {
    res.sendFile(__dirname + '/public/ajax-example.html');
});

app.get('/books', function (req, res) {
    res.send(books);
});

app.post('/addBook', function (req, res) {
    var book = req.body;
    books.push(book);
    res.send(books);
});

var server = app.listen(80, '127.0.0.1');

So there’s a lot going on there. First of all I’ve added some Express. I’m also requiring body-parser (npm install body-parser), which is needed to get our POST data. Then I call the app.use function a couple of times. We’ve seen it before. It simply adds a middleware to a path. In this case we tell it to parse any JSON body so we can use it in our app. We also tell it that we can serve static files from the public folder (so we can serve the HTML and JavaScript file).
After that we serve the page by browsing to the root or root/index. I’ve also specified a GET for root/books, which simply returns a list of books (as JSON). And, what it’s all about, a POST to add a book to the list of books.

Let’s look at our front-end JavaScript.

angular.module('ajaxApp', [])
    .controller('ajaxController', function ($scope, $http) {
        $scope.newAuthor = null;
        $scope.newTitle = null;
        $scope.books = [];
        $scope.getBooks = function () {
            $http.get('http://localhost/books')
            .then(function (response) {
                $scope.books = response.data;
            }, function (response) {
                alert('Something went wrong while getting the books!');
            });
        };
    $scope.addBook = function () {
        $http.post('http://localhost/addBook', { author: $scope.newAuthor, title: $scope.newTitle })
            .then(function (response) {
                $scope.newAuthor = null;
                $scope.newTitle = null;
                $scope.books = response.data;
            }, function (response) {
                alert('Something went wrong while adding a new book!');
            });
        };
    });

So that’s quite a thing too! First of all notice a $http parameter being passed to the controller constructor function. We’ll need this $http parameter to make HTTP calls. Now we first use this in the getBooks function. You’ll see that using this $http stuff is actually very simple! We use $http.get and pass it our URL to get the books. It returns a promise, which has a then function that takes two callbacks, a success function and a failure function. The functions are executed once the asynchronous call returns (AJAX is asynchronous, remember?). So if everything goes right we simply assign the data (a list of books) to the books property. If something goes wrong we show an alert.

In the addBook function I’m using the $http.post function. It’s really similar to the get example, except we’re now passing in some data, a new book. Upon success the book list, including the new book, is returned and we reset the newAuthor and newTitle (nice example of two-way binding by the way).

Now for the HTML:

<html>
    <head>
        <meta charset="utf-8">
        <title>AngularJS AJAX example</title>
        <script src="angular.min.js"></script>
        <script src="ajax-example.js"></script>
    </head>
    <body ng-app="ajaxApp">
        <div ng-controller="ajaxController">
 
            <h2>AJAX example</h2>
            <button ng-click="getBooks()">Get books</button>
            <ul>
                <li ng-repeat="book in books">
                    {{ book.author + ' - ' + book.title }}
                </li>
            </ul>
 
            <input type="text" ng-model="newAuthor" />
            <input type="text" ng-model="newTitle" />
            <button ng-click="addBook()">Add book</button>
        </div>
    </body>
</html>

And there you have it!

So AngularJS can do two-way binding, supports MVVM and MVC architecture, it can do AJAX, but also routing, internationalization and localization, you can write custom directives and customize all you like, it supports testing and it has lots of directives I haven’t discussed like ng-show, ng-hide, ng-form, ng-blur… I guess Google wasn’t exaggerating when they called AngularJS ‘superheroic’ because it really seems to have some super powers!

And of course I’ll be leaving you with some recommended reading. As you know I’m a big fan of the (free) Succinctly series by Syncfusion, so here’s two must reads: AngularJS Succinctly and Node.js Succinctly. Also check out these awesome books by Manning Publications: AngularJS In Action, AngularJS In Depth, Node.js In Action (Second Edition) and Getting MEAN. And a book I’ve recently picked up at work: Pro AngularJS.
Well, that should keep you busy for a few months!

Happy coding!