错误:$injector:modulerr模块错误!AngularJS

Error: $injector:modulerr Module Error! AngularJS

本文关键字:错误 AngularJS 模块 injector modulerr      更新时间:2023-09-26

我遇到了一个似乎无法解决的问题,我希望有人能帮助我!

我一直收到这个错误:

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

谢谢你的帮助!

看起来您没有加载ngRoute javascript。它在一个单独的文件中。

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

HTML中脚本标记中的以下库需要包含在.js.中

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

在app.js的顶部添加ui.bootstrap.

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