##Angular4——安装环境
首先需要安装node.js和npm，最新的nodejs已经集成了npm，所以不需要单独安装npm了。
直接下载nodejs的安装包，下一步直到安装结束。
安装完之后，在cmd窗口下，通过node - v和npm -v来查询node和npm版本，如果正确的现实版本号，则说明node和npm安装成功。
安装完之后可以指定一下npm库的位置，推荐使用淘宝镜像地址，提高下载插件速度，若不指定也可以，但是会直接在国外服务器下载，速度较慢。
npm config set registry https://registry.npm.taobao.org
npm -loglevel info install grunt
若是有自己的私有库服务器也是可以指定在这里的。 前面的安装工作完成后，调用下面的指令，
npm install -g @angular/cli
npm install node-sass --save-dev
安装CLI工具，调用
ng -v
如果能出现版本号和angular标识，则说明CLI安装完成。
####1、创建项目
ng new XXXX(项目名称)
可以通过命令行的方法创建一个需要的项目。
如图是一个test的项目，参照如图所示，说明一下angular4项目的目录结构。
首层目录：
node_modules 第三方依赖包存放目录
e2e 端到端的测试目录 用来做自动测试的
src 应用源代码目录
.angular-cli.json Angular命令行工具的配置文件。后期可能会去修改它，引一些其他的第三方的包 比如jquery等
karma.conf.js karma是单元测试的执行器，karma.conf.js是karma的配置文件
package.json 这是一个标准的npm工具的配置文件，这个文件里面列出了该应用程序所使用的第三方依赖包。实际上我们在新建项目的时候，等了半天就是在下载第三方依赖包。下载完成后会放在node_modules这个目录中，后期我们可能会修改这个文件。
protractor.conf.js 也是一个做自动化测试的配置文件
README.md 说明文件
tslint.json 是tslint的配置文件，用来定义TypeScript代码质量检查的规则，不用管它
src目录：
app目录 包含应用的组件和模块，我们要写的代码都在这个目录
assets目录 资源目录，存储静态资源的 比如图片
environments目录 环境配置。Angular是支持多环境开发的，我们可以在不同的环境下（开发环境，测试环境，生产环境）共用一套代码，主要用来配置环境的
index.html 整个应用的根html，程序启动就是访问这个页面
main.ts 整个项目的入口点，Angular通过这个文件来启动项目
polyfills.ts 主要是用来导入一些必要库，为了让Angular能正常运行在老版本下
styles.css 主要是放一些全局的样式
tsconfig.app.json TypeScript编译器的配置,添加第三方依赖的时候会修改这个文件
tsconfig.spec.json 不用管
test.ts 也是自动化测试用的
typings.d.ts 不用管
app目录：
app.component.css 组件样式
app.component.html 组件模板页面
app.component.spec.ts 暂时母鸡
app.component.ts 组件
app.module.ts 模块
这里的css和html和一般的html页面没有太大区别，比较重要的是组件和模块。下面详细看一下组件和模块文件的内容：
/*这里是从Angular核心模块里面引入了component装饰器*/
import {Component} from '@angular/core';
/*用装饰器定义了一个组件以及组件的元数据 所有的组件都必须使用这个装饰器来注解*/
@Component({
/*组件元数据 Angular会通过这里面的属性来渲染组件并执行逻辑
* selector就是css选择器，表示这个组件可以通过app-root来调用，index.html中有个<app-root>Loading...</app-root>标签，这个标签用来展示该组件的内容
*templateUrl 组件的模板，定义了组件的布局和内容
*styleUrls 该模板引用那个css样式
* */
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
/*AppComponent本来就是一个普通的typescript类，但是上面的组件元数据装饰器告诉Angular，AppComponent是一个组件，需要把一些元数据附加到这个类上，Angular就会把AppComponent当组件来处理*/
export class AppComponent {
/*这个类实际上就是该组件的控制器，我们的业务逻辑就是在这个类中编写*/
title = '学习Angular';
}
组件相关的概念：
1.组件元数据装饰器（@Component）
简称组件装饰器，用来告知Angular框架如何处理一个TypeScript类.
Component装饰器包含多个属性，这些属性的值叫做元数据，Angular会根据这些元数据的值来渲染组件并执行组件的逻辑。
*2.模板（Template） *
我们可以通过组件自带的模板来定义组件的外观，模板以html的形式存在，告诉Angular如何来渲染组件，一般来说，模板看起来很像html，但是我们可以在模板中使用Angular的数据绑定语法，来呈现控制器中的数据。
*3.控制器（controller） *
控制器就是一个普通的typescript类，他会被@Component来装饰，控制器会包含组件所有的属性和方法，绝大多数的业务逻辑都是写在控制器里的。控制器通过数据绑定与模板来通讯，模板展现控制器的数据，控制器处理模板上发生的事件。
...
还有其他的项目一些属性，在后面使用到的时候再具体说明
import { StarsComponent } from './stars/stars.component';
@NgModule({
declarations: [//声明模块中有哪些东西，只能声明 组件 指令 管道
AppComponent,
NavbarComponent,
FooterComponent,
SearchComponent,
CarouselComponent,
ProductComponent,
StarsComponent
],
imports: [//声明该模块依赖的模块
BrowserModule
],
providers: [],//默认为空，声明模块中听过的服务
bootstrap: [AppComponent]//声明模块的主组件
})
export class AppModule { }
####2、安装第三方插件
安装jQuery
npm install jquery --save
安装bootstrap
npm install bootstrap --save
安装好的第三方依赖在package.json文件中体现依赖名和版本：
"private": true,
"dependencies": {
"@angular/animations": "^5.0.0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"jquery": "^3.2.1",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},
在安装完jquery和bootstrap后，需要在.angular-cli.json文件里面对它们的js和css进行引用：
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
"environmentSource": "environments/environment.ts",
引用完之后还无法直接使用jQuery和bootstrap的内容，因为anjular是使用的typescript，所以还需要安装一下jquery和bootstrap的类型文件：
npm install @types/jquery --save
npm install @types/bootstrap --save
让typescript可以去识别jquery和bootstrap
####3、运行项目
运行一个angular项目，可以依赖于开发工具，也可以通过命令行的形式，在对应项目的根目录下执行命令行：
ng serve就可以启动项目。
