Angular系列一：Angular程序架构

Angular程序架构

Angular程序架构

组件：一段带有业务逻辑和数据的Html
服务：用来封装可重用的业务逻辑
指令：允许你向Html元素添加自定义行为
模块：

环境搭建

• 安装nodeJs
  安装好nodeJs后，在cmd中我们将可以使用npm（nodeJs 的包管理工具 ）
  查看nodeJs版本

  1

  npm -v

• 安装angular cli命令行工具

  1	npm install -g @angular/cli

  查看angular cli 版本

  1

  ng -v

• 创建auction项目

  1 2	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类

大专栏  Angular系列一：Angular程序架构ipt">

1 2 3 4 5 6 7 8

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

模块

1 2 3 4 5 6 7 8 9 10 11

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

@NgModule装饰器元数据

元数据属性	描述
declaration	声明模块中有什么，只能声明组件、指令、管道
imports	声明该模块所依赖的模块
prividers	声明模块中提供的服务
bootstrap	模块的主组件是什么