Szablon $ routeProvider AngularJS templateUrl zawsze zwraca 404 używając Express

Problem polega na tym, że AngularJS's $routeProvider/ngRoute nie działa tak, jak tego potrzebuję. Nie mogę wyświetlić go na wyświetlanej stronie .html na trasie. Zawsze staram się uzyskać GET http://localhost:3000/home.html 404 (Not Found), gdy próbuję załadować szablon na moją stronę index.ejs.

Próbowałem wielu odmian ścieżek, aby załadować .html, ale nie udało mi się. Stworzyłem nawet home.html dla każdego folderu w aplikacji, aby zobaczyć, czy pobierze wszystko, ale nic nie zadziałało. ng-include nie działa po wstrzyknięciu bezpośrednio do html.

/app.jsuproszczony: kod pierwotny stosuje express.router()

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

app.set('view engine', 'ejs'); 
app.set('views', path.join(__dirname, 'views')); 

app.use(express.static(path.join(__dirname, 'public'))); 

app.get('/', function(req,res,next) { 
    res.render('index', { page: 'index' }); 
}); 

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

/views/index.ejs

<!DOCTYPE html> 

<html lang="en" ng-app="App"> 
<head> 
    <meta charset="UTF-8"> 
    <title>WHY???</title> 
</head> 
<body> 

    <div class="main"> 
     <div ng-view></div> 
    </div> 

    <script src="/vendor/angular/angular.js"></script> 
    <script src="/vendor/angular-route/angular-route.js"></script> 
    <script src="/angular/angularApp.js"></script> 
</body> 
</html>

/public/angular/angularApp.js

var App = angular.module('App',['ngRoute']); 

App.config(['$routeProvider', function($routeProvider) { 

    $routeProvider 
     .when('/', { 
      templateUrl: 'views/index/home.html' 
     }) 
     .when('/team', { 
      templateUrl: '/views/index/team.html' 
     }) 
     .when('/faq', { 
      templateUrl: '/views/index/faq.html' 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }) 
}]);

home.html, team.html, and faq.html wszystkie mają proste linie kodu do celów testowych. Przykład: <h1> This is home.html </h1>

Folder Structure

app.js 

public/ 
|-vendor/ 
|-angular/ 
| |-angularApp.js 

views/ 
|-index.ejs 
| 
|-index/ 
| |-home.html 
| |-faq.html 
| |-team.html

Źródło

2015-12-06 Philip C

To wydaje się być problemem Ścieżka .. Musisz sprawdzić właściwą drogę dla swoich poglądów .. – Ved

@Ved Jak mam to zrobić? Wiem tylko, że statyczna ścieżka dla wyrażenia jest ustawiona na "widoki". Poza tym nie wiem, jak sprawdzić obecną ścieżkę wyszukiwania AngularJS. –

app.get ('/', function (req, res) { res.sendfile ('./ path/index.html'); }); Spróbuj tego użyć. – Ved

Node/Express obsługujących wszystko statycznie z folderu "publiczne". Musisz ustawić wszystkie adresy URL względem publicznego katalogu. Folder indeksu powinien zostać przeniesiony do publicznego.

app.js 

public/ 
|-vendor/ 
|-angular/ 
| |-angularApp.js 
|views/ 
| |-index/ 
| | |-home.html 
| | |-faq.html 
| | |-team.html 

views/ 
|-index.ejs

Ta struktura folderów powinna działać. naprawić Również w tym:

when('/', { 
     templateUrl: '/views/index/home.html' 
    })

Źródło

2015-12-06 04:12:58

OMG Kocham cię. Ale czy możesz wyjaśnić, dlaczego AngularJS śledzi statyczny katalog Express? Ten rodzaj wyjaśnia, dlaczego moja druga aplikacja działała. –

Główny "/" w adresach URL odnosi się do serwera podstawowego. W całej aplikacji serwer udaje, że folder publiczny jest wszystkim, co widzi. Fakt, że plik index.ejs jest renderowany, odbywa się za pomocą metody res.render. Ale jeśli chodzi o kątowe, to tylko folder publiczny istnieje! –

Szablon $ routeProvider AngularJS templateUrl zawsze zwraca 404 używając Express

Odpowiedz

Powiązane problemy