zoukankan      html  css  js  c++  java
  • Part 27 Remove # from URL AngularJS

    There are 4 simple steps to remove # from URLs in Angular

    Step 1 : Enable html5mode routing. To do this inject $locationProvider into config() function in script.js and call html5Mode() method passing true as the argument value. With this change the config function will now look as shown below. 

    .config(function ($routeProvider, $locationProvider) {
        $routeProvider
            .when("/home", {
                templateUrl: "Templates/home.html",
                controller: "homeController"
            })
            .when("/courses", {
                templateUrl: "Templates/courses.html",
                controller: "coursesController"
            })
            .when("/students", {
                templateUrl: "Templates/students.html",
                controller: "studentsController"
            })
        $locationProvider.html5Mode(true);
    })

    Step 2 : In index.html, remove # symbols from all the links. The links in index.html should look as shown below. 

    <a href="home">Home</a>
    <a href="courses">Courses</a>
    <a href="students">Students</a>

    Step 3 : Include the following URL rewrite rule in web.config. This rewrite rule, rewrites all urls to index.html, except if the request is for a file, or a directory or a Web API request. 

    <system.webServer>
      <rewrite>
        <rules>
          <rule name="RewriteRules" stopProcessing="true">
            <match url=".*" />
            <conditions logicalGrouping="MatchAll">
              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
              <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
              <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
            </conditions>
            <action type="Rewrite" url="/index.html" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>

    Step 4 : Set the base href to the location of your single page application. In the head section of index.html include the following line.

    <base href="/" />
     
  • 相关阅读:
    spring事务调用失效问题
    redis的主从、哨兵配置
    Lucene介绍与入门使用
    超详细“零”基础kafka入门篇
    消息队列——RabbitMQ学习笔记
    linux中RabbitMQ安装教程
    JAVA正则
    JAVA String类
    JAVA lang包介绍
    JAVA枚举
  • 原文地址:https://www.cnblogs.com/gester/p/5494394.html
Copyright © 2011-2022 走看看