AngularJS代碼沒有在Node.JS的本地主機上顯示應用

我已經構建了一個Node.JS應用（意思是我在自己的主JS文件中編寫了自己的HTTP服務器，該應用與其他應用一樣工作）。 HTML和CSS呈現在本地主機中。甚至JQuery也可以工作（通過CDN導入源文件）。但是，我曾嘗試在Index.html頁面中添加非常基本的AngularJS，並且AngularJS拒絕在我的本地主機中顯示（任何地方）。它應該顯示數字「3」，但不是。AngularJS代碼沒有在Node.JS的本地主機上顯示應用

這是我與角碼index.html頁面：

<!doctype html> 
    <html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>{{title}}</title> 
    <link rel="stylesheet" href="/css/home.css"> 
    <script src="/node_modules/angular/angular.js"></script> 
    <script src="/node_modules/angular-route/angular-route.js"></script> 
    </head> 
    <body> 
    <body ng-app> 
    <p>AngularJS code: {{ 1 + 2 }}</p> 
    </body> 
    <div class="hm-container"> 
    <h1 class="hm-title">Some text</h1> 
    </div> 
    </body> 
    </html>

Chrome的控制檯日誌消息稱：

"Failed to load resource: the server responded with a status of 404 (Not 
    Found) http://localhost:3000/node_modules/angular/angular.js"

index.html頁面正確呈現的角碼只能作爲當在我的Brackets文本編輯器瀏覽器預覽中進行測試並使用HTTP-Server模塊作爲獨立HTML文件進行測試時，可以使用獨立的獨立HTML頁面（不含CSS）。它正確顯示數字「3」。所以我知道我的角碼本身並不是這裏的問題。在我的本地主機中，HTML頁面不顯示數字「3」，甚至不顯示「{{1 + 2}}」。它只是讀取：「AngularJS代碼：」與其餘的HTML和CSS等。

即使通過CDN導入AngularJS源文件，或從Angular的站點而不是從NPM下載AngularJS源文件也不會產生任何區別。根據你的一些建議，我也玩過目錄結構，沒有運氣。所以我知道這不是問題的Angular源文件的文件路徑。

我一直在這個問題上停留了很多天，已經失去了睡眠，並因此而放棄了所有其他活動，所以如果你們中的任何一方都可以告訴我有關正在發生的事情以及如何解決此問題的意見問題，我會非常感謝！ :)

來源

2016-01-13 user791134

看起來你正在將web根目錄與項目根目錄混合在一起。 Angular的路徑需要相對於index.html的位置。把你的index.html放在與node_modules目錄相同的目錄下，它應該可以工作。 –

感謝您的意見傑森，我遵循您的建議，但不幸的是，這並沒有解決問題。它再次只在作爲獨立HTML文件運行時纔有效。 – user791134

好吧，這是我如何解決這個問題。這是我最初懷疑的服務器端問題。後立即

你很可能已經有這部分......

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

然後：在主Node.js的文件（通常是命名server.js或app.js）以下的需要以上代碼塊跳過幾行並添加...

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

顯然這是Express如何知道在哪裏爲您的JS文件提供服務。 'views'文件夾是我的HTML頁面的位置。您可以將它們放在名爲'public'的文件夾中。

的解決方案，下面的鏈接是什麼幫助我解決這個問題：AngularJS Code not working with NodeJS

我會補充說，這絕對是奇怪，我在jQuery的原理是將其導入的源文件通過CDN沒有上面的代碼更改，但Angular不能通過本地下載的Angular源文件或通過Angular CDN工作！如果我知道這是爲什麼，我一定會更新這個答案。如果您有任何Angular，Node，Express專家知道爲何如此，請啓發我們所有人！

希望這可以幫助有人遇到類似的問題。非常感謝你們兩位試圖幫助我解決這個奇怪的問題。您的時間和意見非常感謝！

來源

2016-01-13 15:35:31 user791134

好吧，你知道... cdn網址是外部的，而不是在你的服務器上。所以你不需要改變你的服務器來引用它，這有多奇怪呢？ –

啊！你從來沒有發佈你的服務器代碼開始，但如果你遵循每個人的建議，問題就不會出現在那裏。但最後，我很高興你幫助了你自己。未來的好運。保持編碼。 –

@KevinB你會想，但它的奇怪，因爲即使使用Angular CDN（這是外部的）它不起作用，直到我引用了我在服務器上做的。 – user791134

將Angular JS附加到您的索引中存在明顯問題。你已經表示你甚至嘗試通過CDN進行連接。

<!DOCTYPE html> 
<html> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 

<div ng-app=""> 

<h1> {{1+2}} </h1> 

</div> 

</body> 
</html>

這個作品，我檢查過。嘗試在你的代碼中集成你的東西。並按照賈森的建議，只從您的系統附加角度js。將角度js文件保存在同一個文件夾中。

來源

2016-01-13 03:47:57

感謝您輸入甘道夫，我遵循了您的建議，但不幸的是，這並沒有解決問題。它再次只在作爲獨立的HTML文件運行時（不管角源文件在哪裏或目錄結構發生了變化）才能運行。我相信問題似乎來自服務器端，因爲Chrome日誌控制檯會拋出未找到Angular的404資源，即使在隔離和呈現時完全相同的html文件正確讀取角度精確的角度相同的源文件正確。難倒了！ – user791134

服務器端？當在控制檯上你看到一個404文件，它只是意味着沒有訪問特定的文件。您是否使用了上面給出的HTML，即使這樣做不起作用？ –

我不認爲在這裏我們與你的後端有任何關係，因爲該文件沒有被抓取。 –

爲了使這項工作，你需要這樣的目錄結構：

|--app 
| |--index.html 
| |--node_modules 
| | |--angular 
| | | |--angular.js 
| | |--angular-route 
| | | |--angular-route.js 
| |--css 
| |--home.css

來源

2016-01-13 03:50:01

嘗試更改目錄結構，因爲您已指出，但不幸的是沒有區別。這是因爲無論我在哪裏放置角度文件（我甚至使用從角度站點下載的新角度源文件），HTML文件都正在讀取正確隔離的angularJS文件，但它只有一次似乎擊中節點服務器， angularJS不會呈現。 – user791134

HTML文件根本不讀取角度文件。它必須直接提供給瀏覽器。所有的作品都由瀏覽器組裝而不是服務器。來自瀏覽器的錯誤表明該文件不在index.html中給出的位置。 –

我同意你的意見。我甚至嘗試過不同的瀏覽器，甚至嘗試使用HTTP服務器（從NPM下載）服務我的應用程序，但沒有運氣。 – user791134

AngularJS代碼沒有在Node.JS的本地主機上顯示應用

回答

相關問題