Angular $injector:modulerr 模块错误

Question

我不知道是什么导致了这个错误：Click to see the error

我正在尝试创建动态 Web 应用程序。我需要一个本地服务器来运行这个应用程序吗？目前我没有使用任何本地服务器。

HTML:

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

Controller.js:

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);
                    });
                }
            }
});

编辑：

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

Answer 1

您需要像这样添加 ngRoute 作为依赖项

var application = angular.module('mainApp', ['ngRoute','appServices'])

Answer 2

自己想出了一个答案。添加 ngRoute 作为依赖项时，我们必须加载 ngRoute.js 文件。您可以从网上下载。

这是 Google CDN： https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js

Angular $injector:modulerr 模块错误

Angular $injector:modulerr Module Error

html

javascript

angularjs

angularjs-ng-route