# 1
## Angular程序架构
组件：一段带有业务逻辑和数据的Html 服务：用来封装可重用的业务逻辑 指令：允许你向Html元素添加自定义行为 模块：
## 环境搭建
* 安装nodeJs
安装好nodeJs后，在cmd中我们将可以使用npm（nodeJs 的包管理工具 ）
查看nodeJs版本
```
npm -v
```
* 安装angular cli命令行工具
```
npm install -g @angular/cli
```
查看angular cli 版本
```
ng -v
```
* 创建auction项目
```
ng new auction
ng new 项目名
```
## 项目目录结构解析
* 项目根目录
| 结构 | 描述 |
| ------------------ | ------------------------------------------------------------------------------------------------------------------ |
| e2e | 端到端的测试目录 用来做自动测试的 |
| node\_modules | 第三方依赖包存放目录 |
| 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 | 不用管 |
## angular概念
Component Component由以下3个部分组成：
* 装饰器@Component 组件元数据装饰器（内有元数据）
* 模板Template
* 控制器Controller 一个普通的typescript类
```typescript
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'blog-ui';
}
```
装饰器元数据
| 元数据属性 | 描述 |
| ----------- | -------------------------------------- |
| selector | 就是css选择器，可以理解为一个html标签，通过该标签可以展示该组件的内容 |
| templateUrl | 组件的模板，定义了组件的布局和内容 |
| styleUrls | 该模板引用那个css样式 |
组件相关的概念： 1.组件元数据装饰器（@Component） 简称组件装饰器，用来告知Angular框架如何处理一个TypeScript类. Component装饰器包含多个属性，这些属性的值叫做元数据，Angular会根据这些元数据的值来渲染组件并执行组件的逻辑
2.模板（Template） 我们可以通过组件自带的模板来定义组件的外观，模板以html的形式存在，告诉Angular如何来渲染组件，一般来说，模板看起来很像html，但是我们可以在模板中使用Angular的数据绑定语法，来呈现控制器中的数据。
3.控制器（controller） 控制器就是一个普通的typescript类，他会被@Component来装饰，控制器会包含组件所有的属性和方法，绝大多数的业务逻辑都是写在控制器里的。控制器通过数据绑定与模板来通讯，模板展现控制器的数据，控制器处理模板上发生的事件。
装饰器，模板和控制器是组件的必备要素。还有一些可选的元素，比如：
* 输入属性（@inputs）:是用来接收外部传入的数据的,Angular的程序结构就是一个组件树，输入属性允许在组件树种传递数据
* 提供器（providers）：这个是用来做依赖注入的
* 生命周期钩子（LifeCycle Hooks）：一个组件从创建到销毁的过程中会有多个钩子会被触发，类似于Android中的Activity的生命周期
* 样式表：组件可以关联一些样式表
* 动画（Animations）： Angular提供了一个动画包来帮助我们方便的创建一些跟组件相关的动画效果，比如淡入淡出等
* 输出属性（@Outputs）：用来定义一些其他组件可能需要的事件或者用来在组件之间共享数据
模块
```typescript
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
@NgModule装饰器元数据
| 元数据属性 | 描述 |
| ----------- | --------------------- |
| declaration | 声明模块中有什么，只能声明组件、指令、管道 |
| imports | 声明该模块所依赖的模块 |
| prividers | 声明模块中提供的服务 |
| bootstrap | 模块的主组件是什么 |
启动Angular过程 启动时加载页面 index.js 启动时加载脚本 main.ts
main.ts 兼容老版本 platformBrowserDynamic 关闭开发者模式 环境配置
添加一个npm auction start start （package.json 中定义）
## 开发准备
安装第三方类库到本地 npm install jquery --save --save 加入到packege.json 中 npm install bootstrap --save
引入到项目中 angular-cli.json styles
类型描述文件（让ts认识） npm install @type/jquery --save-dev
```typescript
test(){
}
```
APP组件 导航组件 搜索表组件 轮播图组件 页脚组件 星级评价组件 产品组件
ng g component navbar footer search carousel product stars
## 开发app组件
container row col-md-3
## 开发navbar和footer组件
主要是bootstrap
```markup
加横线
data-toggle="collapse"
data
padding-top=70
```
## 开发search和carousel组件
```markup
form-group
lable for
input id
select
轮播图组件
```
## 开发product组件
用对象来封装产品属性
```typescript
private products:Array;
ngOnInit(){
this.products=[{
new Product()
}]
}
export class Product{
constructor（
public id：number,
public Array
）
}
```
```markup
thumbnail
caption
*ngFor="let product of products"
```
## 开发stars组件
```typescript
@Input()
private rating:number;
private stars：boolean[];
ngOnInit(){
this.stars=[];
}
```
```markup
```