angularjs + requirejs =参数'controller'不是函数,未定义

时间:2014-03-03 00:43:22

标签: javascript angularjs requirejs lazy-loading

您好我正在尝试实现angularjs + requirejs但我得到Argument'HelloWorld'不是函数,当我转到所需路径时出现未定义错误

app.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;
});

home.js

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

home.html的

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

据我了解当我去/ home时发现什么角度寻找名为HelloWorld的控制器无法找到它抛出Argument'HelloWorld'不是一个函数,未定义然后我的调试器在home.js被击中但是我看到了所有屏幕是{{greet();}}

2 个答案:

答案 0 :(得分:2)

少数事情:

理想情况下,

1。 require.config应放在main.js内并使用以下内容加载到index.html中:

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

2. 尝试在路线中定义控制器并移除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

答案 1 :(得分:0)

好的..对我来说很好看。也许你的'App / home'应该是'app / home',不知道你是如何定义你的'App'的。万一它仍然无法正常工作。尝试在配置中添加“app”。

我制作了你的东西的这个工作版本: https://github.com/guilbep/smallrequirejsangularseed