Javascript 角度JS-视图没有随HTML5模式（true）而改变，但URL会改变_Javascript_Angularjs_Html_Pretty Urls

Javascript 角度JS-视图没有随HTML5模式（true）而改变，但URL会改变

javascript angularjs html

Javascript 角度JS-视图没有随HTML5模式（true）而改变，但URL会改变,javascript,angularjs,html,pretty-urls,Javascript,Angularjs,Html,Pretty Urls,我正试图摆脱！从URL。我有以下HTML和JS代码 <head> <base href="/"> </head> <nav id="top-navigations" ng-app="portfolioApp"> <a class="dropdown">Menu <span class="arrow">▼</span></a>

我正试图摆脱！从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);

}]);




var portfolioApp=angular.module（'portfolioApp'，['ngRoute']）；
portfolioApp.config（['$routeProvider'，'$locationProvider'，函数（$routeProvider，$locationProvider）{
$routeProvider
.when（“/关于”{
templateUrl:'views/about.html'，
控制器：'sectionController'
}).否则({
重定向到：'/'
});
$locationProvider.html5Mode（true）；
}]);

当我单击链接时，地址栏中的URL更改为“”，但视图未呈现，并且保持不变。知道我做错了什么吗？

首先：

您必须创建两个状态，例如

home

和

about

秒：

然后您必须创建一个可交换视图，如

第三名：

您必须正确使用url，如下所示：

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

index.html


.active{颜色：红色；字体大小：粗体；}

home.html：

主页

关于.html：

关于

您必须创建app.js和index.html。这在这里行不通，也行不通。我编辑了这个问题。上面的代码适用于“”，但当我添加“”并删除“#！”时从“href=“/about me”和“html5Mode（true）”中，我看到只有url在更改，而不是视图。

，这是针对这一行的。url将是：等等，我正在更新我的答案你的代码很好。但是，你知道这对我有什么影响吗？

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");

});

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

<p>Home</p>

<p>About</p>