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 模块的主组件是什么

Angular系列一:Angular程序架构的更多相关文章

  1. Angular简介与程序架构

    什么是angularJs 基于javascript开发的客户端应用框架,使我们可以更加快捷,简单的开发web应用. 诞生于2009年,后来被google收购,用在了很多项目中. 适用于CRUD应用或者 ...

  2. 转: GUI应用程序架构的十年变迁:MVC,MVP,MVVM,Unidirectional,Clean

    十年前,Martin Fowler撰写了 GUI Architectures 一文,至今被奉为经典.本文所谈的所谓架构二字,核心即是对于对于富客户端的 代码组织/职责划分 .纵览这十年内的架构模式变迁 ...

  3. GUI应用程序架构的十年变迁:MVC,MVP,MVVM,Unidirectional,Clean

    十年前,Martin Fowler撰写了 GUI Architectures 一文,至今被奉为经典.本文所谈的所谓架构二字,核心即是对于对于富客户端的 代码组织/职责划分 .纵览这十年内的架构模式变迁 ...

  4. Android 程序架构: MVC、MVP、MVVM、Unidirectional、Clean...

    摘选自:GUI 应用程序架构的十年变迁:MVC.MVP.MVVM.Unidirectional.Cleanhttps://zhuanlan.zhihu.com/p/26799645 MV* in An ...

  5. 用 MVC 5 的 EF6 Code First 入门 系列:MVC程序中实体框架的Code First迁移和部署

    用 MVC 5 的 EF6 Code First 入门 系列:MVC程序中实体框架的Code First迁移和部署 这是微软官方SignalR 2.0教程Getting Started with En ...

  6. MySQL系列:高可用架构之MHA

    前言 从11年毕业到现在,工作也好些年头,入坑mysql也有近四年的时间,也捣鼓过像mongodb.redis.cassandra.neo4j等Nosql数据库.其实一直想写博客分享下工作上的零零碎碎 ...

  7. 转:攻击JavaWeb应用[6]-程序架构与代码审计

    转:http://static.hx99.net/static/drops/tips-429.html 攻击JavaWeb应用[6]-程序架构与代码审计 园长 · 2013/08/12 16:53 注 ...

  8. 【转】24Cxx 系列EEPROM通用程序及应用

    关于I2C 学习的时候介绍得最多的就是24C02 这里存储EEPROM了,但学的时候基本只是讲讲简单的I2C 的总线数据传输而已,即使先gooogle上搜索也绝大部分这这样的文章,很少有说到如何在实际 ...

  9. fir.im Weekly - iOS/Android 应用程序架构解析

    假如问你一个iOS or Android app的架构,你会从哪些方面来说呢? 本期 fir.im Weekly 收集了关于  iOS/Android 开发资源,也加入了一些关于 Web 前端方面的分 ...

随机推荐

  1. [原]调试实战——使用windbg调试TerminateThread导致的死锁

    原调试debugwindbg死锁deadlock 前言 项目里的一个升级程序偶尔会死锁,查看dump后发现是死在了ShellExecuteExW里.经验少,不知道为什么,于是在高端调试论坛里发帖求助, ...

  2. C++概要简介

    从C到C++ 新类型 bool类型 新的输入输出方式 con cout 新的内存存储方式 new delete 引用& 用于传参 函数 内敛函数inline 通过代码区膨胀 减少函数的跳转时间 ...

  3. Codeforces 1294B - Collecting Packages

    题目大意: 机器人从(0,0)开始,他只能往上'U'或者往右'R'走 坐标系中有着很多包裹,分别在一些点上 机器人需要走过去把这些包裹全部收集起来 问能不能做到 如果能,再输出移动方式,相同移动方式输 ...

  4. MySQL--数据插入

    1.创建表的同时插入其他表的数据 CREATE TABLE table_name SELECT ... FROM    ... [...] 例: CREATE TABLE tabl_memory EN ...

  5. Python语言学习:列表常用的方法

    python 列表常用的方法 1.append( ):用于在列表末尾添加新的对象 list.appent(obj) #obj:添加到列表末尾的对象 #!/usr/bin/python aList = ...

  6. Python图形验证码识别

    一,OCR OCR,即Optical Character Recognition,光学字符识别,通过扫描字符,分析形状,然后将其翻译成电子文本的过程.tesserocr是Python的一个OCR识别库 ...

  7. 再来看看Java的新特性——其他新特性

    关于剩余Java8新特性知识点总结,包含:默认方法.Optional.CompletableFuture.时间相关. 默认方法 默认方法皆在帮助Java新功能可以兼容低版本JDK已开发的程序. 比如说 ...

  8. UIView的setNeedsLayout, layoutIfNeeded 和 layoutSubviews 方法之间的关系解释(转)

    layoutSubviews总结 ios layout机制相关方法 - (CGSize)sizeThatFits:(CGSize)size- (void)sizeToFit——————- - (voi ...

  9. Matlab高级教程_第二篇:MATLAB和C#对应数据类型的讲解(多讲一点儿C#的矩阵运算)

    1. MATLAB对应C#的数据类型主要在引入的父类库MWArray当中.有如下对应规则 .NET TYPE MWArrayTYPE MATLAB Type System.Double MWNumer ...

  10. 37)PHP,获取数据库值并在html中显示(晋级2)

    下面的是上一个的改进版,我知道为啥我的那个有问题了,因为我的__construct()这个函数的里面的那个变量名字搞错了,哎,这是经常犯得毛病,傻了吧唧,气死我了. 之前的那个变量的代码样子: cla ...