Angularizing the Page

Angular.js essentially allows you to data bind JavaScript objects to the DOM (also known as HTML elements). You basically wire up objects in a controller to something called $scope and declare in your HTML how it should be displayed.

Include Angular before your closing </body> tag:

<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js'></script>
Now declare your <body> element as an Angular app:
<body ng-app='app'>

For this to work, you need to first declare a matching module. Do the following in a <script> tag after the Angular include tag:

  <script>
    angular.module('app', [])
  </script>

Here you will be working in a <script> tag inside the HTML rather than referencing external JavaScript files. It might seem messy, but this is just temporary until you get Node to serve your HTML for you.

Modules are a way to separate parts of Angular code. This is a module declaration; the first argument is the name of the module, and the second is an array of modules that this module depends on. You’ll use modules to get access to things such as ngAnimate (animation tools), ngRoute (client-side router for single-page apps), or modules of your own. I’ll talk more about modules later, but for now just know that your app must be declared as a module.

To declare a controller, you call the .controller() method on an instance of a module. This method takes two arguments: a name and a function used to build an instance of the controller. All Angular components follow this same pattern.

Make your <script> tag look like the following:

<script>
  var app = angular.module('app', [])
  app.controller('PostsCtrl', function ($scope) {
    $scope.posts = [
      {
        username: 'dickeyxxx',
        body: 'Node rules!'
      },
      {
        username: 'jeffdickey',
        body: 'trying out angular.js...'
      }
    ]
  })
</script>

Here you’re storing the app module into a variable app and then creating a controller on it called PostsCtrl. This controller has an array that represents the posts you see in the HTML.

When you declare a controller, you do what’s known in the Angular world as dependency inject $scope.

Creating a controller (or other Angular component) involves declaring a function like you did earlier. When you declare arguments, Angular looks up the dependencies based on what you named them. If you rename $scope to $foobar, for example, you would see an error (although not with the code you have right now since the controller wouldn’t load). In my opinion, this dependency injection is the most powerful part of Angular.

What is $scope? It’s simply an object you can access in the HTML and in the controller.

You’ll see more examples of dependencies later. For now, let’s just dump $scope.posts onto the page. Add the following HTML to the page (keep your existing static HTML mockup for reference):

<div ng-controller='PostsCtrl'>
  {{ posts }}
</div>

You should now see a JSON representation of the controller’s $scope.posts on the page. You can have JavaScript inside those double-curly brackets, so if you wanted to see just the body of the first post, you would do this:

<div ng-controller='PostsCtrl'>
  {{ posts[0].body }}
</div>

Remember that when sharing controller data to the view, use $scope. When referencing controller data from the view, leave out $scope.

Now that you’re this far, you can finish Angularizing this page, at least the static version of it. Here’s a complete example:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body ng-app='app'>
  <div ng-controller='PostsCtrl' class='container'>
    <h1>Recent Posts</h1>
    <ul class='list-group'>
      <li ng-repeat='post in posts' class='list-group-item'>
        <strong>@{{ post.username }}</strong>
        <span>{{ post.body }}</span>
      </li>
    </ul>
  </div>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js'></script>
  <script>
    var app = angular.module('app', [])
    app.controller('PostsCtrl', function ($scope) {
      $scope.posts = [
        {
          username: 'dickeyxxx',
          body: 'Node rules!'
        },
        {
          username: 'jeffdickey',
          body: 'trying out angular.js...'
        }
      ]
    })
  </script>
</body>