I was following some random YT tutorial on using Angular's `$routeProvider` and the result - contrary to the video - is not working for me. Instead, what I get is crashed website and this error logged in Chrome's console: `Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=site&p1=Error%3A%20…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A41%3A249)` By following the trail, I found that there's something wrong with `$routeProvider', but beats me if I know what. Here's my code:

```
var site = angular.module('site', []).
config(function($routeProvider){
    $routeProvider.
        when('/home', {template:'/pages/home.html'}).
        when('/', {template:'/pages/home.html'}).           
        when('/in-play', {template:'/pages/in-play.html'}).
        when('/popular', {template:'/pages/popular.html'}).
        otherwise({redirectTo:'/home', tempalte:'/pages/home.html'});
});

function MainCtrl($scope, $location) {
    $scope.setRoute = function(route) {
        $location.path(route);
    };
};

```

And here are all the HTMLs (I'm working with `ng-include` also):

```
<!DOCTYPE html>
<html ng-app="site">
<head>
    <link rel="stylesheet" href="css/style.css">    
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">      </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>    
    <script src="scripts/app.js"></script>

    <title>Pre-Demo</title> 
</head>
<body  ng-controller="mainStaysCtrl">   
    <header class="header" ng-include="'pages/header.html'"></header>
    <nav class="nav" ng-include="'pages/nav.html'"></nav>
    <div class="main">
        <div class="left-col">
            <div class="quick links" ng-include="'pages/quick_links.html'">  </div>
            <div class="quick-inplay links" ng-include="'pages/quick_inplay_links.html'"></div>
            <div class="winner links" ng-include="'pages/winner_links.html'"></div>
        </div>
        <div class="center-col" ng-controller="mainCtrl">
            <div class="wraper" ng-view ng-controller="jsonCtrl"></div>                     
        </div>
        <div class="right-col">
            <div class="expert-mixer" ng-include="'pages/mixer.html'"></div>
            <div ng-include="'pages/twitter.html'"></div>
        </div>
    </div>  
</body>
</html>

//included page that has the call for $routeProvider

<div class="events">
    <div class="bullet">
        <div class="bullet-padding">
            <div ng-click="setRoute('in-play')" class="bullet-link">In-Play Links</div>
        </div>  
    </div>
</div>  

```

Could someone please tell me what's wrong?

**EDIT**

After Antiga's answer I got it to load the page. Everything besides the content that is to be loaded with `ng-view` and for which `$routeProvider` was set up in the first place. Here's the updated code:

```
var site = angular.module('site', ['ngRoute']).
    config(function($routeProvider){
        $routeProvider.
            when('/home', {templateUrl:'/pages/home.html'}).
            when('/', {templateUrl:'/pages/home.html'}).            
            when('/in-play', {templateUrl:'/pages/in-play.html'}).
            when('/popular', {templateUrl:'/pages/popular.html'}).
            otherwise({redirectTo:'/home', tempalteUrl:'/pages/home.html'});
    });

site.controller('mainStaysCtrl', function($scope) {
    $scope.setRoute = function(route) {
        $location.path(route);
    };
});

```

and HTML

```
<body  ng-controller="mainStaysCtrl">   
    <header class="header" ng-include="'pages/header.html'"></header>
    <nav class="nav" ng-include="'pages/nav.html'"></nav>
    <div class="main">
        <div class="left-col">
            <div class="quick links" ng-include="'pages/quick_links.html'"></div>
            <div class="quick-inplay links" ng-include="'pages/quick_inplay_links.html'"></div>
            <div class="winner links" ng-include="'pages/winner_links.html'"></div>
        </div>
        <div class="center-col">
            <div class="wraper" ng-view ></div>
            </div>
        <div class="right-col">
            <div class="expert-mixer" ng-include="'pages/mixer.html'"></div>
            <div ng-include="'pages/twitter.html'"></div>
        </div>
    </div>

```