Javascript AngularJS在第二个URL中为空_Javascript_Html_Angularjs

Javascript AngularJS在第二个URL中为空

javascript html angularjs

Javascript AngularJS在第二个URL中为空,javascript,html,angularjs,Javascript,Html,Angularjs,预期结果：在index.html中单击Title时，在titleDetails.html中打开Title和Comment 问题：URL更改为http://localhost:3000/titleDetails.html单击标题时但内容不变。当我刷新URL时，页面显示0篇文章屏幕截图：（index.html）和（单击index.html中的标题后的titleDetails.html）屏幕截图：（从index.html重定向后内容保持不变，刷新titleDetails.html后）代码：

预期结果：在

index.html

中单击

Title

时，在

titleDetails.html

中打开

Title

和

Comment

问题：URL更改为

http://localhost:3000/titleDetails.html

单击

标题时
但内容不变。当我刷新URL时，页面显示0篇文章
屏幕截图：（index.html）和（单击index.html中的标题后的titleDetails.html）

屏幕截图：（从index.html重定向后内容保持不变，刷新titleDetails.html后）

代码：
1）index.html
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<base href="/" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="app.js"></script>
    <title>Title</title>
</head>
<body>
    <div class="container" ng-controller="BlogController">
        <h1>Blog</h1>
            <input ng-model="post.title" class="form-control" placeholder="title"/>
            <textarea ng-model="post.body" class="form-control" placeholder="body"></textarea>
            <button ng-click="createPost(post)" class="btn btn-primary btn-block">Post</button>
            <button ng-click="updatePost(post)" class="btn btn-success btn-block">Update</button>

            <div ng-repeat="post in posts">
                <h2>
                    <a ng-click="titleDetails(post)">{{ post.title }} </a>
                    <a ng-click="editPost(post._id)" class="pull-right"><span class="glyphicon glyphicon-pencil"></span></a>
                    <a ng-click="deletePost(post._id)" class="pull-right"><span class = "glyphicon glyphicon-remove"></span></a>
                </h2>
                <em>{{post.posted}}</em>
                <p>{{post.body}}</p>
            </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<base href="/" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="app.js"></script>
    <title>Title</title>
</head>
<body> 
    <div class="container" ng-controller="BlogController">
        <h1>Blog</h1>
            <div>
                <h2>
                    <a>{{ postDetail.title }} </a>
                </h2>
                    <em>{{postDetail.posted}}</em>
                    <p>{{postDetail.body}}</p>
            </div>
    </div> 
</body>
</html>

AngularJS是面向SPA（单页应用程序）的。您的链接仍然绑定到经典的多页导航。由于$location
和$http.get
不是在您的场景中加载模板和导航的正确服务，因此您必须重新运行应用程序
只要使用$routeProvider
，AngularJS就可以加载模板并相应地更新地址栏。关于如何设置路由
但您基本上必须在应用程序中包括ngRoute
：
angular.module('ngRouteExample', ['ngRoute'])

然后配置您的路由：
.config(function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'blogPosts.html',
      controller: 'BlogController'
    })
    .when('/post/:id', {
      templateUrl: 'titleDetails.html',
      controller: 'TitleController'
    });
}

由于答案可能很长，下面的Plunker演示了一个简单的路由实现，供您学习：
Angualar用于单页应用程序开发。经过
.config(function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'blogPosts.html',
      controller: 'BlogController'
    })
    .when('/post/:id', {
      templateUrl: 'titleDetails.html',
      controller: 'TitleController'
    });
}