Javascript AngularJS-参数'；MenuCtrl'；不是函数，未定义_Javascript_Angularjs_Ng Controller

Javascript AngularJS-参数'；MenuCtrl'；不是函数，未定义

javascript angularjs

Javascript AngularJS-参数'；MenuCtrl'；不是函数，未定义,javascript,angularjs,ng-controller,Javascript,Angularjs,Ng Controller,我试图在我的webapp中使用AngularJS，以便动态创建一个菜单，然后根据选择填充页面。我已经创建了所需的所有组件，但是似乎自从我拆分了控制器之后，出现了以下错误。你知道为什么吗 Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=MenuCtrl&p1=not%20a%20function%2C%20got%20undefined 我的守则如下： index.html <!DOCTYPE html

我试图在我的webapp中使用AngularJS，以便动态创建一个菜单，然后根据选择填充页面。我已经创建了所需的所有组件，但是似乎自从我拆分了控制器之后，出现了以下错误。你知道为什么吗

Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=MenuCtrl&p1=not%20a%20function%2C%20got%20undefined

我的守则如下：

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myWebApp">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="user-scalable=yes, width=device-width, target-densitySpi=device-dpi, initial-scal=1.0" />

    <link href="css/MainStyles.css" rel="stylesheet" type="text/css" media="screen">

    <!-- Jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script> 

    <!-- AngularJS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js" type="text/javascript"></script>

    <!-- AngularJS Controllers -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/controllers/home.js"></script>

    <title>
        Page Title
    </title>
</head>
<body>
    <div id="menu_bar" ng-controller="MenuCtrl">
        <ul>
            <li ng-repeat="menuItem in menuItems">
                <a href="{{menuItem.path}}">{{menuItem.name}}</a>
            </li>
        </ul>
    </div>

    <div id="page_content">
        <div ng-view></div>
    </div>
</body>

js/controllers.js

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

myWebApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        redirectTo: '/home'
      }).
      when('/home', {
        templateUrl: '/partials/home.html',
        controller: 'HomeCtrl'
      }).
      otherwise({
        templateUrl: '/partials/404.html',
      });
  }]);

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

myWebAppControllers.controller('MenuCtrl', function ($scope, $location) {

  $scope.menuItems = [
    {
        'name': 'Home',
        'path': '#/home'
    }
  ];
});

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

myWebAppControllers.controller('HomeCtrl', function ($scope, $location) {
  $scope.title = "Home"
});

js/controllers/home.js

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

myWebApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        redirectTo: '/home'
      }).
      when('/home', {
        templateUrl: '/partials/home.html',
        controller: 'HomeCtrl'
      }).
      otherwise({
        templateUrl: '/partials/404.html',
      });
  }]);

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

myWebAppControllers.controller('MenuCtrl', function ($scope, $location) {

  $scope.menuItems = [
    {
        'name': 'Home',
        'path': '#/home'
    }
  ];
});

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

myWebAppControllers.controller('HomeCtrl', function ($scope, $location) {
  $scope.title = "Home"
});

您将定义同一个模块两次（并覆盖第一个模块），一次在

controllers.js

中，另一次在

controllers/home.js

中。如果希望两个控制器位于同一个模块下，则需要使用定义一次

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

在其他地方，只能检索它：

var myWebAppControllers = angular.module('myWebAppControllers');

$scope.menuItems中有额外的“，”