javascript - angularjs + requirejs = 参数 'controller' 不是函数，未定义

Question

你好我正在尝试实现 angularjs + requirejs 但我得到 Argument 'HelloWorld' is not a function, got undefined error when i go to desired path

应用程序.js

require.config({
baseUrl: "",
paths: {
    'domReady': 'Scripts/RequireJs/dom-ready/domReady',
    "angular": "Scripts/AngularJs/angular",
    "angular-route": "Scripts/AngularJs/angular-route",
    "angular-resource": "Scripts/AngularJs/angular-resource",
},
shim: {
    "angular": {
        exports: "angular"
    },
    "angular-resource": {
        deps: ["angular"]
    },
    "angular-route": {
        deps: ["angular"]
    }
}
});

define('app', ['angular', 'angular-route'], function (angular) {
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {

    app.controllerProvider = $controllerProvider;
    app.compileProvider = $compileProvider;
    app.routeProvider = $routeProvider;
    app.filterProvider = $filterProvider;
    app.provide = $provide;

    $routeProvider.when('/home', {
        templateUrl: 'views/home.html',
        resolve: {
            load: ['$q', '$rootScope', function ($q, $rootScope) {
                var deferred = $q.defer();

                require(['App/home'], function () {
                    $rootScope.$apply(function () {
                        deferred.resolve();
                    });

                });
                return deferred.promise;
            }]
        }
    });
});

require(['domReady!'], function (document) {
    angular.bootstrap(document, ['app']);
});

return app;
});

首页.js

require(['app'], function (app) {
app.controllerProvider.register('HelloWorld', function ($scope) {
    $scope.greet = function () {
        return 'Hello World!'
    }
});
});

主页.html

<div ng-controller="HelloWorld">
    {{greet();}}
</div>

据我所知，当我转到/home 时发生了什么 angular 查找名为 HelloWorld 的 Controller ，找不到它抛出参数“HelloWorld”不是函数，未定义然后我的调试器在 home.js 中被击中，但我看到的只是屏幕是 {{greet();}}

Answer 1

一些事情:

1. require.config 最好放在 main.js 中并加载到 index.html 使用:

<script data-main="js/main.js" src=".../require.js"></script>

2. 尝试在您的路由中定义 Controller 并删除 ng-controller home.html:

...
$routeProvider.when('/home', {
    templateUrl: 'views/home.html',
    controller: 'HelloWorld', // <-- Need to add this line
...

3. 你的 home.js 应该使用 define 而不是 require 因为你在这里定义了一个模块。

我创建了以下项目以方便您使用 RequireJS 和 AngularJS，您应该看看:
https://github.com/marcoslin/angularAMD