什么是 Angular？

Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身，为你解决开发方面的各种挑战。Angular 为开发者提升构建 Web、手机或桌面应用的能力。

1. 设置开发环境

如果你的机器上还没有Node.js?和npm，请先安装它们。

请先在终端/控制台窗口中运行命令?node -v?和?npm -v，?来验证一下你正在运行 node?6.9.x?和 npm?3.x.x?以上的版本。?更老的版本可能会出现错误，更新的版本则没问题。

然后全局安装?Angular CLI?。

npm install -g @angular/cli

2. 创建新项目

打开终端窗口。

运行下列命令来生成一个新项目以及应用的骨架代码：

ng new my-app

3. 启动开发服务器

进入项目目录，并启动服务器。

cd my-app
ng serve --open

ng serve命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。

使用--open（或-o）参数可以自动打开浏览器并访问http://localhost:4200/。

使用Webstorm构建项目

webstorm下载地址: http://www.newasp.net/soft/182554.html

webstorm激活方法:?http://blog.csdn.net/voke_/article/details/76418116

1.创建新项目

 

2.配置运行环境

修改package.json

#请根据自身配置设置

“start”: “ng serve –host 172.18.5.41 –port 4200”,

“build”: “ng build –base-href ./”,

编辑运行结构

点击左上角加号+

修改运行配置

3.调试运行

运行结果

4.编译&打包 –?生产环境

切换到Terminal执行

npm run build

打包结束获得dist文件夹，ES5标准浏览器可执行文件。

开发环境跨域问题

搭建nginx

nginx配置增加，请求nginx进行转发

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

其他相关内容

typescript中文网:?http://www.tslang.cn

angular入门教程:?https://angular.cn/tutorial

NG-ZORRO组件库: https://ng.ant.design

material组件库:?https://material.angular.io