How to build a web server with AngularJS? The detailed process of building a web server with angularjs-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to build a web server with AngularJS? The detailed process of building a web server with angularjs

寻∝梦

Sep 08, 2018 pm 04:59 PM

angularjsnode.js

This article mainly introduces the operation of starting the web server in angularjs. I hope it can help everyone. Let’s start reading the article now

Install node.js

Download link

Official website address: https://nodejs.org/en/
The decompressed version I downloaded, directly decompress it into the directory you want to install.
In My Computer (right click)→Properties→Advanced System Variables→Environment Variables

Write NODE_PATH

How to build a web server with AngularJS? The detailed process of building a web server with angularjs

##Add to In path

node -v How to build a web server with AngularJS? The detailed process of building a web server with angularjs The node version can be displayed on the console

 v6.11.4

Install the Web server

npm install connect
npm install serve-static

Write the server.js file, as shown in the book The version is version 2.x, now it is version 3.x, the code in the book is invalid, put the file in the nodejs installation directory

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

AngularJS settings

Create a new angularjs folder and nodejs installation directory level

How to build a web server with AngularJS? The detailed process of building a web server with angularjs

In the folder, you need to prepare the bootstrap css file and angular.js

angularjs folder download address: click to download
Create a new FirstTest.html in the angularjs folder

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

Start the web server

Jump to the nodejs installation directory

node server.js

View the browser http://localhost:5000/FirstTest .html

The effect is as follows:

How to build a web server with AngularJS? The detailed process of building a web server with angularjs

This article ends here (if you want to see more, go to the PHP Chinese website
AngularJS User Manual column), if you have any questions, you can leave a message below.

The above is the detailed content of How to build a web server with AngularJS? The detailed process of building a web server with angularjs. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Vercel是什么？怎么部署Node服务？May 07, 2022 pm 09:34 PM

Vercel是什么？本篇文章带大家了解一下Vercel，并介绍一下在Vercel中部署 Node 服务的方法，希望对大家有所帮助！

node.js gm是什么Jul 12, 2022 pm 06:28 PM

gm是基于node.js的图片处理插件，它封装了图片处理工具GraphicsMagick（GM）和ImageMagick（IM），可使用spawn的方式调用。gm插件不是node默认安装的，需执行“npm install gm -S”进行安装才可使用。

node爬取数据实例：聊聊怎么抓取小说章节May 02, 2022 am 10:00 AM

node怎么爬取数据？下面本篇文章给大家分享一个node爬虫实例，聊聊利用node抓取小说章节的方法，希望对大家有所帮助！

手把手带你使用Node.js和adb开发一个手机备份小工具Apr 14, 2022 pm 09:06 PM

本篇文章给大家分享一个Node实战，介绍一下使用Node.js和adb怎么开发一个手机备份小工具，希望对大家有所帮助！

2022年最新5款的angularjs教程从入门到精通Jun 15, 2017 pm 05:50 PM

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。