1

I am trying to work on an Angular application powered by RequireJS, but I am not able to split up the controller files as I keep getting an error of Argument '(contoller)' is not a function, got undefined. Any idea what have I done wrong?

app/main.js,

require.config({
    baseUrl: "",

    // alias libraries paths.  Must set 'angular'
    paths: {
        'domReady': 'bower_components/requirejs-domready/domReady',
        'angular': 'bower_components/angular/angular',
        'angular-route': 'bower_components/angular-route/angular-route',
        'jquery': 'bower_components/jquery/dist/jquery'
    },

    // Add angular modules that does not support AMD out of the box, put it in a shim
    shim: {
        'angular': {
            exports: 'angular'
        },
        'angular-route': {
            exports: 'angular'
        }
    },

    // kick start application
    deps: ['app/bootstrap']
});

app/app.js,

define([
    'angular',
    'angular-route',
    'jquery'
], function (ng,ngRoute,$) {
    'use strict';
    console.log($('h1').length);

    return ng.module('app', ['ngRoute']).
        config(['$routeProvider', function($routeProvider) {

            $routeProvider.when('/home', {
                templateUrl: 'view/home.html',
                controller: 'HomeCtrl',
                controllerUrl: 'app/home'
            });

            $routeProvider.when('/view1', {
                templateUrl: 'view/view1.html',
                controller: 'View1Ctrl',
                controllerUrl: 'app/view'
            });

            //$routeProvider.otherwise({redirectTo: '/home'});
    }]); 
});

app/home.js,

define(['app/app'], function (app) {
    app.controller('HomeCtrl', function ($scope) {
        $scope.message = "Message from HomeCtrl"; 
    });
});

error,

Error: [ng:areq] Argument 'HomeCtrl' is not a function, got undefined

But if I concat the controllers after ng.module('app', ['ngRoute']).config(...) then they work fine,

app/app.js,

define([
    'angular',
    'angular-route',
    'jquery'
], function (ng,ngRoute,$) {
    'use strict';
    console.log($('h1').length);

    return ng.module('app', ['ngRoute']).
        config(['$routeProvider', function($routeProvider) {

            $routeProvider.when('/home', {
                templateUrl: 'view/home.html',
                controller: 'HomeCtrl',
                //controllerUrl: 'app/home'
            });

            $routeProvider.when('/view1', {
                templateUrl: 'view/view1.html',
                controller: 'View1Ctrl',
                //controllerUrl: 'app/view'
            });

            //$routeProvider.otherwise({redirectTo: '/home'});
    }]).controller('HomeCtrl', function ($scope) {
        $scope.message = "Message from HomeCtrl"; 
    }).controller('View1Ctrl', function ($scope) {
        $scope.message = "Message from View1Ctrl"; 
    }); 
});

Why??

4

1 回答 1

2

This seems to be a problem with the load order of your JS files. You are defining the HomeCtrl in app/home.js and using it it app/app.js. So make sure that home.js is loaded before app.js in your web app.

Split the app.js into two parts - one for just creating the ng.module (module.js), and one for setting the config (module-config.js). Then the dependency tree will be:

app/module-config.js
    requires: app/home.js
        requires: app/module.js
于 2014-10-28T10:08:00.827 回答