使用 angularAMD 时未正确加载 ng-table答案

【问题标题】：ng-table not being loaded appropriately when using angularAMD使用 angularAMD 时未正确加载 ng-table
【发布时间】：2015-07-02 01:32:49
【问题描述】：

我将 angularAMD 与 requirejs 一起使用，当我尝试将 ng-table 模块提供给控制器时，我收到 Uncaught TypeError: Cannot read property 'module' of undefined from the ng-table 模块。错误来源：

var app = angular.module('ngTable', []);

我的代码是：

'use strict';

requirejs.config({
  paths: {
    'angular': ['../lib/angularjs/angular'],
    'angular-route': ['../lib/angularjs/angular-route'],
    'angularAMD': ['../lib/angularAMD/angularAMD'],
    'ng-table': ['../lib/ng-table/ng-table']
  },
  shim: { 'angularAMD': ['angular'], 'angular-route': ['angular'], 'ng-table': ['angular']}
});


define(['angularAMD', 'angular-route'], function (angularAMD) {
    var app = angular.module("meadApp", ['ngRoute']);

    app.config(function ($routeProvider) {
        $routeProvider
            .when("/results", angularAMD.route({
                templateUrl: 'partials/results.html', controller: 'resultsController', controllerUrl: './controllers/resultsController'
            }))
            .otherwise({redirectTo: "/results"});
    });

    return angularAMD.bootstrap(app);
});

resultController.js

define(['app', 'ng-table'], function (app) {
    app.controller('resultsController', function ($scope, $http) {    
            $scope.users = [
                {name: "Moroni", age: 50},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34}
            ];    
    });
});

结果.html

<div>
    <table ng-table class="table">
        <tr ng-repeat="user in users">
            <td data-title="'Name'">{{user.name}}</td>
            <td data-title="'Age'">{{user.age}}</td>
        </tr>
    </table>
</div>

【问题讨论】：

标签： javascript angularjs requirejs angular-amd

【解决方案1】：

应使用ngload 加载现有的角度模块。将ngload 添加到您的main.js：

requirejs.config({
  paths: {
    'ngload': ['../lib/angularAMD/ngload'],
    ...
  },
  shim: { 'ngload': ['angularAMD'], ...}
});

然后，用它来加载ng-table：

define(['app', 'ngload!ng-table'], function (app) {
    app.controller('resultsController', function ($scope, $http) {    
            $scope.users = [
                {name: "Moroni", age: 50},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34}
            ];    
    });
});

更多详情请查看3rd Party AngularJS Modules。

【讨论】：

我在后端使用 scala play，我已经使用可用于它们的 webjar 包含了角度依赖项，并且 webjar 不适用于 ngload 库，因此我继续尝试加载动态角度控制器，无需使用 angularAMD。我可以只包含 ngload 脚本而不使用我没有使用的 webjar :)。无论如何感谢您的帮助。
@marcoseu，它对我不起作用。我收到此错误：'未知的提供者：NgTableParamsProvider

【解决方案2】：

制作有角度的垫片并导出有角度的。像这样：

main.js:

requirejs.config({
  paths: {
    'angular': ['../lib/angularjs/angular'],
    'angular-route': ['../lib/angularjs/angular-route'],
    'angularAMD': ['../lib/angularAMD/angularAMD'],
    'ng-table': ['../lib/ng-table/ng-table']
  },
  shim: {
    'angular': { exports: 'angular' },
    'angularAMD': ['angular'],
    'angular-route': ['angular'],
    'ng-table': ['angular']}
});

我从这里发现了这个：https://github.com/esvit/ng-table/pull/377#issuecomment-57934733

@marcoseu 的回答对我不起作用。我发现我也不需要 ngload 用于 Restangular，这是在 angular 引导后加载的另一个 3rd 方 angular 模块。我不知道这是怎么回事，我一定不明白。

【讨论】：

此解决方案完美运行。是的，@marcoseu 的回答对我也不起作用。

【解决方案3】：

如果您在加载 require.js 配置之前加载了 angular.js。然后你需要在配置定义之前添加以下代码：

define('angular', function () {
    return angular;
});

【讨论】：