问题描述
我是Angular Js的新手。 我收到此错误：
我的示例代码如下：
HTML
<!doctype html>
<html ng-app>
<head>
<title>Contact Manager</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="controllers/contactController.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="ContactController">
<form class="well">
<label>Name</label>
<input type="text" name="name" ng-model="newcontact.name" />
<label>Email</label>
<input type="text" name="email" ng-model="newcontact.email" />
<label>Phone</label>
<input type="text" name="phone" ng-model="newcontact.phone" />
<br/>
<input type="hidden" ng-model="newcontact.id" />
<input type="button" value="Save" ng-click="saveContact()" class="btn btn-primary" />
</form>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts">
<td>{{ contact.name }}</td>
<td>{{ contact.email }}</td>
<td>{{ contact.phone }}</td>
<td> <a href="javascript:void(0)" ng-click="edit(contact.id)">edit</a> | <a href="javascript:void(0)" ng-click="delete(contact.id)">delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
contactController.js
//var module = angular.module('app', []);
angular.module('app', []).service('ContactService', function () {
//to create unique contact id
var uid = 1;
//contacts array to hold list of all contacts
var contacts = [{
id: 0,
'name': 'Megha',
'email': 'hello@gmail.com',
'phone': '123-2343-44'
}];
//save method create a new contact if not already exists
//else update the existing object
this.save = function (contact) {
if (contact.id == null) {
//if this is new contact, add it in contacts array
contact.id = uid++;
contacts.push(contact);
} else {
//for existing contact, find this contact using id
//and update it.
for (i in contacts) {
if (contacts[i].id == contact.id) {
contacts[i] = contact;
}
}
}
}
//simply search contacts list for given id
//and returns the contact object if found
this.get = function (id) {
for (i in contacts) {
if (contacts[i].id == id) {
return contacts[i];
}
}
}
//iterate through contacts list and delete
//contact if found
this.delete = function (id) {
for (i in contacts) {
if (contacts[i].id == id) {
contacts.splice(i, 1);
}
}
}
//simply returns the contacts list
this.list = function () {
return contacts;
}
});
angular.module('app', []).controller('ContactController',['$scope', 'ContactService', function ContactController($scope, ContactService) {
$scope.contacts = ContactService.list();
$scope.saveContact = function () {
ContactService.save($scope.newcontact);
$scope.newcontact = {};
}
$scope.delete = function (id) {
ContactService.delete(id);
if ($scope.newcontact.id == id) $scope.newcontact = {};
}
$scope.edit = function (id) {
$scope.newcontact = angular.copy(ContactService.get(id));
}
}])
1楼
Kutyel
2
2015-07-31 06:18:43
您要在角度模块之外定义控制器，请更改以下几行：
//simply returns the contacts list
this.list = function () {
return contacts;
}
})
// continue in the same module, define the controller
.controller('ContactController',['$scope', 'ContactService', function ContactController($scope, ContactService) {
$scope.contacts = ContactService.list();
2楼
Denis Thomas
1
2015-07-31 06:19:26
电话：
angular.module('app', [])
将创建一个新模块（由依赖项列表参数[]引起）。
因此，您基本上是在创建2个模块。
将创建控制器的第二个呼叫更改为：
angular.module('app').controller(....)
这将获得现有模块，而不是创建一个新模块。
3楼
Andrés Felipe García Ortiz
1
2015-07-31 06:55:29
首先取消注释：
var app= angular.module('app', []);
更改控制器声明的行：
app.controller('ContactController', function ($scope, ContactService)
为服务
app.service('ContactService', function (){});
var app = angular.module('app', []); app.service('ContactService', function () { //to create unique contact id var uid = 1; //contacts array to hold list of all contacts var contacts = [{ id: 0, 'name': 'Megha', 'email': 'hello@gmail.com', 'phone': '123-2343-44' }]; //save method create a new contact if not already exists //else update the existing object this.save = function (contact) { if (contact.id == null) { //if this is new contact, add it in contacts array contact.id = uid++; contacts.push(contact); } else { //for existing contact, find this contact using id //and update it. for (i in contacts) { if (contacts[i].id == contact.id) { contacts[i] = contact; } } } }; //simply search contacts list for given id //and returns the contact object if found this.get = function (id) { for (i in contacts) { if (contacts[i].id == id) { return contacts[i]; } } }; //iterate through contacts list and delete //contact if found this.delete = function (id) { for (i in contacts) { if (contacts[i].id == id) { contacts.splice(i, 1); } } }; //simply returns the contacts list this.list = function () { return contacts; }; }); app.controller('ContactController', function ($scope, ContactService) { $scope.contacts = ContactService.list(); $scope.saveContact = function () { ContactService.save($scope.newcontact); $scope.newcontact = {}; }; $scope.delete = function (id) { ContactService.delete(id); if ($scope.newcontact.id == id) $scope.newcontact = {}; }; $scope.edit = function (id) { $scope.newcontact = angular.copy(ContactService.get(id)); }; });
<html ng-app="app"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src="js/contactController.js"></script> </head> <body> <div ng-controller="ContactController"> <form class="well"> <label>Name</label> <input type="text" name="name" ng-model="newcontact.name" /> <label>Email</label> <input type="text" name="email" ng-model="newcontact.email" /> <label>Phone</label> <input type="text" name="phone" ng-model="newcontact.phone" /> <br/> <input type="hidden" ng-model="newcontact.id" /> <input type="button" value="Save" ng-click="saveContact()" class="btn btn-primary" /> </form> <table class="table table-striped table-bordered"> <thead> <tr> <th>Name</th> <th>Email</th> <th>Phone</th> <th>Action</th> </tr> </thead> <tbody> <tr ng-repeat="contact in contacts"> <td>{{ contact.name }}</td> <td>{{ contact.email }}</td> <td>{{ contact.phone }}</td> <td> <a href="javascript:void(0)" ng-click="edit(contact.id)">edit</a> | <a href="javascript:void(0)" ng-click="delete(contact.id)">delete</a> </td> </tr> </tbody> </table> </div> </body> </html>
4楼
Shaishab Roy
0
2015-07-31 08:24:29
您应该删除第二时间依赖性。 依赖注入只需要第一次。
喜欢：
angular.module('app', []).service('ContactService', function ()......
angular.module('app').controller('ContactController', .....
或者您可以使用：
var app = angular.module('app', []);
app.service('ContactService', function ()......
app.controller('ContactController', ....