Angular4.0 起步

来源：互联网发布：阿里大数据平台建成编辑：程序博客网时间：2024/05/22 10:35

第一步，首先准备，安装Node.js 和 TypeScript。

Node.js 的安装方式很多，具体可以看Node.js的官网了解。这里不做解释，提供官网（https://nodejs.org/en/）。

这里值得注意的是，有很多同学都碰到的同一个问题就是，没留意nodejs的版本，官方说明了， node 6.9.x 和 npm 3.x.x 以上的版本，在终端/控制台窗口中运行命令 node -v 和 npm -v，来验证，如果不是这个版本以上的，是安装有问题滴。

关于TypeScript，Angluar没有强制要求用户使用ts，所以并不是非它不可，但是，TypeScript真的很好，让Angluar写起来更简单。

安装TypeScript

npm install -g typescript

第二步，安装cli。

安装angular-cli，这个是Angular 的一个命令行工具。安装命令：

npm install -g @angular/cli

第三步，创建新项目

安装完毕后，就可以开始第一个Angular4的项目了。

运行ng命令，创建一个新的ng项目：

ng new angular4_hello_world

安装完毕后，进入项目根目录，

cd angular4_hello_world

运行ng命令，开启应用

ng serve --open

浏览器自动打开，http://localhost:4200/，当你修改文件的时候，浏览器会自动刷新，到这里。就起步完成啦！

这里要值得注意的一下是端口，默认端口是4200，如果要发布到生产环境的话，可能要更换端口号。

这里有两个更换端口方法提供给大家，

第一个，找到node_modules/angular-cli/lib/config/schema.json，default值就是默认的端口

"serve": { "description": "Properties to be passed to the serve command",  "type": "object",  "properties": {                 "port": {                           "description": "The port the application will be served on",                           "type": "number",                          "default": 4200 },                          "host": {                                   "description": "The host the application will be served on",                                    "type": "string", "default": "localhost"                          }                 }            }}

第二个，也可以通过命令行方式修改，如：

ng serve --port 4201

1 0