我正在努力摆脱#!来自网址。我有以下代码 HTML 和 JS，
<head>
<base href="/">
</head>
<nav id="top-navigations" ng-app="portfolioApp">
<a class="dropdown">Menu <span class="arrow">▼</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);
}]);
地址栏中的 URL 更改为“http://localhost:4000/about” ' 当我单击链接但 View 未呈现且保持不变时。知道我在这里做错了什么吗？
最佳答案
首先:
你必须创建两个状态，例如 home和 about .
第二:
然后你必须创建一个可交换 View 作为<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">▼</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>
关于javascript - Angular JS - View 没有随 html5Mode(true) 改变但 URL 改变了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49482101/