AngularJS“参数'mainController'不是一个函数”

Question

即时通讯新的角度，需要一些帮助。

我想建立一个基本的目录结构，我有模块和控制器在单独的JS文件。但是，当我这样做时，我得到在帖子标题中指出的错误。

模块看起来是这样的：

var myApp = angular.module('myApp', ['ngRoute']); 

控制器是这样的：

myApp.controller('mainController', function ($scope) { 
$scope.message = 'Test message'; 
}); 

和路线：

myApp.config(function ($routeProvider) { 
$routeProvider 

// route for the home page 
    .when('/', { 
    templateUrl: 'components/home/home.html', 
    controller: 'mainController' 
}) 

// route for the about page 
.when('/about', { 
    templateUrl: 'components/about/about.html', 
    controller: 'aboutController' 
}) 

// route for the contact page 
.when('/contact', { 
    templateUrl: 'components/contact/contact.html', 
    controller: 'contactController' 
}); 
}); 

然后在我的HTML我使用NG-应用=“对myApp “和ng-controller =”mainController“并试图写出：{{message}}。但它不起作用。

如果我把所有的角码放在同一个JS文件，那么它的工作原理。但是，当他们分开时不行。

帮助和解释是高度赞赏！

Answer 1

正如评论所指出的，这个错误通常是由于我对包含mainController的文件缺少引用。你的index.html应该包含你的JavaScript文件的脚本引用。下面是我的一个小应用程序的示例：

<!-- Custom scripts --> 
    <script src="/app.js"></script> 

    <!-- Controllers --> 
    <script src="/login/loginCtrl.js"></script> 
    <script src="/home/homeCtrl.js"></script> 

    <!-- Directives --> 
    <script src="/common/directives/pageHeader/pageHeader.directive.js"></script> 
    <script src="/common/directives/footerGeneric/footerGeneric.directive.js"></script> 
    <script src="/common/directives/queryBuilder/queryBuilder.directive.js"></script> 
    <script src="/common/directives/scroll/infScroll.js"></script> 

所有这些应该包括jquery和angular后。另外（我不知道你成功包含app.js的地方，你可能已经这样做了），你需要将AngularJS路由引导到你主要应用文件中的express服务器（假设为express/node后端）的index.html文件像这样：

app.use(express.static(path.join(__dirname, 'app_client'))); 
app.use(function (req,res){ 
    res.sendfile(path.join(__dirname, 'app_client', 'index.html')) 
}); 

我希望这是有帮助的。如果您在试图包含应用程序和控制器的地方发布代码，那么我可以提供更详细的答案。