WebStorm,Chrome,Nodejs实现Angularjs所见即所得

环境配置:

安装好Nodejs,WebStorm,Chrome下载好Angularjs;

一.安装Chrome的WebStorm插件,JetBrains IDE support,请自行安装

二.安装http-server并启动

1.新建文件夹test,用来作为项目根目录.

2.打开cmd窗口,切换到test文件夹,执行命令

npm install http-server -g

3.执行以下命令,启动http-server

http-server -p 3000

该命令将会启动一个http服务器,将当前目录下的全部内容加载,例如,该目录下有一个index.html,此时便可通过127.0.0.1:3000/index.html来访问

其中,-p 3000为指定端口号为3000,其他可配置参数如下

-p 端口号 (默认 8080)-a IP 地址 (默认 0.0.0.0)-d 显示目录列表 (默认 'True')-i 显示 autoIndex (默认 'True')-e or --ext 如果没有提供默认的文件扩展名(默认 'html')-s or --silent 禁止日志信息输出--cors 启用 CORS via the Access-Control-Allow-Origin header-o 在开始服务后打开浏览器-h or --help 打印列表并退出-c 为 cache-control max-age header 设置Cache time(秒) , e.g. -c10 for 10 seconds (defaults to '3600'). 禁用 caching, 则使用 -c-1.

三.加载该项目目录并创建文件

使用WebStorm打开该目录,新建index.html,加入Angularjs文件,

四.启动调试

使用chrome打开127.0.0.1:3000/index.html,右键点击页面,选择inspect in WebStorm,此时在WebStorm中编辑index.html,便可实时显示在浏览器中