AngularJS $位置目录答案

【问题标题】：AngularJS $location directoryAngularJS $位置目录
【发布时间】：2017-03-18 19:22:06
【问题描述】：

主页网址：http://localhost:3000/

当前第二页网址：http://localhost:3000/#/titleDetails.html

预期的第二页 URL：http://localhost:3000/titleDetails.html

目前，当我单击主页中的标题时，URL 包含一个额外的 /#，这会导致页面被重定向到 titleDetails.html。

titleDetails.html和index.html的目录在同一个目录下。

请问我该如何解决这个问题？

Original Post: AngularJS Display 1 Post in New Page

app.js

(function () {
    angular
    .module("BlogApp", [])
    .config(function($locationProvider) {
        $locationProvider.html5Mode(true).hashPrefix('!');
    })
    .controller("BlogController", BlogController);

    function BlogController($scope, $http, $rootScope, $location) {
        $scope.createPost = createPost;
        $scope.deletePost = deletePost;
        $scope.editPost = editPost;
        $scope.updatePost = updatePost;
        $scope.titleDetails = titleDetails;
        $scope.postDetail = null;

    function init() {
        getAllPosts();
    }
    init();

    function titleDetails(post)
    { 
        $scope.postDetail = post; 
        $location.path('/titleDetails.html'); 
    }

    function updatePost(post){
        console.log(post);
        $http
        .put("/api/blogpost/"+post._id, post)
        .success(getAllPosts);
    }

    function editPost(postId){
        $http
        .get("/api/blogpost/"+postId)
        .success(function(post){
            $scope.post = post;
        });
    }

        function deletePost(postId){
            $http
            .delete("/api/blogpost/"+postId)
            .success(getAllPosts);
        }

        function getAllPosts(){
            $http
            .get("/api/blogpost")
            .success(function(posts) {
                $scope.posts = posts;
            });
        }

        function createPost(post) {
            console.log(post);
            $http
            .post("/api/blogpost",post)
            .success(getAllPosts);
        }
    }
})();

index.html

<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
    <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>

titleDetails.html：

<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
    <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>

index.html 中的控制台错误：

angular.js:13708 Error: [$location:nobase] http://errors.angularjs.org/1.5.7/$location/nobase
    at angular.js:38
    at sf.$get (angular.js:13384)
    at Object.invoke (angular.js:4709)
    at angular.js:4508
    at d (angular.js:4655)
    at e (angular.js:4679)
    at Object.invoke (angular.js:4701)
    at R.instance (angular.js:10234)
    at m (angular.js:9147)
    at g (angular.js:8510)

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

Angular 有 3 个路由操作：

Hashbang 模式
HTML5 模式
HTML5 模式下的Hashbang

您可以配置：$locationProvider.html5Mode(true).hashPrefix('!');

查看documentation

【讨论】：

将配置放入控制器变量后，我的页面停止加载任何帖子
您需要将其添加到角度 config，而不是 controller。像这样的东西：.config(function($locationProvider) {}
我可以知道在哪里可以找到角度 config 文件吗？还是我的app.js 中代码的顶部？
您在config 定义中缺少)，在controller 之前
在你的头部添加<base href="/" />