Angular4 开发环境搭建

Angular4 开发环境搭建

安装：

• Nodejs
• Angular CLI
• 自己喜欢的编译器

angular-cli安装命令：
npm install -g angular-cli
新版：npm install -g @angular/cli
设置淘宝镜像：npm config set registry “https://registry.npm.taobao.org/”
安装完成使用 ng -v 查看结果

---

创建HelloWorld程序

1. 使用 ng new HelloWorld 命令创建项目，生成目录结构如下：
   
   目录结构解释：
   e2e : 端对端测试目录，主要用于自动化测试
   node_modules : 第三方依赖包目录
   src : 项目源代码目录
   .angular-cli.json ： Angular命令行工具配置文件，可以修改它引入第三方的包，如jquery，bootstrap
   .editorconfig : 编辑器配置文件
   .gittgnore : git配置文件
   karma.conf.js : karma是单元测试的执行器，karma.conf.js是karma的配置文件
   package.json : npm工具配置文件，列出该应用使用的依赖包
   protractor.conf.js : 自动化测试配置文件
   REAADME.md : 说明文件
   tsconfig.json : 指定ts编译的一些参数信息
   tslint.json : tslint的配置文件，定义TypeScript代码质量检测规则
   src目录结构：
   
   app : 包含应用的组件和模块，我们要写的代码都在这个目录
   assets : 资源目录，主要存放静态资源，如图片
   environment : 环境配置。Angular是支持多环境开发的，我们可以在不同的环境下（开发环境，测试环境，生产环境）共用一套代码
   favicon.ico : 网站标题栏图标
   index.html：应用的根页面，程序启动访问页面
   main.ts：应用的入口，Angular通过此文件启动应用
   polyfills.ts：导入一些库使Angular能在老版本运行
   styles.css：全局的css样式
   tsconfig.app.json：TypeScript编译器的配置,添加第三方依赖的时候会修改这个文件

2.修改 app.components.ts 如下：

3.使用命令 ng serve 启动应用

4.浏览器打开地址 localhost:4200 查看结果

成功！

---

写完了喝杯可乐！