AngularJS

Question

我正在尝试在我的网络应用程序中使用 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/app.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',
      });
  }]);

js/controllers.js

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

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

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

js/controllers/home.js

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

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

Answer 1

您定义了同一个模块两次（并且覆盖了第一个模块），一次在 controllers.js 中，另一次在 controllers/home.js 中。如果你想让两个控制器都在同一个模块下，你需要用

定义一次

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

而在其他地方只检索它：

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

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

AngularJS - Argument 'MenuCtrl' is not a function, got undefined

javascript

ng-controller