Domanda AngularJS 1.6 routing non funzionante


Sto cercando di creare la mia prima app angolare. Ma non funziona affatto. Non ho idea di quale sia il problema. Ho controllato la console, ma non ci sono errori.

<head>
 <meta charset="utf-8">
 <script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.js"></script>
</head>
<body ng-app="myApp">
  <h1>Test angular</h1>
  <a href="#/">Main</a>
  <a href="#sec">Second</a>
  <a href="#th">Third</a>
  <div ng-view></div>
</body>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
      templateUrl : "main.html"
  })
  .when("/sec", {
      templateUrl : "sec.html"
  })
  .when("/th", {
      templateUrl : "th.html"
  });
});
</script>

Qualcuno può aiutarmi?


10
2017-12-16 13:22


origine


risposte:


Percorsi in Angular 1.6 cambiato da #/myUrl a #!/myUrl

Dovresti cambiare il tuo riferimento a:

<a href="#!/">Main</a>
<a href="#!/sec">Second</a>
<a href="#!/th">Third</a>

Vedere questa risposta se si desidera rimuovere questo prefisso.


28
2018-01-25 13:02



Prova ad aggiungere $ locationProvider al tuo script

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

4
2018-02-13 14:01



Ho scoperto che non hai incluso il $routeProvider correttamente, ecco il codice di routing funzionante:

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
  .when("/", {
      templateUrl : "main.html"
  })
  .when("/sec", {
      templateUrl : "sec.html"
  })
  .when("/th", {
      templateUrl : "th.html"
  });
}]);

1
2017-12-16 13:28



Prova questo codice funziona

app.config(['$routeProvider','$locationProvider',function ($routeProvider,$locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
    .when('/', {
        templateUrl: 'index.html'
    })
    .when('/about', {
        templateUrl: 'about.html'
    })
    .when('/service', {
        templateUrl: 'service.html'
    });}]);

1
2018-04-22 10:52



Devi correggere gli attributi href:

Il modo corretto è:

<a href="#/">Main</a>
<a href="#/sec">Second</a>
<a href="#/th">Third</a>

-3
2017-12-16 13:40