AngularJS 和 RequireJS：模块不可用答案

【问题标题】：AngularJS and RequireJS: Module not availableAngularJS 和 RequireJS：模块不可用
【发布时间】：2015-08-05 19:04:43
【问题描述】：

我正在尝试让 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] 无法实例化模块由于：

错误：[$injector:nomod] 模块“socialImages”不可用！你要么拼错了模块名称，要么忘记加载它。如果注册一个模块确保您将依赖项指定为第二个论据。

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

【问题讨论】：

标签： javascript angularjs requirejs

【解决方案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']);
});

【讨论】：

【解决方案2】：

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

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

【讨论】：