AngularJS和RequireJS：模块不可用

Question

我正在尝试让AngularJS与RequireJS一起使用，但是找不到我的自定义模块。 如果我直接插入所有脚本而没有任何更改，则可以正常工作，所以我知道这是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]模块'ngLocale'不可用！ 您可能拼错了模块名称，或者忘记了加载它。 如果注册模块，请确保将依赖项指定为第二个参数。

angular.js：63 [$ injector：nomod]模块'socialImages'不可用！ 您可能拼错了模块名称，或者忘记了加载它。 如果注册模块，请确保将依赖项指定为第二个参数。

angular.js：63 [$ injector：modulerr]由于以下原因，无法实例化模块socialImages：

错误：[$ injector：nomod]模块'socialImages'不可用！ 您可能拼错了模块名称，或者忘记了加载它。 如果注册模块，请确保将依赖项指定为第二个参数。

我已经尝试过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']);
});

Answer 2

将require与angular一起使用的好处是，您不需要页面底部的所有脚本引用。 不利的一面是您需要使用两个IoC容器。 在这种情况下，您似乎已经向Chute注册了require而不是向Angular注册了。 您可能需要这样的东西：

angular.module('Chute', []).service('Chute.API.Asset', function (...