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类

@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）：用来定义一些其他组件可能需要的事件或者用来在组件之间共享数据

模块

@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

test(){

}

APP组件 导航组件 搜索表组件 轮播图组件 页脚组件 星级评价组件 产品组件

ng g component navbar footer search carousel product stars

开发app组件

container row col-md-3

开发navbar和footer组件

主要是bootstrap

加横线
<span class="icon-bar"> 

data-toggle="collapse"
data

padding-top=70

开发search和carousel组件

form-group
lable for
input id
select


轮播图组件

开发product组件

用对象来封装产品属性

private products:Array<Product>;

ngOnInit(){
    this.products=[{
        new Product()
    }]

}




export class Product{
    constructor（
    public id：number,
    public Array<string>
    ）
}

thumbnail
caption

*ngFor="let product of products"

开发stars组件

@Input()
private rating:number;
private stars：boolean[];


ngOnInit(){
    this.stars=[];
}

<p>
<span></span>
</p>