【发布时间】：2018-10-17 04:00:00
【问题描述】：
我正在尝试在 angularjs 中实现 Http 获取请求。我正在使用 Eclipse IDE 并在 tomcat9.0 服务器上运行我的应用程序。
这是我的目录结构
index.html:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>AngularJS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!--Route Guard -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- Controller.js -->
<script src="controller.js"></script>
<body ng-app="myApp">
<div ng-view></div>
</body>
</html>
controller.js:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : "login.html",
controller : 'loginCtrl'
})
.when('/dashboard', {
templateUrl: 'dashboard.html',
controller : 'datactrl',
resolve: {
"check" : function($location, $rootScope) {
if(!$rootScope.loggedIn) {
$location.path('/');
}
}
}
})
.otherwise({
redirectTo : '/'
});
});
app.controller('loginCtrl', function($scope ,$location , $rootScope) {
$scope.submit = function(){
if($scope.username == 'asd' && $scope.password == 'asd' ){
$rootScope.loggedIn = true;
$location.path('/dashboard');
}
else
{
alert("Invalid username and password")
}
};
});
app.controller('datactrl', function($scope, $http) {
$http.get('http://localhost:8082/AngularJSTest/database.json')
.then(function(response) {
$scope.persons = response.records;
});
});
login.html:
<div class="col-sm-8 col-sm-push-4">
</div>
<div class="col-sm-4 col-sm-pull-4" style="margin: auto;">
<br><br><br><br><br><br>
<h3>Login </h3><hr>
<form id="myLogin">
<div class="form-group">
<label for="username">UserName:</label>
<input type="text" class="form-control" id="username" placeholder="Enter UserName" ng-model="username">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="password" placeholder="Enter password" ng-model="password">
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<button type="button" class="btn btn-primary" ng-click="submit()">Login</button>
</form>
</div>
dashboard.html:
<div>
<ul>
<h4>Name And Age Of The persons</h4>
<li ng-repeat="person in persons">
{{ person.Name+ ':' + person.Age }}
</li>
</ul>
</div>
database.json:
{
"records": [
{
"Name" : "asd",
"Age" : "20"
},
{
"Name" : "asd",
"Age" : "20"
},
{
"Name" : "asd",
"Age" : "20"
}
]
}
我可以在浏览器中访问我的数据文件，如下所示
当我运行我的应用程序并登录时，我被重定向到仪表板，但我只看到文本“人员姓名和年龄”，而不是来自 json 文件的数据。
谁能告诉我我错在哪里以及为什么没有获取数据。
现在这就是我在控制台中得到的。但没有显示数据。
【问题讨论】：
-
在开发者工具中检查控制台，使用 F12 打开。
-
分享完整的dashboard.html文件
-
@Klooven .........我在我的控制台中没有发现任何错误
标签： angularjs bootstrap-4