第一步,首先准备,安装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