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
2ng 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类
1 |
({ |
装饰器元数据
元数据属性 | 描述 |
---|---|
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 |
@NgModule({ |
@NgModule装饰器元数据
元数据属性 | 描述 |
---|---|
declaration | 声明模块中有什么,只能声明组件、指令、管道 |
imports | 声明该模块所依赖的模块 |
prividers | 声明模块中提供的服务 |
bootstrap | 模块的主组件是什么 |
Angular系列一:Angular程序架构的更多相关文章
- Angular简介与程序架构
什么是angularJs 基于javascript开发的客户端应用框架,使我们可以更加快捷,简单的开发web应用. 诞生于2009年,后来被google收购,用在了很多项目中. 适用于CRUD应用或者 ...
- 转: GUI应用程序架构的十年变迁:MVC,MVP,MVVM,Unidirectional,Clean
十年前,Martin Fowler撰写了 GUI Architectures 一文,至今被奉为经典.本文所谈的所谓架构二字,核心即是对于对于富客户端的 代码组织/职责划分 .纵览这十年内的架构模式变迁 ...
- GUI应用程序架构的十年变迁:MVC,MVP,MVVM,Unidirectional,Clean
十年前,Martin Fowler撰写了 GUI Architectures 一文,至今被奉为经典.本文所谈的所谓架构二字,核心即是对于对于富客户端的 代码组织/职责划分 .纵览这十年内的架构模式变迁 ...
- Android 程序架构: MVC、MVP、MVVM、Unidirectional、Clean...
摘选自:GUI 应用程序架构的十年变迁:MVC.MVP.MVVM.Unidirectional.Cleanhttps://zhuanlan.zhihu.com/p/26799645 MV* in An ...
- 用 MVC 5 的 EF6 Code First 入门 系列:MVC程序中实体框架的Code First迁移和部署
用 MVC 5 的 EF6 Code First 入门 系列:MVC程序中实体框架的Code First迁移和部署 这是微软官方SignalR 2.0教程Getting Started with En ...
- MySQL系列:高可用架构之MHA
前言 从11年毕业到现在,工作也好些年头,入坑mysql也有近四年的时间,也捣鼓过像mongodb.redis.cassandra.neo4j等Nosql数据库.其实一直想写博客分享下工作上的零零碎碎 ...
- 转:攻击JavaWeb应用[6]-程序架构与代码审计
转:http://static.hx99.net/static/drops/tips-429.html 攻击JavaWeb应用[6]-程序架构与代码审计 园长 · 2013/08/12 16:53 注 ...
- 【转】24Cxx 系列EEPROM通用程序及应用
关于I2C 学习的时候介绍得最多的就是24C02 这里存储EEPROM了,但学的时候基本只是讲讲简单的I2C 的总线数据传输而已,即使先gooogle上搜索也绝大部分这这样的文章,很少有说到如何在实际 ...
- fir.im Weekly - iOS/Android 应用程序架构解析
假如问你一个iOS or Android app的架构,你会从哪些方面来说呢? 本期 fir.im Weekly 收集了关于 iOS/Android 开发资源,也加入了一些关于 Web 前端方面的分 ...
随机推荐
- PAT Advanced 1059 Prime Factors (25) [素数表的建⽴]
题目 Given any positive integer N, you are supposed to find all of its prime factors, and write them i ...
- 通过OAuth2.0 获取授权访问SF 用户数据
站长资讯: 创建应用程序 新建应用程序 访问示例(Python+django) 环境准备: index.html 两种方式: 方式一:采用由用户授权,调用者无需知道SF的用户名与密码 方式二:直接 ...
- 纯手撸web框架
纯手撸web框架 一.Web应用的组成 接下来我们学习的目的是为了开发一个Web应用程序,而Web应用程序是基于B/S架构的,其中B指的是浏览器,负责向S端发送请求信息,而S端会根据接收到的请求信息返 ...
- D. Coloring Edges
You are given a directed graph with
- Java之关键字abstract(抽象类与抽象方法)
/* * abstract关键字的使用 * 1.abstract:抽象的 * 2.abstract可以用来修饰的结构:类.方法 * * 3. abstract修饰类:抽象类 * > 此类不能实例 ...
- 1051: [HAOI2006]受欢迎的牛 (tarjan强连通分量+缩点)
题目大意:CodeVs2822的简单版本 传送门 $Tarjan$强连通分量+缩点,若连通块的个数等于一则输出n:若缩点后图中出度为0的点个数为1,输出对应连通块内的点数:否则输出0: 代码中注释部分 ...
- EternalBlue永恒之蓝漏洞复现
EternalBlue漏洞复现 1. 实训目的 永恒之蓝(EternalBlue)是由美国国家安全局开发的漏洞利用程序,对应微软漏洞编号ms17-010.该漏洞利用工具由一个名为”影子经济人”( ...
- 字符串常用方法总结与StringBuffer基础
字符串 基本特性 final:字符串被修饰为final,是不能被继承的. immutable:字符串是不可改变的,例如创建了一个字符串对象,就不可改变它,即不能进行增删查改其中的字符.一旦创建好这个字 ...
- Maven配置阿里云问题
现在我们经常会与Maven打交道,无论是工作还是自己的练笔,因为它真的是太强大了.它可以帮助我们管理版本,jar包等等. 但是由于国内的环境问题,我们需要有一个仓库,有些公司会自己搭建私服,那对个人来 ...
- C# 元组
Tuple<,); Console.WriteLine(t.Item1); Console.WriteLine(t.Item2); C#7 可以使用圆括号声明一个元组: (); Console. ...