AngularJS（一）环境搭建

墨蓝 2022-06-07 13:54 272阅读 0赞

> 参考书籍AngularJS高级程序设计第一部分准备

### 安装node.js ###

#### 下载链接 ####

官网地址： [https://nodejs.org/en/][https_nodejs.org_en]  
我下的解压版的，直接解压到你想安装的目录中  
**在我的电脑（右键）→属性→高级系统变量→环境变量**

#### 编写NODE\_PATH ####

![这里写图片描述][SouthEast]

#### 添加到path中 ####

![这里写图片描述][SouthEast 1]  
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的安装目录平级  
![这里写图片描述][SouthEast 2]  
文件夹中需要准备bootstrap的css文件和angular.js  
angularjs文件夹下载地址：[点击下载][Link 1]  
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> <div class="btn btn-dark">{ { "AngularJS" }}</div> <div class="btn btn-success">Bootsstrap</div> </body> </html>

### 启动web服务器 ###

跳转到nodejs的安装目录

node server.js

查看浏览器 [http://localhost:5000/FirstTest.html][http_localhost_5000_FirstTest.html]

效果如下：  
![这里写图片描述][SouthEast 3]

[https_nodejs.org_en]: https://nodejs.org/en/
[SouthEast]: /images/20220607/f474c9447e3d430c8a5f9d9112011b5c.png
[SouthEast 1]: /images/20220607/9966ee1d2207479888c4a85a6e63e4d9.png
[SouthEast 2]: /images/20220607/c6d8e8c6b24d46a29fdf98219c1ea2d7.png
[Link 1]: http://download.csdn.net/download/magicianofcodes/10036595
[http_localhost_5000_FirstTest.html]: http://localhost:5000/FirstTest.html
[SouthEast 3]: /images/20220607/142b90692f214c0a8dc1b24a18d0ad05.png