Angular-Route für Vorlagen

Ich habe Probleme, meine Routen in meiner Angular-Anwendung arbeiten zu lassen. Es zeigt die Hauptvorlage korrekt an, aber wenn ich auf den Link für die andere Vorlage klicke, passiert nichts. Hier ist mein Code ist:Angular-Route für Vorlagen

INDEX.HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Node, NPM and Bower</title> 
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> 
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css"> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body ng-app="app"> 

<nav> 
    <h3>Angular App</h3> 
    <a href="/">Home</a> 
    <a href="/about">About</a> 
</nav> 

<div ng-view></div> 

<script src="bower_components/angular/angular.js"></script> 
<script src="bower_components/angular-route/angular-route.js"></script> 
<script src="./app/app.js"></script> 
</body> 
</html>

APP.JS

angular.module("app", ["ngRoute"]). 
config(function($routeProvider) { 
    $routeProvider 
    .when("/", { 
     template : "<h1>Home</h1>" 
    }) 
    .when("/about", { 
     template : "<h1>About</h1>" 
    }); 
});

Außerdem gibt es einen Grund, dass Bootstrap und Angular gar nicht arbeiten, wenn ich Versuchen Sie, einen Localhost mit Express und Node zu verwenden? zum Beispiel, wenn ich Index.html in meinem Browser hochziehe, ist der Text Sans-Serif, etc., aber wenn ich es mit localhost hochziehe, ist es immer noch die Standard-Serif-Schriftart.

SERVER.JS

var express = require('express'); 
var app = express(); 
var path = require('path'); 

app.get('/', function(req, res) { 
    res.sendFile(path.join(__dirname + '/index.html')); 
}); 

app.listen(3000, function() { 
    console.log('app started'); 
});

Quelle

2017-02-21 Hudson Taylor

Angular 1.5
So mit grundlegenden 1.5 Routing müssen Sie verwenden:

<a href="#about">About</a>

die Strecke zu schlagen. Siehe Plunker for more info

Angular 1.6
Wenn Sie Winkel 1.6 verwenden es:

<a href="#!about">About</a>

Blick auf AngularJS: ngRoute Not Working für andere Optionen.

Bootstrap Problem
es kein Problem sein sollte, ist es richtig Caching.

Quelle

2017-02-21 19:26:56

Danke für die Hilfe! Das bestimmte Dinge. Es funktioniert jedoch immer noch nicht auf localhost. Ich füge meine server.js-Datei hinzu, so dass Sie sich das auch ansehen können. –

Ihre server.js Datei sieht gut aus mir. Gibt es keine Fehler? Ist angular nicht geladen oder ist es der Server, der nicht läuft? –

Ich habe es herausgefunden. Ich musste diese drei Zeilen hinzufügen: 'app.use (express.static (__ dirname + '/ views)); app.use ('/ bower_components', express.static (__ Verzeichnisname + '/ bower_components')); app.use ('/ public', express.static (___dirname + '/ public')); ' –

Ich fand die Antwort. Sie müssen dem Server mitteilen, dass er Ihre statischen Dateien wie folgt von ihren Verzeichnissen routen soll:

app.use(express.static(__dirname + '/views')); 
app.use('/bower_components', express.static(__dirname + '/bower_components')); 
app.use('/public', express.static(__dirname + '/public'));

Quelle

2017-02-21 20:45:21

Angular-Route für Vorlagen

Antwort

Verwandte Themen