Angular 1 Routing funktioniert nicht - sehr einfach

Ich habe ein Problem mit meiner ersten eckigen App mit Routing. Es ist sehr einfach und funktioniert nicht.Angular 1 Routing funktioniert nicht - sehr einfach

Die sich verändernde URL, wenn ich auf die Links klicken

index.html - Datei: /// C: /Users/me/repos/angularRouteTest/app/index.html#/
etwa klicken - Datei: /// C: /Users/me/repos/angularRouteTest/app/index.html#/# über

Und der Inhalt in ng-Ansicht ändert sich nicht

Code:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title></title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="bower_components/angular/angular.min.js"></script> 
    <script src="bower_components/angular-route/angular-route.min.js"></script> 
    <script src="scripts/app.js"></script> 
</head> 
<body data-ng-app="swsApp"> 
    {{1+1}} 
    <p><a href="#/">Index</a></p> 
    <a href="#about">About</a> 
    <div ng-view></div> 

</body>

(function() { 
"use strict"; 

var app = angular.module("swsApp", ["ngRoute"]); 

app.config(function($routeProvider) { 
    $routeProvider 
     .when("/", { 
template : "<h1>Main</h1><p>Click on the links to change this content</p>" 
     }) 
     .when("about", { 
template : "<h1>About</h1><p>Click on the links to change this content</p>" 
     }) 
     .otherwise({ 
      template: "<h1>otherwise</h1>" 
     }) 
}) 
}());

Jede Idee, was los ist?

Quelle

2017-01-04 Nerf

Sie müssen einen lokalen HTTP-Server (Apache, IIS) installieren, um es –

zu arbeiten Gibt es einen Fehler in der Konsole? Wenn du deinen Code in einen Codesnippet steckst, funktioniert es gut, ich vermute, dass Alon korrekt ist. –

Ich denke das '}());' sollte so aussehen '})();' – Nilesh

Zuerst benötigen Sie keinen Webserver, um eine angularJS-App zu starten.

In Bezug auf Ihr Problem mit Ihren Links verwenden AngularJS Hash-Bang-URLs: https://docs.angularjs.org/guide/$location#hashbang-mode-default-mode-

Hashbang URL nur bedeuten AngularJS abfangen Links mit dem Hash-Bang #!

Sie müssen nur diesen Hash-Bang hinzufügen für jeden Link in Sie HTML-Code:

app.config(function($routeProvider) { 
    $routeProvider 
     .when("/", { 
template : "<h1>Main</h1><p>Click on the links to change this content</p>" 
     }) 
     .when("/about", { 
template : "<h1>About</h1><p>Clicsdfsdfsdfs this content</p>" 
     }) 
     .otherwise({ 
      template: "<h1>otherwise</h1>" 
     }) 
}) 
</script> 
<body data-ng-app="sws"> 
    {{1+1}} 
    <p><a href="#">Index</a></p> 
    <a href="#!/about">About</a> 
    <div ng-view></div> 

</body>

Quelle

2017-01-04 21:46:21

Es gibt eine Option, nicht '!' Zu verwenden? – Nerf

10 Sie müssen dies in Ihrer angualr config hinzufügen: '$ locationProvider.hashPrefix ('');' –

Wo sollte ich es hinzufügen? – Nerf

Angular 1 Routing funktioniert nicht - sehr einfach

Antwort

Verwandte Themen