目录
二、全局安装 Angular CLI 脚手架工具(只需要安装一次)。
五、Hello Angular4.0以及 app.module.ts、组件分析
一、安装最新版本的 nodejs
注意:请先在终端/控制台窗口中运行命令 node -v 和 npm -v, 来验证一下你正在运行node 6.9.x 和 npm 3.x.x 以上的版本。 更老的版本可能会出现错误,更新的版本则没问题。
二、全局安装 Angular CLI 脚手架工具(只需要安装一次)。
1、使用 npm 命令安装
2、安装 cnpm
npm 可能安装失败建议先用 npm 安装一下 cnpm 用淘宝镜像安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用 cnpm 命令安装
cnpm install -g @angular/cli
三、创建项目
1、打开 cmd 找到你要创建项目的目录
2、创建项目
ng new 项目名称 创建一个项目
ng new my-app
3、进入刚才创建的项目里面启动服务
cd my-app
cnpm install //安装依赖
ng serve --open
四、目录结构分析
1、项目创建完成后的目录结构:
文件 | 用途 |
e2e/ | 在e2e/下是端到端(End-to-End)测试。 它们不在src/下,是因为端到端测试实际上和应用是相互独立的,它只适用于测试你的应用而已。 这也就是为什么它会拥有自己的 tsconfig.json。 |
Src node_modules/ | 我们的项目的所有文件得放在 src 里面,所有的Angular 组件、模板、样式、图片以及你的应用所需的任何东西都在那里。 Node.js 创建了这个文件夹,并且把 package.json 中列举的所有第三方模块都放在其中。 |
.angular-cli.json | Angular CLI 的配置文件。 在这个文件中,我们可以设置一系列默认值,还可以配置项目编译时要包含的那些文件。 要了解更多, 请参阅它的官方文档。 |
.editorconfig | 给你的编辑器看的一个简单配置文件,它用来确保参与你项目的每个人都具有基本的编辑器配置。 大多数的编辑器都支 持.editorconfig 文件,详情参见 http://editorconfig.org 。 | |
.gitignore | 一个Git 的配置文件,用来确保某些自动生成的文件不会被提交到源码控制系统中。 | |
karma.conf.js | 给Karma 的单元测试配置,当运行 ng test 时会用到它。 | |
package.json | npm 配置文件,其中列出了项目使用到的第三方依赖包。 你还可以在这里添加自己的自定义脚本。 | |
protractor.conf.js | 给Protractor 使用的端到端测试配置文件,当运行 ng e2e 的时候会用到它。 | |
README.md | 项目的基础文档,预先写入了CLI 命令的信息。 别忘了用项目文档改进它,以便每个查看此仓库的人都能据此构建出你的应用。 | |
tsconfig.json | TypeScript 编译器的配置,你的 IDE 会借助它来给你提供更好的帮助。 | |
tslint.json | 给 TSLint 和 Codelyzer 用的配置信息,当运行 ng lint 时会用到。 Lint 功能可以帮你保持代码风格的统一。 |
2、src 目录结构:
文件 | 用途 |
app/app.component.{ts,html,css,spec.ts} | 组件 使用HTML 模板、CSS 样式和单元测试定义 AppComponent 组件。 它是根组件, 随着应用的成长它会成为一棵组件树的根节点。 |
app/app.module.ts | 定义AppModule,这个根模块会告诉Angular 如何组装该应用。 目前,它只声明了AppComponent。 稍后它还会声明更多组件。 |
五、Hello Angular4.0以及 app.module.ts、组件分析
1、app.module.ts
2、自定义组件