Angular2入门--架构总览


Posted in Javascript onMarch 29, 2017

大致介绍

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

核心模块

一个完整的Angular应用主要由六个重要部分组成:组件、模板、指令、服务、依赖注入和路由

他们之间的关系:

Angular2入门--架构总览

从图中可以看出:

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

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

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

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

组件

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

一个组件的代码:

import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
 selector: 'my-hero-detail',
 template: `
 <div *ngIf="hero">
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div>
  <label>name: </label>
  <input [(ngModel)]="hero.name" placeholder="name"/>
  </div>
 </div>
})
export class HeroDetailComponent {
 @Input()
 hero: Hero;
}

模板

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

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

@Component({
 selector: 'my-hero-detail',
 template: `
 <div *ngIf="hero">
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div>
  <label>name: </label>
  <input [(ngModel)]="hero.name" placeholder="name"/>
  </div>
 </div>
})

指令

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

1、修改DOM

<button *ngIf="canEdit">编辑</button>

当canEdit为true时,button会显示,否则,button隐藏

2、改变元素样式

<button [ngStyle]="setStyles()">编辑</button>

setStyles()是一个函数,可以通过这个函数修改元素的样式

服务

服务是封装单一功能的单元,常被引用于组件内部,作为组件的功能扩展。它可以是一个简单的字符串或是JSON数据,也可以是一个函数甚至是一个类

组件本身不从服务器获得数据、不进行验证输入,也不直接往控制台写日志。 它们把这些任务委托给服务。

一个简单的服务(包含一个类):

export class Hero {
 id: number;
 name: string;
}

依赖注入

通过依赖注入机制,服务等模块可以被引入到任何一个组件中,而开发者无需关心这些模块是如何被初始化的。因为Angular已经帮你处理好了,包括本模块本身依赖的其他模块也会被初始化

路由

路由它把浏览器中的URL看做一个操作指南, 据此导航到一个由客户端生成的视图,并可以把参数传给支撑视图的相应组件,帮它决定具体该展现哪些内容。 我们可以为页面中的链接绑定一个路由,这样,当用户点击链接时,就会导航到应用中相应的视图。 当用户点击按钮、从下拉框中选取,或响应来自任何地方的事件时,我们也可以在代码控制下进行导航。 路由器还在浏览器的历史日志中记录下这些活动,这样浏览器的前进和后退按钮也能照常工作。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js 提交和设置表单的值
Dec 19 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 Javascript
js阻止移动端页面滚动的两种方法
Jan 25 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
用VsCode编辑TypeScript的实现方法
May 07 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 #Javascript
AngularJS中$http的交互问题
Mar 29 #Javascript
Angular2开发——组件规划篇
Mar 28 #Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 #jQuery
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 #jQuery
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 #Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 #Javascript
You might like
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
php 获取本机外网/公网IP的代码
2010/05/09 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
Python内建数据结构详解
2016/02/03 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
python selenium xpath定位操作
2020/09/01 Python
python实现AdaBoost算法的示例
2020/10/03 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
平民服装店创业计划书
2014/01/17 职场文书
安全生产承诺书
2014/03/26 职场文书
经营理念口号
2014/06/21 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
实习科室评语
2015/01/04 职场文书
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python