1.1准备开发环境
1.1.1安装Node.js
针对自身系统安装node.js,注意版本要在8.x或以上。可通过以下命令(命令提示符下)查看是否存在node及其版本：
node -v显示例子：
--------------------------------------------------------------------------------------------------------
安装好的node.js包含node包管理器（NodePackage Manager,NPM）,用于管理项目中的包。可通过以下命令(命令提示符下)查看NPM版本：
npm -v显示例子：
(因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常。阿里巴巴提供了国内服务（CNPM）具体安装不详细写出，具体用法与NPM同，只是不再是类似npm -v 而是cnpm -v)
PS:本人用的是CNPM，WIN系统。因此之后的例子都基于CNPM 和WIN
--------------------------------------------------------------------------------------------------------
1.1.2安装angular-cli包
angular-cli包是Angular开发项目开发过程中创建和管理的标准办法，在搭建项目中简化了许多过程。通过以下命令(命令提示符下)安装：
cnpm install --global @angular/cli显示例子：
（PS：请就关于安装，耐心等待完成到可输入命令为止。）
--------------------------------------------------------------------------------------------------------
1.1.3安装git
官网安装git，用git版本控制工具来管理Angular开发所需要的一些软件包。安装完成后可通过以下命令(命令提示符下)查看git：
git --version显示例子：
或者直接在对应想操作的文件夹中git bash：
--------------------------------------------------------------------------------------------------------
1.2创建项目
1.2.1创建项目
选择一个你喜欢的位置，git bash ，并使用以下命令提示符运行以下命令，创建一个名为angular-Learning的新项目：
ng new angular-Learning显示例子：
--------------------------------------------------------------------------------------------------------
1.2.2安装CNPM包
cd angular-Learning 进入文件夹，再安装CNPM包。（通过CNPM包管理安装package.json文件，从而下载并安装该文件所指定的各类软家包）
cnpm installpackage.json(原配置共36个包)
{ "name": "angular-io-example", "version": "1.0.0", "private": true, "description": "Example project from an angular.io guide.", "scripts": { "ng": "ng", "build": "ng build --prod", "start": "ng serve", "test": "ng test", "lint": "tslint ./src/**/*.ts -t verbose", "e2e": "ng e2e" }, "keywords": [], "author": "", "license": "MIT", "dependencies": { "@angular/animations": "^6.0.0", "@angular/common": "^6.0.0", "@angular/compiler": "^6.0.0", "@angular/core": "^6.0.0", "@angular/forms": "^6.0.0", "@angular/http": "^6.0.0", "@angular/platform-browser": "^6.0.0", "@angular/platform-browser-dynamic": "^6.0.0", "@angular/router": "^6.0.0", "@angular/upgrade": "^6.0.0", "angular-in-memory-web-api": "^0.6.0", "core-js": "^2.5.4", "rxjs": "^6.0.0", "zone.js": "^0.8.24", "bootstrap":"4.0.0-alpha.4" }, "devDependencies": { "@angular-devkit/build-angular": "~0.6.0", "@angular/cli": "^6.0.0", "@angular/compiler-cli": "^6.0.0", "@angular/platform-server": "^6.0.0", "@types/jasmine": "~2.8.0", "@types/jasminewd2": "^2.0.3", "@types/node": "^6.0.45", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~1.7.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~1.4.2", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "karma-phantomjs-launcher": "^1.0.2", "lodash": "^4.16.2", "phantomjs-prebuilt": "^2.1.7", "protractor": "~5.3.0", "ts-node": "^5.0.1", "tslint": "^5.9.1", "typescript": "2.7.2", "jasmine-marbles": "^0.3.1" }, "repository": {} }
显示例子：
（此处可看到已安装对应的36个包）
若还需要额外的软件包，比方说bootstrap前端框架。可在package.json中添加红色部分：
在运行多一次命令去安装包：... "zone.js": "^0.8.24", "bootstrap":"4.0.0-alpha.4" }, "devDependencies": { "@angular-devkit/build-angular": "~0.6.0", ...
cnpm install显示例子：
（此处可看到已安装对应的37个包，较之前多了一个包）
--------------------------------------------------------------------------------------------------------
1.2.3启动服务器
到了现下阶段，项目的工具和结构已经基本完成。现在通过启动服务器测试工作是否属于正常进行。在对应项目文件下输入命令行：
ng serve --open显示成功的例子：
（可以通过ctrl+c 退出当前操作）
--------------------------------------------------------------------------------------------------------
1.2.4引用bootstrap.css(后续不懂可跳到后面添加angular功能跟着做)
在style.css文件头中引入（PS默认安装位置为node_mudule/@import "~bootstrap/dist/css/bootstrap.min.css"):
@import "~bootstrap/dist/css/bootstrap.min.css";试着修改index.html(主页面文件查看效果)
由于此处引用了默认组件<app-root>
<body> <app-root></app-root> </body>则修改对应组件
在最后面添加代码
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-primary">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-success">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-info">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-warning">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-danger">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>显示例子：
可以看到后面多了几个有了bootstrap样式的几行文字。
--------------------------------------------------------------------------------------------------------
1.3向项目添加Angular功能
1.3.1了解目录
你的应用代码位于src文件夹中。 所有的 Angular 组件、模板、样式、图片以及你的应用所需的任何东西都在那里。 这个文件夹之外的文件都是为构建应用提供支持用的。
- 访问
src/app目录。你会在这里看到AppComponent的三个实现文件：
app.component.ts— 组件的类代码，这是用 TypeScript 写的。app.component.html— 组件的模板，这是用 HTML 写的。app.component.css— 组件的私有 CSS 样式。
文件
用途
app/app.component.{ts,html,css,spec.ts}使用 HTML 模板、CSS 样式和单元测试定义
AppComponent组件。 它是根组件，随着应用的成长它会成为一棵组件树的根节点。
app/app.module.ts定义
AppModule，根模块为 Angular 描述如何组装应用。 目前，它只声明了AppComponent。 不久，它将声明更多组件。
assets/*这个文件夹下你可以放图片等任何东西，在构建应用时，它们全都会拷贝到发布包中。
environments/*这个文件夹中包括为各个目标环境准备的文件，它们导出了一些应用中要用到的配置变量。 这些文件会在构建应用时被替换。 比如你可能在生产环境中使用不同的 API 端点地址，或使用不同的统计 Token 参数。 甚至使用一些模拟服务。 所有这些，CLI 都替你考虑到了。
browserslist一个配置文件，用来在不同的前端工具之间共享目标浏览器。
favicon.ico每个网站都希望自己在书签栏中能好看一点。 请把它换成你自己的图标。
index.html这是别人访问你的网站是看到的主页面的 HTML 文件。 大多数情况下你都不用编辑它。 在构建应用时，CLI 会自动把所有
js和css文件添加进去，所以你不必在这里手动添加任何<script>或<link>标签。
karma.conf.js给Karma的单元测试配置，当运行
ng test时会用到它。
main.ts这是应用的主要入口点。 使用JIT 编译器编译本应用，并启动应用的根模块
AppModule，使其运行在浏览器中。 你还可以使用AOT 编译器，而不用修改任何代码 —— 只要给ng build或ng serve传入--aot参数就可以了。
polyfills.ts不同的浏览器对 Web 标准的支持程度也不同。 腻子脚本（polyfill）能把这些不同点进行标准化。 你只要使用
core-js和zone.js通常就够了，不过你也可以查看浏览器支持指南以了解更多信息。
styles.css这里是你的全局样式。 大多数情况下，你会希望在组件中使用局部样式，以利于维护，不过那些会影响你整个应用的样式你还是需要集中存放在这里。
test.ts这是单元测试的主要入口点。 它有一些你不熟悉的自定义配置，不过你并不需要编辑这里的任何东西。
tsconfig.{app|spec}.jsonTypeScript 编译器的配置文件。
tsconfig.app.json是为 Angular 应用准备的，而tsconfig.spec.json是为单元测试准备的。
tslint.json额外的 Linting 配置。当运行
ng lint时，它会供带有 Codelyzer 的 TSLint 使用。 Linting 可以帮你们保持代码风格的一致性。
src/文件夹是项目的根文件夹之一。 其它文件是用来帮助你构建、测试、维护、文档化和发布应用的。它们放在根目录下，和src/平级。
文件
用途
app/app.component.{ts,html,css,spec.ts}使用 HTML 模板、CSS 样式和单元测试定义
AppComponent组件。 它是根组件，随着应用的成长它会成为一棵组件树的根节点。
app/app.module.ts定义
AppModule，根模块为 Angular 描述如何组装应用。 目前，它只声明了AppComponent。 不久，它将声明更多组件。
assets/*这个文件夹下你可以放图片等任何东西，在构建应用时，它们全都会拷贝到发布包中。
environments/*这个文件夹中包括为各个目标环境准备的文件，它们导出了一些应用中要用到的配置变量。 这些文件会在构建应用时被替换。 比如你可能在生产环境中使用不同的 API 端点地址，或使用不同的统计 Token 参数。 甚至使用一些模拟服务。 所有这些，CLI 都替你考虑到了。
browserslist一个配置文件，用来在不同的前端工具之间共享目标浏览器。
favicon.ico每个网站都希望自己在书签栏中能好看一点。 请把它换成你自己的图标。
index.html这是别人访问你的网站是看到的主页面的 HTML 文件。 大多数情况下你都不用编辑它。 在构建应用时，CLI 会自动把所有
js和css文件添加进去，所以你不必在这里手动添加任何<script>或<link>标签。
karma.conf.js给Karma的单元测试配置，当运行
ng test时会用到它。
main.ts这是应用的主要入口点。 使用JIT 编译器编译本应用，并启动应用的根模块
AppModule，使其运行在浏览器中。 你还可以使用AOT 编译器，而不用修改任何代码 —— 只要给ng build或ng serve传入--aot参数就可以了。
polyfills.ts不同的浏览器对 Web 标准的支持程度也不同。 腻子脚本（polyfill）能把这些不同点进行标准化。 你只要使用
core-js和zone.js通常就够了，不过你也可以查看浏览器支持指南以了解更多信息。
styles.css这里是你的全局样式。 大多数情况下，你会希望在组件中使用局部样式，以利于维护，不过那些会影响你整个应用的样式你还是需要集中存放在这里。
test.ts这是单元测试的主要入口点。 它有一些你不熟悉的自定义配置，不过你并不需要编辑这里的任何东西。
tsconfig.{app|spec}.jsonTypeScript 编译器的配置文件。
tsconfig.app.json是为 Angular 应用准备的，而tsconfig.spec.json是为单元测试准备的。
tslint.json额外的 Linting 配置。当运行
ng lint时，它会供带有 Codelyzer 的 TSLint 使用。 Linting 可以帮你们保持代码风格的一致性。
--------------------------------------------------------------------------------------------------------
1.3.2创建模板（xx.component.html）
尝试修改root-app(即已经初始化有的app.component组件)
--------------------------------------------------------------------------------------------------------
1.3.3创建组件（xx.component.ts;提供模板所需要的逻辑和数据）
尝试修改title的值为Test
以app.compenent.ts为例：
import { Component } from '@angular/core'; @Component({//告诉ng这是组件 selector: 'app-root',//该属性指定一个css选择器，用于匹配该组件所要应用是哇HTML元素；像此处就是index.html中的<app-root></app-root> templateUrl: './app.component.html',//模板页面文件链接 styleUrls: ['./app.component.css']//样式表链接 }) export class AppComponent {//出口类，用于数据绑定 title = 'Test!'; }双花括号语法是 Angular 的插值绑定语法。
显示例子：
--------------------------------------------------------------------------------------------------------
