logo标签列表

从AngularJS路由中删除#号

angularjsangularjs-routingngroute
3
我查看了AngularJS路由和模板的单页面应用教程Single Page Apps with AngularJS Routing and Templating，并找到了一个去掉URL中#标记的教程Pretty URLs in AngularJS: Removing the #。我按照教程的步骤进行了操作，但无法使应用程序正常工作。如果有人能够提供帮助将会非常有益。以下是我的代码，还望您仔细查看。 

// script.js

// create the module and name it scotchApp
// also include ngRoute for all our routing needs
var scotchApp = angular.module('scotchApp', ['ngRoute']);

// configure our routes
scotchApp.config(function($routeProvider, $locationProvider) {
    $routeProvider

            // route for the home page
            .when('/', {
        templateUrl: 'pages/home.html',
        controller: 'mainController'
    })

            // route for the about page
            .when('/about', {
        templateUrl: 'pages/about.html',
        controller: 'aboutController'
    })

            // route for the contact page
            .when('/contact', {
        templateUrl: 'pages/contact.html',
        controller: 'contactController'
    });
    // use the HTML5 History API
    $locationProvider.html5Mode(true);
});

// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
});

scotchApp.controller('aboutController', function($scope) {
    $scope.message = 'Look! I am an about page.';
});

scotchApp.controller('contactController', function($scope) {
    $scope.message = 'Contact us! JK. This is just a demo.';
});
<!-- index.html -->
<!DOCTYPE html>

<!-- define angular app -->
<html ng-app="scotchApp">
    <head>
        <base href="/">
        <!-- SCROLLS -->
        <!-- load bootstrap and fontawesome via CDN -->
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

        <!-- SPELLS -->
        <!-- load angular via CDN -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
        <script src="script.js"></script>
    </head>

    <!-- define angular controller -->
    <body ng-controller="mainController">

        <!-- HEADER AND NAVBAR -->
        <header>
            <nav class="navbar navbar-default">
                <div class="container">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="/">Angular Routing Example</a>
                    </div>

                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                        <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
                        <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
                    </ul>
                </div>
            </nav>
        </header>

        <!-- MAIN CONTENT AND INJECTED VIEWS -->
        <div id="main">

            <!-- angular templating -->
            <!-- this is where content will be injected -->
            <div ng-view></div>

        </div>
    </body>
</html>

第一个教程后，我的URL变成了file:///C:/Users/MAX/Desktop/angular/AngularJS%20Routing/index.html#/，但第二个教程后，URL变成了file:///C:/Users/MAX/Desktop/angular/AngularJS%20Routing/index.html#%2F，并且链接停止工作。
1
你能更具体地说明你得到的结果吗？通常，一旦您切换到HTML5模式，您需要在Web服务器上进行URL重写，以便服务器知道要提供哪个文件或服务器端路线。你的问题中没有任何内容表明这是否是你的问题。 - nbering
在第一篇教程之后，我的URL变成了file:///C:/Users/MAX/Desktop/angular/AngularJS%20Routing/index.html# /，但在第二篇教程之后，URL变成了file:///C:/Users/MAX/Desktop/angular/AngularJS%20Routing/index.html#%2F，链接停止工作。 - vimuth
2
从文件系统中提供Web页面本身就有足够的问题。你真的需要使用本地Web服务器托管你的页面。有很多免费的解决方案可供选择，适用性取决于你使用的其他工具。 - nbering
嗨@Balrog，我已经添加到本地服务器了。这是我的文件结构- angulRoute - script.js
- index.php
- pages
----- home.html ----- about.html ----- contact.html 当我点击链接时，只有URL更改为http://localhost/angulRoute/#contact，但什么也没有发生。 - vimuth
1
如果您正在使用HTML5模式，则不能将其与#符号混合使用。 - nbering
4个回答
3

这很容易解决。

你只需要在声明模块的地方注入 ($locationProvider)，并将这段代码 ($locationProvider.html5Mode(true)) 放在函数内部。 就像这样。

var myApp = angular.module('myApp',[]);

myApp.config(function ($locationProvider){
  $locationProvider.html5Mode(true);
});
1
你不应该直接在浏览器中打开Angular的html文件。相反，你应该为此启动一个简单的http服务器。最简单的方法是假设你已经安装了Python 2.7：
使用以下命令：python -m http.server <portNo> 来将目录内容提供给 http://localhost:<portNo>/ 然后你也可以导航到 http://localhost:<portNo>/about 和 http://localhost:<portNo>/contact 例如：导航到你项目的主目录，然后运行命令python -m http.server 8888将文件提供给http://localhost:8888/，路由应该能正常工作。
1
最终在上述答案的帮助下，我找到了答案。（我使用wamp服务器作为本地Web服务器）
我的文件结构如下：
angulRoute - script.js - index.html - pages ----- home.html ----- about.html ----- contact.html 

// script.js

// create the module and name it scotchApp
// also include ngRoute for all our routing needs
var scotchApp = angular.module('scotchApp', ['ngRoute']);

// configure our routes
scotchApp.config(function($routeProvider, $locationProvider) {
    $routeProvider

            // route for the home page
            .when('/angulRoute/', {
        templateUrl: 'pages/home.html',
        controller: 'mainController'
    })

            // route for the about page
            .when('/angulRoute/about', {
        templateUrl: 'pages/about.html',
        controller: 'aboutController'
    })

            // route for the contact page
            .when('/angulRoute/contact', {
        templateUrl: 'pages/contact.html',
        controller: 'contactController'
    });

    // use the HTML5 History API
    $locationProvider.html5Mode(true);
});

// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
});

scotchApp.controller('aboutController', function($scope) {
    $scope.message = 'Look! I am an about page.';
});

scotchApp.controller('contactController', function($scope) {
    $scope.message = 'Contact us! JK. This is just a demo.';
});
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="scotchApp">
    <head>
        <meta charset="utf-8">
        <!-- SCROLLS -->
        <!-- load bootstrap and fontawesome via CDN -->
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

        <!-- SPELLS -->
        <!-- load angular and angular route via CDN -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
        <script src="script.js"></script>
    </head>
    <body ng-controller="mainController">

        <!-- HEADER AND NAVBAR -->
        <header>
            <nav class="navbar navbar-default">
                <div class="container">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="/">Angular Routing Example</a>
                    </div>

                    <ul class="nav navbar-nav navbar-right">
                        <li><a ng-href="/angulRoute/"><i class="fa fa-home"></i> Home</a></li>
                        <li><a ng-href="/angulRoute/about"><i class="fa fa-shield"></i> About</a></li>
                        <li><a ng-href="/angulRoute/contact"><i class="fa fa-comment"></i> Contact</a></li>
                    </ul>
                </div>
            </nav>
        </header>

        <!-- MAIN CONTENT AND INJECTED VIEWS -->
        <div id="main">

            <!-- angular templating -->
            <!-- this is where content will be injected -->
            <div ng-view></div>

        </div>

    </body>
</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接