angular.js - If there is no # in front of the link in the Angular template, how can I route it to the template?
高洛峰
高洛峰 2017-06-27 09:18:42
0
1
990

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

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

reply all(1)
给我你的怀抱

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template