##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就可以启动项目。