2017-01-13 5 views
0

Ich habe schon mit Angular gearbeitet, aber es ist schon eine Weile her, also bin ich ein bisschen eingerostet. Ich kann angular ui-router nicht scheinen, die HTML-Vorlagen für irgendwelche meiner Zustände zu laden. Dies ist eine sehr einfache App; es erfordert keine Ajax-Anrufe, nur HTML-Vorlagen über UI-Router. Der Status, den ich gerade erreichen möchte, ist der/projects-Status, aber wenn ich/#/projects eintrage, sehe ich nur eine leere Seite. Auch der Pfad nach dem/# wird #! #% 2FProjects; Ich bin mir nicht sicher, ob das normal ist. In der Konsole werden keine Fehler angezeigt, und alle Protokolle, die ich in den Status und den Controller eingegeben habe, scheinen sich abzumelden, um anzuzeigen, dass sie korrekt geladen werden. Ich glaube also, dass Angular einfach nicht das TemplateUrl findet, aber ich weiß nicht warum. Ich benutze Angular 1.6. Hier finden Sie alle relevanten Dateien: server.jsAngular-UI-Router lädt keine Ansichten

'use strict'; 
/* eslint-disable global-require */ 

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

app.use("/", express.static(__dirname)); 

var port=app.listen(process.env.PORT || 8080); 
app.listen(port, function(){ 
    console.log("Server working!"); 
}) 

app.get('*', function(request, response){ 
    console.log(request); 
    response.sendFile(__dirname+'/browser/index.html'); 
}) 

meine Datei index.html:

<html> 
<head> 
<title> My Portfolio</title> 
<script src="/node_modules/angular/angular.js" defer></script> 
<script src="/node_modules/angular-ui-router/release/angular-ui-router.js" defer></script> 
<script src="browser/js/app.js" defer></script> 
<script src="browser/js/projects/projects_controller.js" defer></script> 
<script src="browser/js/projects/projects_state.js" defer></script> 
</head> 
<body ng-app="app"> 
<div id="main"> 
<ui-view></ui-view> 
</div> 
</body> 
</html> 

mein app.js

'use strict'; 

var app = angular.module('app', ['ui.router']); 

app.run(function($rootScope) { 
    $rootScope.$on("$stateChangeError", console.log.bind(console)); 
}); 

mein Projekt Zustand:

"streng verwenden";

console.log("project state"); 
app.config(function($stateProvider){ 
    $stateProvider.state('projects', { 
     url:'/projects', 
     templateUrl: '/js/projects/projects.html', 
     controller: 'projects_ctrl' 
    }) 
}) 
console.log("state out!") 

Projekte Controller:

'use strict'; 

console.log("controller"); 
app.controller('projects_ctrl', function($scope){ 
    console.log("hi!") 
}) 

Und die projects.html Seite (die nie erreicht ...)

<div> 
<h1>Hi, this is the projects page!</h1> 
</div> 

Bitte um Hilfe!

+0

Können Sie die Ansicht (d. H. /js/projects/projects.html) von Ihrem Browser laden? –

+0

@JB Nizet Nein, ich kann die Ansicht nicht laden. Das ist mein ganzes Problem. – Wallaceness

+0

Also ist es ein Serverproblem. Kein eckiges Problem. Wenn der Server den Zugriff auf die Ansicht nicht erlaubt, wie könnte er diese anzeigen? Markieren Sie Ihre Frage mit NodeJS und veröffentlichen Sie die Struktur Ihres Servers. Ich bin nicht kompetent in Bezug auf NodeJS, aber Sie werden NodeJS-Entwickler nicht auf Ihre Frage aufmerksam machen, wenn sie nicht mit NodeJS getaggt sind. –

Antwort

0

Ich löste das Problem. Das Problem war, dass ich den Pfad in TemplateUrl nicht korrekt angegeben hatte. Der richtige Pfad war browser/js/projects/projects.html, nicht js/projects/projects.html. Seltsam, weil ich hätte schwören können, dass ich das schon mal probiert habe, aber dieses Mal hat es einfach wunderbar funktioniert. Ich denke, die Lektion, die ich gelernt habe, ist eckig navigiert aus dem statischen Pfad auf dem Server zur Verfügung gestellt, nicht aus der index.html, wo es geladen wird, wie ich zuvor dachte.

0

zu 1.5.x wiederherstellen zurück und verwenden # in Routen

+0

Dies hat nicht funktioniert. Ich habe versucht, zu 1.5.9 zurückzukehren und die # zu verwenden, aber es machte keinen Unterschied. – Wallaceness

+0

Lesen Sie das Bower-Installationsprotokoll. In bower.json können Sie eine Auflösung wie diese "Auflösungen" hinzufügen: { "eckig": "1.5.11" } – pravs

0

gibt drei Hauptwege sind, einen Zustand zu aktivieren: 1) Ruf $state.go(). 2) Klicken Sie auf den Link mit ui-sref wie 3) Navigieren zu bestimmten URL mit dem Status verbunden Da es in Ihrem Code keine Möglichkeit, Status zu aktivieren, konnte Ihr Code bis Projekt.html erreichen Bitte Kasse unten Link:

https://plnkr.co/edit/AVhuZJsO8ujySLZQG4TL?p=preview 
+0

Ich habe manuell auf die/#/Projekte Seite navigiert. Danke für die Antwort, aber leider hat das das Problem nicht gelöst, denn auch nachdem ich die ui-sref gestellt habe, wäre die Seite immer noch nicht auf die Projektseite gelangt. Merkwürdigerweise fügte es einen zweiten Link "Projekte" hinzu, nachdem ich darauf geklickt habe, wenn das überhaupt hilft? – Wallaceness