Angular2入门--架构总览

前端之家收集整理的这篇文章主要介绍了Angular2入门--架构总览前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

大致介绍

在3月23日,Angular4正式发布(没有3)。似乎现在学Angular2又晚了,又晚一步-_-||。Angular2在Angular1的基础上有了较大的改变。之前向一个同学(之前学过Angular1)问一个Angular2的问题,他反问到这是Angular代码? 可见Angular1->Angular2的变化有多大。先来看看Angular2的架构

核心模块

一个完整的Angular应用主要由六个重要部分组成:

组件、模板、指令、服务、依赖注入和路由

他们之间的关系:

从图中可以看出:

1、与用户交互的是模板视图,模板和组件类共同组成组件

2、路由是控制组件的创建和销毁,从而驱使界面切换

3、指令和模板相关联,扩展了模板的语法

4、服务是封装若干个功能逻辑的单元,通过依赖注入引入组件内部

组件

Angular框架是基于组件设计,组件负责控制屏幕上的一小块区域,例如网页的导航栏就是一个组件

一个组件的代码

{{hero.name}} details!
{{hero.id}}
}) export class HeroDetailComponent { @Input() hero: Hero; }

模板

我们通过组件的自带的模板来定义组件视图。模板以 HTML 形式存在,告诉 Angular 如何渲染组件。

例如上面组件中的@Component中就是模板

{{hero.name}} details!
{{hero.id}}
})

指令

指令和模板的关系密切,指令可以与DOM进行灵活交互,可以改变样式也可以修改DOM。一般的指令都作用在已有的DOM元素上

1、修改DOM

猜你在找的JavaScript相关文章