javascript - AngularJS 和 RequireJS : Module not available

Question

我正在尝试让 AngularJS 与 RequireJS 一起使用，但它找不到我的自定义模块。如果我内联注入(inject)所有脚本而不做任何更改，它就会起作用，所以我知道这是 RequireJS 和依赖项的问题。

溜槽来源:http://chute.github.io/angular-chute/

RequireJS 配置垫片:

shim: {
    'angular': {
        exports: 'angular'
    },
    'angular.resource': {
        deps: ['angular'],
    },
    'chute': {
        deps: ['angular.resource'],
    },
    'chute.resource': {
        deps: ['chute']
    },
    'chute.asset': {
        deps: ['chute']
    },
    'chute.heart': {
        deps: ['chute']
    }
}

HTML:

    <div class="wall" ng-app="socialImages" ng-controller="MainCtrl">

        <div class="wall-item" ng-repeat="asset in assets">
            <img ng-src="{{asset.url}}/w/300" width="300">

            <div class="like icon-star" ng-class="{'active': asset.hearted()}" ng-click="asset.toggleHeart()"></div>

            <p>{{asset.caption}}</p>

            <ng-pluralize class="likes" count="asset.hearts" when="{'one':'1 like', 'other':'{} likes'}"></ng-pluralize>
            </div>

            <a class="load-more button" ng-show="assets.hasMore()" ng-click="assets.nextPage()">Load more</a>
      </div>

JS:

define(['angular', 'angular.resource', 'chute', 'chute.resource', 'chute.asset', 'chute.heart'], function(angular){

    'use strict';

    var socialImages = angular.module('socialImages', ['chute']);

    socialImages.controller('MainCtrl', ['$scope', 'Chute.API.Asset', function($scope, Asset) {
        $scope.assets = Asset.query({album: 'azpQsjmn', perPage: 3});
    }]);

});

当我加载页面时，编辑 angularJS 以获取更多描述性错误消息后，会出现以下控制台错误。

[$injector:nomod] Module 'ngLocale' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

angular.js:63 [$injector:nomod] Module 'socialImages' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

angular.js:63 [$injector:modulerr] Failed to instantiate module socialImages due to:

Error: [$injector:nomod] Module 'socialImages' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

我已经尝试过 domReady 模块和多个 RequireJS 依赖项变体。

Answer 1

我得到了另一位开发人员的帮助并解决了这个问题。主要更改是从 HTML 中删除 ng-app，然后在页面加载后引导应用程序名称。

angular.module('socialImages', ['chute'])
.controller('MainCtrl', ['$scope', 'Chute.API.Asset', function($scope, Asset) {
    $scope.assets = Asset.query({album: 'id', perPage: 6});

}])

angular.element(document).ready(function() {
    angular.bootstrap($('.images-block'), ['socialImages']);
});