6

我在 AngularJS 路由和控制器中遇到问题。这是代码:

索引.html

<!DOCTYPE html>
<html ng-app="contacts">
<head>
    <script src="libs/angular.min%20(1).js"></script>
    <script src="contacts.js"></script>
    <script src="index.js"></script>
    <title></title>
</head>
<body >

    <div data-ng-view=""></div>


</body>
</html>

index.js

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

myApp.config(function ($routeProvider) {
    $routeProvider
     .when('/', { controller: 'ContactsCtrl', templateUrl: '/views/show-contacts.html' })
     //.when('/view2', { controller: 'MyCont', templateUrl: 'V2.htm' })
     .otherwise({ redirectTo: '/' });
});

联系人.js

var myApp = angular.module('contacts', []);
myApp.controller('ContactsCtrl', function ($scope) {
    $scope.name = "omar";
});

但我收到此错误:

参数“ContactsCtrl”不是函数,未定义

有什么帮助吗?

4

3 回答 3

19

像这样更改您的 index.html;

<script src="index.js"></script>
<script src="contacts.js"></script>

并在您的contact.js 更改

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

var myApp = angular.module('contacts');

具有两个参数 like 的 Angular 模块angular.module('contacts', []);将创建一个新模块,但具有单个参数的 Angular 模块 likeangular.module('contacts');将拾取现有模块。在这种情况下'contacts'

于 2013-08-22T11:07:44.163 回答
10

您正在重新定义您的应用程序index.js,因此创建的控制器contacts.js丢失了。删除此行index.js

var myApp = angular.module('contacts', []);
于 2013-08-22T11:05:05.827 回答
1

我建议创建两个不同的模块名称,一个在 index.js 中(这将是您在 html ng-app 属性中引用的应用程序名称),另一个在 contacts.js 中(控制器的模块名称)。在 index.js 中创建一个对 contacts.js 的依赖。我能够通过执行以下操作来解决问题。

更新了contacts.js这里我更新了contactsController

var myApp = angular.module('contactsController', []);
myApp.controller('ContactsCtrl', function ($scope) {
$scope.name = "omar";
});

更新了 index.js在这里我添加了 contactsController 作为依赖项。我发现将其命名为 app.js 更容易。这样 ng-app 总是映射到 app.js 中的模块名称。

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

  myApp.config(function ($routeProvider) {
   $routeProvider
    .when('/', { controller: 'ContactsCtrl', templateUrl: '/views/show-contacts.html' })
   //.when('/view2', { controller: 'MyCont', templateUrl: 'V2.htm' })
   .otherwise({ redirectTo: '/' });
   });
于 2014-02-20T05:29:36.493 回答