Angular-ui-router無法加載視圖

我已經與Angular合作過，但已經有一段時間了，所以我有點生疏。我似乎無法讓Angular ui-router爲我的任何狀態加載html模板。這是一個非常簡單的應用程序;它不需要任何ajax調用，只需通過ui-router獲得html模板。我目前試圖達到的狀態是/ projects狀態，但是當我輸入/＃/ projects時，我看到的只是一個空白頁面。以及/＃後面的路徑變爲＃！＃％2Fprojects;我不確定這是否正常。控制檯中沒有顯示任何錯誤，並且我放入狀態和控制器的所有日誌似乎都已註銷，表明它們正在正確加載。因此，我相信Angular沒有找到templateUrl，但我不知道爲什麼不。我正在使用Angular 1.6。這裏是所有相關的文件： server.jsAngular-ui-router無法加載視圖

'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'); 
})

我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>

我app.js

'use strict'; 

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

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

我的項目狀態：

'嚴格使用';

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!")

項目控制器：

'use strict'; 

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

而且projects.html頁面（這是從來沒有達到過...）

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

請幫幫忙！

來源

2017-01-13 Wallaceness

您可以從瀏覽器加載視圖（即/js/projects/projects.html）嗎？ –

@JB Nizet不，我無法加載視圖。這是我的全部問題。 – Wallaceness

所以這是一個服務器問題。不是角度問題。如果服務器不允許訪問視圖，角度怎麼顯示呢？用NodeJS標記您的問題併發布您的服務器結構。我對NodeJS無能爲力，但如果NodeJS沒有標記爲NodeJS，您將不會得到NodeJS開發人員的關注。 –

我解決了這個問題。問題是我沒有在templateUrl中正確指定路徑。正確的路徑是browser/js/projects/projects.html，而不是js/projects/projects.html。奇怪，因爲我可以發誓我曾嘗試過，但我想這次它只是神奇的工作。我想我學到的教訓是從服務器提供的靜態路徑進行角度導航，而不是從我們以前認爲的加載的index.html導航。

來源

2017-01-14 16:53:12 Wallaceness

恢復到1.5.x版本，並使用＃在路線

來源

2017-01-13 18:55:26 pravs

這沒有奏效。我試着回到1.5.9並使用＃，但它沒有任何區別。 – Wallaceness

閱讀涼亭安裝日誌。在bower.json中，您可以添加像這樣的「分辨率」的分辨率：{ 「angular」：「1.5.11」 } – pravs

有激活的狀態三種主要方式： 1）調用$state.go()。 2）點擊包含ui-sref的鏈接，如<a ui-sref="stateName">State</a> 3）導航到與狀態相關的特定URL 由於您的代碼沒有辦法激活狀態，所以您的代碼無法訪問到project.html 請在下面檢查鏈接：

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

來源

2017-01-13 19:00:34

我手動導航到/＃/ projects頁面。感謝您的答案，但不幸的是，這並沒有解決問題，因爲即使我把ui-sref頁面仍然無法進入項目頁面。奇怪的是，在我點擊它後添加了第二個「項目」鏈接，如果這有幫助的話？ – Wallaceness

Angular-ui-router無法加載視圖

回答

相關問題