Question

我查看了Single Page Apps with AngularJS Routing and Templating教程并找到了Pretty URLs in AngularJS: Removing the #教程，用于删除网址中的＃tag。我做了所有的事情，但我无法让应用程序正常工作。有人可以帮助解决这个问题。这些是我的代码，

<!-- 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>

using SelectPdf;
public partial class HtmlcodePrint : System.Web.UI.Page
{
    string TxtHtmlCode;
    protected void Page_Load(object sender, EventArgs e)
    {

        if (!IsPostBack)
        {
             TxtHtmlCode = @"<html>
 <body>
  Hello World from selectpdf.com.
 </body>
</html>
";
        }
    }

    protected void Btndownloadpdf_Click(object sender, EventArgs e)
        {
            // read parameters from the webpage
            string htmlString = TxtHtmlCode;
            string baseUrl = "http://localhost:51868/HtmlcodePrint.aspx";

            string pdf_page_size ="A4";
            PdfPageSize pageSize = (PdfPageSize)Enum.Parse(typeof(PdfPageSize), 
                pdf_page_size, true);

            string pdf_orientation = "Portrait";
            PdfPageOrientation pdfOrientation = 
                (PdfPageOrientation)Enum.Parse(typeof(PdfPageOrientation), 
                pdf_orientation, true);

            int webPageWidth = 1024;
            try
            {
                webPageWidth = Convert.ToInt32("1024");
            }
            catch { }

            int webPageHeight = 0;
            try
            {
                webPageHeight = Convert.ToInt32("777");
            }
            catch { }

            // instantiate a html to pdf converter object
            HtmlToPdf converter = new HtmlToPdf();

            // set converter options
            converter.Options.PdfPageSize = pageSize;
            converter.Options.PdfPageOrientation = pdfOrientation;
            converter.Options.WebPageWidth = webPageWidth;
            converter.Options.WebPageHeight = webPageHeight;

            // create a new pdf document converting an url
            PdfDocument doc = converter.ConvertHtmlString(htmlString, baseUrl);

            // save pdf document
            doc.Save(Response, false, "Sample.pdf");

            // close pdf document
            doc.Close();
        }
    }

在我的网址成为第一个教程之后文件：/// C：/Users/MAX/Desktop/angular/AngularJS%20Routing/index.html#/ 但在第二个URL成为之后文件：/// C：/Users/MAX/Desktop/angular/AngularJS%20Routing/index.html#%2F 和链接停止woking

Answer 1

这很容易解决。

您只需要在您声明模块的地方注入（$ locationProvider）并将此代码（$ locationProvider.html5Mode（true））放入函数中。这样的事情。

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

myApp.config(function ($locationProvider){
  $locationProvider.html5Mode(true);
});

Answer 2

首先，从<a href="#...">移除哈希标记，例如<a href="about">或<a href="/about">。我还建议您使用ng-href代替href

其次，使用一些本地http服务器，如python -m http.server来提供文件。

注意：如果您希望使用html5模式，并希望您的应用在用户未登陆index.html但在另一条路线上运行良好时，您必须配置http服务器以在所有你的路线。我们通常直接提供index.html而不是返回404。

Answer 3

最后，在上述答案的帮助下，我想找到答案。（我使用wamp服务器作为本地Web服务器）

我的沉默结构

angulRoute
     - script.js
     - index.html
     - 页面     ----- 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>

从AngularJS路由中删除＃

3 个答案: