Я пытаюсь реализовать запрос get Http в angularjs. Я использую 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.
Может кто-нибудь сказать мне, где я ошибаюсь и почему данные не извлекаются.
Теперь это то, что я получаю в своей консоли. но данные не отображаются.
