Use angular to make a document help, the left side is the directory tree, and the right side uses ng-view
The homepage is as follows:
<p class="container-fluid bs-docs-container">
<p class="row">
<p id="doc_navbar" ng-controller="DocMenu" ng-init="init()" class="col-md-3 col-sm-3 col-sx-3">
<p class="bs-sidebar hidden-print affix-top">
<ul class="nav bs-sidenav">
<li class="panel-title">
<a href="#en-us_topic_0059503914.html">概述</a>
<a href="#en-us_topic_0055728380.html">FAQ</a>
</li>
</ul>
</p>
</p>
<p class="col-md-9 col-sm-9 col-sx-9" ng-view data-spy="scroll" data-target="doc_navbar">
<!-- <p style="margin-bottom: 100px;"></p> -->
</p>
</p>
<!-- docs end -->
</p>
js file is as follows
'use strict';
angular.module('portalDoc', ['ngRoute'])
.controller('DocMenu', function() {
})
.controller('DocContent', function($scope) {
})
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/en-us_topic_0059503914.html', { templateUrl: 'en-us_topic_0059503914.html'})
.when('/en-us_topic_0055728380.html', { templateUrl: 'en-us_topic_0055728380.html'})
.when('/en-us_topic_0054463579.html', { templateUrl: 'en-us_topic_0054463579.html'})
.when('/en-us_topic_0055728381.html', { templateUrl: 'en-us_topic_0055728381.html'})
.when('/en-us_topic_0055728382.html', { templateUrl: 'en-us_topic_0055728382.html'})
.when('/en-us_topic_0054463600.html', { templateUrl: 'en-us_topic_0054463600.html'})
.when('/en-us_topic_0054463621.html', { templateUrl: 'en-us_topic_0054463621.html'})
.when('/en-us_topic_0054463631.html', { templateUrl: 'en-us_topic_0054463631.html'})
.when('/en-us_topic_0054463504.html', { templateUrl: 'en-us_topic_0054463504.html'})
//$locationProvider.html5Mode(true);
});
The link is like this during normal access http://localhost:8011/home.html#/en-us_topic_0055728380.html
I encountered a problem that couldn't be solved. The html in templateUrl will link to each other. Use it directly<a href="en-us_topic_0054463504.html">xxxx</a>
Now there is no "#" in front of href. Click the link directly to access the link is http://localhost:8011/en-us_topic_0054463504.html
. Only the separate content of the template page is displayed, and the content of the homepage cannot be loaded. The content of /home.html is missing
Since the content of the template is written and generated using other tools, there is no '#' before the link (it is not convenient to add it because there are other uses)
In this case, how can the link be routed to the template? Can make the link look like this http://localhost:8011/home.html#/en-us_topic_0055728380.html
Thank you so much!
In addition, I have tried using locationProvider.html5Mode(true). When accessing home.html, the link becomes http://localhost:8011/
. If the left link is removed, # can be accessed normally. In home.html. When the html jumps to en-us_topic_0054463504.html, the link becomes http://localhost:8011/en-us_topic_0054463504.html
, which can be accessed normally, but open a new tab and put http: //localhost:8011/en-us_topic_0054463504.html
The home page home.html is not loaded again
The first question is that if you use a route, the ordinary a tag cannot be jumped like this. You need to use the corresponding route a tag to jump or use a function to do the route jump.
The second question is that if you want to directly access the sub-route, you need a server. Equipped with pseudo-static