首頁 >web前端 >js教程 >AngularJS如何搭建web伺服器? angularjs搭建web伺服器的詳細流程

AngularJS如何搭建web伺服器? angularjs搭建web伺服器的詳細流程

寻∝梦
寻∝梦原創
2018-09-08 16:59:542375瀏覽

本篇文章主要的介紹了關於angularjs啟動web伺服器的操作,希望能幫到大家,現在開始看文章吧

安裝node.js

下載連結

官網位址: https://nodejs.org/en/
我下的解壓縮版的,直接解壓縮到你想安裝的目錄中
在我的電腦(右鍵)→屬性→進階系統變數→環境變數

#寫NODE_PATH

AngularJS如何搭建web伺服器? angularjs搭建web伺服器的詳細流程

加入到path中

AngularJS如何搭建web伺服器? angularjs搭建web伺服器的詳細流程node -v
在控制台能夠顯示node版本

 v6.11.4

安裝Web伺服器

npm install connect
npm install serve-static

編寫server.js 文件,書上的版本是2.x的版本,現在是3.x的版本了,書上的程式碼失效了,將該檔案放到nodejs的安裝目錄中去

var connect = require('connect');
    serveStatic = require('serve-static');
var app = connect();
app.use(serveStatic("../angularjs"));
app.listen(5000);

AngularJS設定

#新建angularjs資料夾和nodejs的安裝目錄平階
AngularJS如何搭建web伺服器? angularjs搭建web伺服器的詳細流程

資料夾中需要準備bootstrap的css檔案和angular.js
angularjs資料夾下載位址:點選下載
angularjs資料夾下新FirstTest.html

<!DOCTYPE html><html ng-app><head>
    <title> First Test</title>
    <script src="angular.js"></script>
    <link href="bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-grid.css" rel="stylesheet" /></head><body>
    <p class="btn btn-dark">{{ "AngularJS" }}</p>
    <p class="btn btn-success">Bootsstrap</p></body></html>

啟動web伺服器

跳到nodejs的安裝目錄

node server.js

查看瀏覽器http://localhost:5000/FirstTest .html

效果如下:
AngularJS如何搭建web伺服器? angularjs搭建web伺服器的詳細流程

這篇文章到這就結束了(想看更多就到PHP中文網AngularJS使用手冊欄位中學習),有問題的可以在下方留言提問。

以上是AngularJS如何搭建web伺服器? angularjs搭建web伺服器的詳細流程的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn