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

        }
    }
});

的PageController：

'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

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

中

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

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

var angular = angular

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

错误：$ injector：modulerr模块错误！ AngularJS

2 个答案: