Beginning AngularJS

Chapter 8 ■ Organizing Views

$scope.message = 'There seems to be a problem finding the page you wanted';
$scope.attemptedPath = $location.path();
});

We will come back to this code listing shortly, but for now, take note that we have made sure to add a script
reference to the ngRoute module, and we have declared our dependency on it with the following line. Omitting either
of these will result in a non-starter.

var app = angular.module('app', ['ngRoute']);

I used the Bootstrap framework to make this demo web site look presentable. Bootstrap is a popular front-end
framework that contains HTML- and CSS-based design templates for typography, forms, buttons, navigation, and other
interface components. Many web designers and developers find it indispensable, as it allows you to build great-looking
web sites quickly. It is very easy to get started with Bootstrap. You can find out more at http://getbootstrap.com.
Figure 8-2 shows the result of my efforts on this demo web site. Each part of the web site has essentially the same
look and feel, because the view templates, as you will soon see, ultimately become part of this single page. Factoring
out these aspects of the code, all we really have here is the JavaScript code, which we will get to shortly, and a header
containing some navigation links. What we don’t see is any actual content. Near the end of the listing, however, we
encounter the ngView directive. This directive is an important part of the routing system, and its job is to include the
rendered template of the current route into the main layout file, which, in this case, is index.html. Every time the
current route changes, the included view will change, based on how we have configured our routes.