加载模块失败

Question

Hello i am trying to develop a web app with angular. I have added the ng-app="appApp" to the html file and also the .js files.

main.controller.js

(function () {
'use strict';

// register the controller as MainController
angular
    .module('appApp.main')
    .controller('MainController', MainController);

/**
 * @ngdoc function
 * @name appApp.main.provider:MainController
 * @description
 * Provider of the {@link appApp.main.controller:MainController MainController}
 *
 * @param {Service} $scope The scope service to use
 * @param {Service} $http The http service to use
 */

// MainController.$inject = [];

function MainController() {
    var vm = this;
}

})();

main.js

(function () {
'use strict';

// register the route config on the application
angular
    .module('appApp.main', ['ui.router'])
    .config(configMainRoute)

// inject configMainRoute dependencies
configMainRoute.$inject = ['$stateProvider', 'mainMenuProvider'];

// route config function configuring the passed $stateProvider
function configMainRoute($stateProvider, mainMenuProvider) {
    var mainState = {
        name: 'main',
        url: '/',
        authenticate: true,
        templateUrl: 'app/main/main.html',
        controller: 'MainController',
        controllerAs: 'vm'
    };

    $stateProvider.state(mainState);

    mainMenuProvider.addMenuItem({
        name: 'Home',
        state: mainState.name,
        order: 1
    });
}

})();

app.js

(function () {
'use strict';

angular
    .module('appApp', [
        // Add modules below
        'ngCookies',
        'ngResource',
        'ngSanitize',
        'ngMessages',
        'ngMaterial',
        'ui.router',
        'btford.socket-io',
        'appApp.main'
    ])
    .config(appConfig)
    .run(appRun);

...........

When i run the app i get this errors:

1. Error: [ng:areq] Argument 'MainController' is not a function, got undefined
2. Uncaught Error: [$injector:nomod] Module 'appApp.main' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

How can i fix that errors? Thank you

Answer 1

The first thing is :

In the html you've written

ng-app="appApp"

But in the module definition you've written

angular
.module('appApp.main', ['ui.router'])

The module names should be same unless you've another appApp module and you add the "appApp.main" module as dependency.

Another thing is as you've using "ui-router" you need to link the js library file of ui-router in the html along with angular library file.

Just check the sequence of js files. At first angular, then all library js, then app, main, main controller

Answer 2

I think,

1.You should call ng-app=" appApp.main " or

2.You should initially declare appApp module. You should replace some code in main.js

angular.module('appApp.main', []);

angular.module('appApp', [
        'ui.router',
        'appApp.main'
    ])...

Also, remove [ui.router] in main.js. It has declared in app.js