Я делаю некоторую работу в HTML, и я не могу правильно отобразить мою маршрутизацию с AngularJS. Я делаю в http://localhost:8000/ и пытаюсь показать about.html, например, как в http://localhost:8000/about. сейчас я все еще получаю "не найден". Я уверен, что мой файл app.js правильный, но плохо показан ниже. также мне нужно что-то поместить в фактическую страницу about.html? пожалуйста, посмотрите, я уверен, что я на правильном пути, просто нужна помощь с последними несколькими шагами.
code: index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="html,css">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style/default_style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.8/angular-route.js"></script>
<script src="scripts/app.js"></script>
<title>Lab</title>
</head>
<body ng-app="app" ng-controller="body" ng-init="setNews()">
<div ng-include="'view.html'"></div>
<div class="header">
<div class="headimage">
<h1>Not Fake News!</h1>
</div>
<div class="menubar">
<button id="newsbutton" ng-click="setNews()" ng-class="newsactive">News</button>
<button id="createbutton" ng-click="setCreate()" ng-class="createactive">Create</button>
<button id="aboutbutton" ng-click="setAbout()" ng-class="aboutactive">About</button>
<button>Login</button>
<ng-view></ng-view>
</div>
</div>
<div class="content">
<div ng-hide="showNews" id="news">
<div ng-repeat="p in newscontent" class="greyBox">
<h1>{{p.title}}</h1>
<p>{{p.content}}</p>
<p class="postfooter">{{p.author}} - {{p.tags}}</p>
</div>
</div>
<div ng-hide="showCreate" id="create">
<form onsubmit="return false" method="POST">
<p>Post Title</p>
<input type="text" name="postTitle" id="postTitle" placeholder="Post Title" ng-model="in.title">
<p>Author</p>
<input type="text" name="postTitle" id="postAuthor" placeholder="Author..." ng-model="in.author">
<p>Current time - {{time}}</p>
<p>Content</p>
<textarea name="postContent" id="postContent" cols=120 rows=20 placeholder="Post content here..." ng-model="in.content"></textarea>
<p>Tags</p>
<input type="text" name="postTitle" id="postTags" placeholder="Tags, separated by commas..." ng-model="in.tags">
<p>
<button ng-click="addNews()" class="postButton">POST</button>
</p>
</form>
</div>
<div ng-hide="showAbout" class="greyBox">
<h1>{{aboutHeader}}</h1>
<p>{{aboutContent}}</p>
</div>
<div ng-hide="showLogin"></div>
</div>
<div class="footer">
<div class="created_by"></div>
<p class="message">Get all the newest news straight from my unsourced blog. It's real research without the troubling sourcing or factual analysis
of data!</p>
<p class="author"> Patrick Armstrong {{time}}</p>
</div>
</body>
</html>
code: app.js
var app = angular.module("app", ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/news", {
templateUrl : "view/news.html", controller : "body"
})
.when("/about", {
templateUrl : "view/about.html", controller : "body"
})
.when("/create", {
templateUrl : "view/create.html", controller : "body"
})
.when("/footer", {
templateUrl : "view/footer.html", controller :"body"
})
.when("/navbar", {
templateUrl : "view/navbar.html", controller : "body"
})
.when("/title", {
templateUrl : "view/title.html", controller : "body"
})
.otherwise({
template : "<h1>404 I got no clue Fam</h1>"
});
});
app.controller("body", function($scope){
//Initailize a newscontent array to push posts to
$scope.newscontent = [];
//Initial post value - just to demonstrate
$scope.newscontent.push({"title" : "Post Title", "content" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper neque eu quam viverra euismod. Nulla id libero vel orci porta laoreet et nec enim.", "author" : "Patrick", "tags" : "No chekpoint if left unchanged"});
//Get values from our Angular ng-model variables in the form and push them to newscontent array
console.log($scope.newscontent);
$scope.addNews = () => {
console.log("Adding news..." + $scope.in.title + " " + $scope.in.content+" "+ $scope.in.author);
$scope.newscontent.push({"title" : $scope.in.title, "content" : $scope.in.content, "author" : $scope.in.author, "tags" : $scope.in.tags});
console.log("New newscontent array: " + $scope.newscontent);
};
//Set the various display booleans and CSS classes for the News display
$scope.setNews = () => { $scope.showNews = false;
$scope.showCreate = true;
$scope.showAbout = true;
$scope.login = true;
$scope.newsactive = "butactive"
$scope.createactive = ""
$scope.aboutactive = ""
$scope.time = getTime();
};
//Set the various display booleans and CSS classes for the News display
$scope.setCreate = () => {
$scope.showNews = true;
$scope.showCreate = false;
$scope.showAbout = true;
$scope.login = true;
$scope.newsactive = ""
$scope.createactive = "butactive"
$scope.aboutactive = ""
$scope.time = getTime();
};
//Set the various display booleans and CSS classes for the News display
$scope.setAbout = () => {
$scope.showNews = true;
$scope.showCreate = true;
$scope.showAbout = false;
$scope.login = true;
$scope.aboutContent = "Lorem ipsum dolor sit amet, icula.";
$scope.aboutHeader = "About";
$scope.newsactive = ""
$scope.createactive = ""
$scope.aboutactive = "butactive"
$scope.time = getTime();
};
});
//Get the current time
function getTime(){
var d = new Date();
var dateSt = d.getHours() + ':' + d.getMinutes() + ' - ' + d.getDay() + '/' + d.getMonth() + '/' + d.getFullYear();
return dateSt;
}