Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
220 views
in Technique[技术] by (71.8m points)

AngularJS: ngRoute Not Working

I am tying to get this simple routing to work and can't figure out what is the problem.

This is the HTML:

<html lang="en" ng-app="app">
     .
     .
     .  
     <a href="#voip">
       <div class="col-lg-3 service">
        <img src="assets/img/voip.svg"/>
        <h4 ng-bind-html="content.home.voip_header"></h4>
        <p ng-bind-html="content.home.voip_txt"></p>
      </div>
    </a>

    <section id="view">
      <div ng-view></div>
    </section>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

It's properly because you are using angular 1.6 and there has been a change the default hash-prefix:

Due to aa077e8, the default hash-prefix used for $location hash-bang URLs has changed from the empty string ('') to the bang ('!'). If your application does not use HTML5 mode or is being run on browsers that do not support HTML5 mode, and you have not specified your own hash-prefix then client side URLs will now contain a ! prefix. For example, rather than mydomain.com/#/a/b/c the URL will become mydomain.com/#!/a/b/c.

If you actually want to have no hash-prefix, then you can restore the previous behavior by adding a configuration block to you application:

appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix(''); }]); Source

So you have some options:

1. Set HTML5mode true

$locationProvider.html5Mode(true);

and in html set base in html header:

<base href="/">

Lastly change <a ng-href="#voip"> to

<a ng-href="voip">

2. Use the 1.6 way
Change
<a ng-href="#voip">
to
<a ng-href="#!voip">

3. Go back to old behaviour from 1.5 - set hash prefix manually

app.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...