Angular JS - 视图没有随 html5Mode(true) 改变，但 URL 改变了

Question

我正在努力摆脱#！来自 URL。我有以下代码 HTML 和 JS,

<head> 
    <base href="/"> 
</head>


<nav id="top-navigations" ng-app="portfolioApp">
            <a class="dropdown">Menu <span class="arrow">&#9660;</span></a>
            <ul ng-controller="sectionController">
              <li ng-repeat="navName in navNames"><a href="/about">{{navName.name}}</a></li>
            </ul>
</nav>


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

portfolioApp.config(['$routeProvider', '$locationProvider', function($routeProvider,$locationProvider){

  $routeProvider
  .when('/about',{
    templateUrl:'views/about.html',
    controller:'sectionController'
  }).otherwise({
    redirectTo:'/'
  });

  $locationProvider.html5Mode(true);

}]);

当我单击 link 时，地址栏中的 URL 变为“http://localhost:4000/about”，但视图未呈现并保持不变。知道我在这里做错了什么吗？

Answer 1

第一个：

您必须创建两个状态，例如 home 和 about。

第二个：

然后您必须创建一个可交换视图 <div ui-view="main"></div>。

第三个：

你必须像下面这样正确地使用 url:

<a href="/about">About Me</a>
<a href="/home">Home</a>

第三个： 创建两个文件，home.html 和 about.html。目录结构将是：

-index.html

-views/home.html

-views/about.html

app.js

var app = angular.module("portfolioApp", ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
  var homeState = {
    name: 'home',
    url:'/home',
    views: {
        'main': {
          templateUrl: "views/home.html"
        }
      }
  }

  var aboutState = {
    name: '/about',
    url:'/about',
    views: {
        'main': {
          templateUrl: "views/about.html"
        }
      }
  }

  $stateProvider.state(homeState);
  $stateProvider.state(aboutState);
  $locationProvider.hashPrefix('');

  $urlRouterProvider.otherwise("/home");

});

index.html

<html>
    <head>
         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
         <script src="app.js"></script>
         <style>.active { color: red; font-weight: bold; }</style>
         <base href="/">
    </head>
<body ng-app="portfolioApp">
<nav id="top-navigations">
            <a class="dropdown">Menu <span class="arrow">&#9660;</span>
                <a href="/about">About Me</a>
                <a href="/home">Home</a>
            </a>
</nav>
    <div ui-view="main"></div>
</body>
</html>

home.html:

<p>Home</p>

about.html:

<p>About</p>

Angular JS - 视图没有随 html5Mode(true) 改变，但 URL 改变了

Angular JS - views did not change with html5Mode(true) but URL does

html

javascript

pretty-urls

angularjs