Angular $injector:modulerr Module Error
<p>I don't know what cause this error:  <a href="https://docs.angularjs.org/error/$injector/modulerr?p0=mainApp&amp;p1=Error:%20%5B$injector:unpr%5D%20http:%2F%2Ferrors.angularjs.org%2F1.3.5%2F$injector%2Funpr%3Fp0%3D%2524routeProvider%0A%20%20%20%20at%20Error%20(native)%0A%20%20%20%20at%20http:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.5%2Fangular.min.js:6:416%0A%20%20%20%20at%20http:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.5%2Fangular.min.js:38:22%0A%20%20%20%20at%20d%20(http:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.5%2Fangular.min.js:36:49)%0A%20%20%20%20at%20Object.e%20%5Bas%20invoke%5D%20(http:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.5%2Fangular.min.js:36:310)%0A%20%20%20%20at%20d%20(http:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.5%2Fangular.min.js:35:23)%0A%20%20%20%20at%20http:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.5%2Fangular.min.js:35:147%0A%20%20%20%20at%20r%20(http:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.5%2Fangular.min.js:7:302)%0A%20%20%20%20at%20g%20(http:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.5%2Fangular.min.js:34:428)%0A%20%20%20%20at%20Lb%20(http:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.5%2Fangular.min.js:38:146" rel="nofollow">Click to see the error</a></p>

<p>I'm trying to create a dynamic web application. Do I need a local-server to run this application. Currently i'm not using any local-server.</p>

<p>HTML:</p>

<pre><code>&lt;div class = "body" ng-controller = "app"&gt;
  &lt;div class = "column2"&gt;
    &lt;div class = "sectionName"&gt;
       &lt;span class = "sectionName-Span"&gt;{{ page.title() }}&lt;/span&gt;
       &lt;div class = "container"&gt;
          &lt;ng-view&gt;Something went wrong&lt;/ng-view&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script type=text/ng-template id=profile.html&gt;
     I'm Lalinda Sampath Dias
  &lt;/script&gt;
</code></pre>

<p>Controller.js:</p>

<pre><code>var application = angular.module('mainApp', ['appServices'])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.
                when('/tab1', {templateUrl: 'profile.html',   controller: HomeCtrl}).
                when('/tab2', {templateUrl: 'list.html',   controller: ListCtrl}).
                otherwise({redirectTo: '/tab1'});
}]);


/* Controllers */

function MainCtrl($scope, Page) {
    console.log(Page);
    $scope.page= Page; 
}

function HomeCtrl($scope, Page) {
    Page.setTitle("Welcome");
}


function ListCtrl($scope, Page, Model) {
    Page.setTitle("Items");
    $scope.items = Model.notes();

}

function DetailCtrl($scope, Page, Model, $routeParams, $location) {
    Page.setTitle("Detail");
    var id = $scope.itemId = $routeParams.itemId;
    $scope.item = Model.get(id);
}

function SettingsCtrl($scope, Page) {
    Page.setTitle("Settings");
}

/* Services */

angular.module('appServices', [])

        .factory('Page', function($rootScope){
            var pageTitle = "Untitled";
            return {
                title:function(){
                    return pageTitle;
                },
                setTitle:function(newTitle){
                    pageTitle = newTitle;
                }
            }
        })

        .factory ('Model', function () {
            var data = [
                {id:0, title:'Doh', detail:"A dear. A female dear."},
                {id:1, title:'Re', detail:"A drop of golden sun."},
                {id:2, title:'Me', detail:"A name I call myself."},
                {id:3, title:'Fa', detail:"A long, long way to run."},
                {id:4, title:'So', detail:"A needle pulling thread."},
                {id:5, title:'La', detail:"A note to follow So."},
                {id:6, title:'Tee', detail:"A drink with jam and bread."}
            ];
            return {
                notes:function () {
                    return data;
                },
                get:function(id){
                  return data[id];
                },
                add:function (note) {
                    var currentIndex = data.length;
                    data.push({
                        id:currentIndex, title:note.title, detail:note.detail
                    });
                },
                delete:function (id) {
                    var oldNotes = data;
                    data = [];
                    angular.forEach(oldNotes, function (note) {
                        if (note.id !== id) data.push(note);
                    });
                }
            }
});
</code></pre>

<p>Edit: </p>

<pre><code>&lt;body ng-app = "mainApp"&gt;
        &lt;div id = "background-div"&gt;
            &lt;div class = "header"&gt;
                &lt;div class = "ham-icon"&gt;
                    &lt;img src = "images/ham-icon.png"&gt;
                &lt;/div&gt;
                &lt;div class = "logo"&gt;
                    &lt;span class = "google-logo"&gt;Lalinda&lt;/span&gt;&lt;span class = "hangouts-logo"&gt; Sampath&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class = "profile-data"&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class = "body" ng-controller = "app"&gt;
                &lt;div class = "column1"&gt;
                    &lt;div class = "tab1"&gt;
                        &lt;a href = "#/tab1"&gt;&lt;img src = "images/people-icon.png"&gt;&lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div class = "tab2"&gt;
                        &lt;a href = "#/tab2"&gt;&lt;img src = "images/chat-icon.png"&gt;&lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div class = "tab3"&gt;
                        &lt;a href = "#/tab3"&gt;&lt;img src = "images/phone-icon.png"&gt;&lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div class = "tab4"&gt;
                        &lt;a href= "#/tab4"&gt;&lt;img src = "images/other-icon.png"&gt;&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class = "column2"&gt;
                    &lt;div class = "sectionName"&gt;
                        &lt;span class = "sectionName-Span"&gt;{{ page.title() }}&lt;/span&gt;
                        &lt;div class = "container"&gt;
                            &lt;ng-view&gt;Something went wrong&lt;/ng-view&gt;
                            &lt;!--input type = "text" ng-model = "name"--&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;script type=text/ng-template id=profile.html&gt;
                    I'm Lalinda Sampath Dias
                &lt;/script&gt;
                &lt;div class = "column3"&gt;
                    &lt;div classs = "user-greet"&gt;
                        &lt;span class = "user-greet-span"&gt;Hi, Guest&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div class = "det"&gt;
                        &lt;span class = "det-span"&gt;Get started by calling or messaging a friend below&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div class = "functional-area"&gt;
                        &lt;div class = "video-call"&gt;
                        &lt;/div&gt;
                        &lt;div class = "phone-call"&gt;
                        &lt;/div&gt;
                        &lt;div class = "message"&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
</code></pre>