錯誤：$injector:modulerr 模塊錯誤！ AngularJS

Question

我遇到了一個我似乎無法解決的問題，我希望有人能幫助我！

我不斷收到此錯誤：

Failed to instantiate module musicApp due to:
{1}

這是我正在使用的功能：

'use strict';

var angular = angular

    .module('angular', ['ngResource', 'ngRoute'])
    .config (function ($RouteProvider){

    $RouteProvider

        .when ('/', {
        templateULR: '/templates/list-artists.html'
    })
        .when ('/add-artist', {
            templateUrl: '/add-artist.html'
    })
        .when ('/artist-details/:id', {
            templateUrl: 'artist-details.html'
    })
        .otherwise ({redirectTo: '/'});
})
    .constant ('author', 'Sekret Doge'

這是我調用這個函數的地方：

'use strict';

angular.controller('ListArtistsController',
    function ListArtistsController($scope, artistData) {

        $scope.artists = artistData.getAllArtists();

    });

這是我的 html 文件，它應該顯示我需要的信息：

<div class="jumbotron" ng-controller="ListArtistsController">
    <div class="row">
        <div ng-repeat="artist in artists">
            <div class="col-md-4" text-center>
                <h2> <a href="#artist-details/{{ artist.id }}"> {{ artist.name }}</a></h2>
            </div>
        </div>
    </div>
</div>

我什至會提供腳本來源，因為有些人因為他們而遇到問題：

    <script src="lib/jquery-2.1.0.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/PageController.js"></script>
<script src="js/controllers/ListArtistsController.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/ui-bootstrap-tpls-0.9.0.min.js"></script>

如果您需要查看此帖子中缺少的代碼或文件，請告訴我編輯該帖子！

getAllArtists 函數：

'use strict';

angular.factory('artistData', function ($resource) {

        var resource = $resource('/data/artist/:id', {id: '@id'});

    return {
        getArtist: function (id) {
            return resource.get ({id: id});
        },

        saveArtist: function (artist) {

            artist.id = 999;
            resource.save (artist);
        },

        getAllArtists: function() {

            return resource.query();

        }
    }
});

頁面控制器：

'use strict';

angular.controller('PageController',
    function PageController($scope) {

        $scope.author = "Sekret Doge";
        $scope.date = {
            year: 2014,
            month: 4,
            day: 4
        }

    }
);

應用程序：

'use strict';

var angular = angular

    .module('angular', ['ngResource', 'ngRoute'])
    .config (function ($RouteProvider){

    $RouteProvider

        .when ('/', {
        templateUrl: '/templates/list-artists.html'
    })
        .when ('/add-artist', {
            templateUrl: '/add-artist.html'
    })
        .when ('/artist-details/:id', {
            templateUrl: 'artist-details.html'
    })
        .otherwise ({redirectTo: '/'});
})
    .constant ('author', 'Sekret Doge');

感謝您的幫助！

Answer 1

看起來您沒有加載 ngRoute javascript。 它在一個單獨的文件中。

http://docs.angularjs.org/api/ngRoute

Answer 2

您的 HTML 中腳本標記中的以下庫需要包含在您的 .js 中。

lib/ui-bootstrap-tpls-0.9.0.min.js

在 app.js 的頂部添加 ui.bootstrap。

var angular = angular

.module('angular', ['ngResource', 'ngRoute', 'ui.bootstrap'])