Question

我试图了解如何使用Angular，但没有运气。我不知道我做错了什么。

这是我的index.html：

<html ng-app="app">
	<head>
		<meta charset="utf-8">
		<title>testAngular</title>
		<link rel="stylesheet" type="text/css" href="core/css/style.css">
		<script src="core/js/angular.min.js"></script>
		<script src="core/js/angularRoute.min.js"></script>
		<script src="Controllers/users.js"></script>
		<script src="Services/router.js"></script>
	</head>
	<body>
		<div class="container">
			<p class="well">
				<a href="#/">Home</a>
				<a href="#/users">Users</a>
				<a href="#/shop">Shop</a>
			</p>
			<h3>Users</h3>
			<hr class="vau">
			<form>
				<input class="form-control" type="text" ng-model="search">
			</form>
			<div ng-view=""></div>
		</div>
	</body>
</html>

这是我的router.js

'use strict';
angular.module('app', ['ngRoute'])
.config(function($routeProvider){
	$routeProvider
		.when('/', {
			templateUrl: 'tpl/home.html'
		})
		.when('/users', {
			templateUrl: 'tpl/users.html',
			controller: 'userCtrl'
		})
		.when('/shop', {
			templateUrl: 'tpl/shop.html'
		})
		.otherwise({ redirectTo: '/' });
});

这是我的users.js

'use strict';
angular.module('app', ['ngRoute'])
.controller('userCtrl', function($scope, $http){
	$http.get('dataModel/users.json').then(function(res){
		$scope.users = res.data;
	});
});

这是我的users.html

<h3>Hello Users</h3>
<div ng-controller="userCtrl">
	<table class="table table-hover">
		<tr>
			<th>pId</th>
			<th>Vorname</th>
			<th>Nachname</th>
			<th>E-Mail</th>
			<th>Abteilung</th>
		</tr>
		<tbody>
			<tr ng-repeat="user in users | filter:search">
				<td>{{user.pId}}</td>
				<td>{{user.fName}}</td>
				<td>{{user.lName}}</td>
				<td>{{user.email}}</td>
				<td>{{user.abtelung}}</td>
			</tr>
		</tbody>
	</table>
</div>
<p>hello Users</p>

我不知道为什么控制器不工作。非常感谢你的任何想法和帮助。

Answer 1

当你这样做时：

angular.module('app', ['ngRoute'])

您正在创建一个名为app的新模块，并覆盖任何具有相同名称的现有模块。

相反，创建模块一次，在其他文件上创建模型时，请执行以下操作：

angular.module('app')

路由器控制器AngularJs不工作

1 个答案: