文档章节

angular2 学习一 小结

王福林
 王福林
发布于 2016/12/01 10:45
字数 371
阅读 58
收藏 0

精选30+云产品,助力企业轻松上云!>>>

小结

如果你了解一点Angular1.x的bootstrap,可能隐约会感受到Angular2中bootstrap的一些 变化 - 我指的并非代码形式上的变化。

以组件为核心

在Angular1.x中,bootstrap是围绕DOM元素展开的,无论你使用ng-app还是手动执行bootstrap()函数,自举过程是建立在DOM之上的。

而在Angular2中,bootstrap是围绕组件开始的,你定义一个组件,然后启动它。如果没有一个组件, 你甚至都没有办法使用Angular2!

支持多种渲染引擎

组件而非DOM为核心,意味着Angular2在内核隔离了对DOM的依赖 - DOM仅仅作为一种可选的渲染引擎存在:

render-arch

上面的图中,DOM Render已经实现,Server Render正在测试,iOS RenderAndroid Render 是可预料的特性,虽然我们看不到时间表。

这有点像React了。

HTML

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
    <title>hello,angular2</title>
    <!--模块加载器-->
    <script type="text/javascript" src="lib/system@0.16.11.js"></script>
    <!--Angular2模块库-->
    <script type="text/javascript" src="lib/angular2.dev.js"></script>
	<script>
    	//设置模块加载规则
    	System.baseURL = document.baseURI;
		System.config({
        	map:{traceur:"lib/traceur"},
			traceurOptions: {annotations: true}
		});
	</script>	    
</head>
<body>
	<!--组件渲染锚点-->
	<my-app></my-app>
    
    <!--定义一个ES6脚本元素-->
    <script type="module">
    	//从模块库引入三个类型定义
        import {Component,View,bootstrap} from "angular2/angular2";
        
        //组件定义
        @Component({selector:"my-app"})
        @View({template:"<h1>Angular2 - 以组件为基石</h1>"})
        class EzApp{}       
                
        //渲染组件
        bootstrap(EzApp);
    </script>
</body>
</html>

CSS

h1{background:black;color:white;display:inline-block}

 

王福林
粉丝 10
博文 94
码字总数 37444
作品 0
徐汇
程序员
私信 提问
加载中
请先登录后再评论。
Angular学习笔记--last_update 20151106

参考来源:http://www.angularjs.cn/tag/AngularJS?p=1&s=50 基本要求:一周搞定33篇学习文章 目标:develop/refactor lms系统angular基本用法 20151106 angular开发指南01~03 学习小结: an...

draem0507
2015/11/03
0
0
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
287
0
【Angular】之Angular环境搭建

前言 小编最近在学习angular的内容,万事开头难,完成了开头也便成功了一半。这句话小编在这次的学习实践之旅中,深有体会,下面小编就来讲一讲,angular环境搭建之旅吧! 一、环境搭建 1.下...

m18633778874
2018/05/08
0
0
【Angular4】架构对比

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Rsx/article/details/83030438 目前Angular的版本最新已经到Angular6了,但是学习4也是不会有任何影响的。Ang...

不专业得Cook-任晓帅
2018/10/12
0
0
AngularJS2.0 教程系列(一)

Why Angular2 Angular1.x显然非常成功,那么,为什么要剧烈地转向Angular2? 性能的限制 AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。随着时间的推移,各种特性 被加...

笔阁
2015/07/22
2.5W
1

没有更多内容

加载失败,请刷新页面

加载更多

Microsoft Edge Canary for Mac(edge浏览器) v86.0.570.0中文版

microsoftedge浏览器是一款作为windows操作系统的官方内置浏览器。Microsoft Edge官方版对比ie浏览器来说功能更好,而且它还集成Contana等新功能,交互界面更加简洁,还增加了对Firefox浏览器...

云不若
29分钟前
18
0
信息的哲学--从信息到数据存储,再到数据保护

信息的哲学--从信息到数据存储,再到数据保护 1 什么是信息 当今信息化时代,信息就是利润,数据就是企业的命根子。世界运行在数据之上。当代量子学的最新理论是:量子其实是一种信息,而不...

osc_taer599u
29分钟前
16
0
mysql 到期 即将到期

即将到期的设备数量: SELECT COUNT(id) FROM jtl_device WHERE DATE_FORMAT(expiration_time,'%Y-%m-%d')<=DATE_ADD(CURDATE(),INTERVAL 30 DAY) AND `company_id` = 1577945251258504 AND ......

简小姐
30分钟前
15
0
深入分析各种raid级别及其速度变化比较

本文从低层原理上,深入透析了目前存在的7种raid模式的组成原理,结构,并深刻分析了各种级别相对于单盘IO速率的变化。 Raid0 Raid0是这样一种模式:我们拿5块盘的raid0为例子。 上图中5个竖...

osc_22rhv8iu
30分钟前
9
0
论文阅读:“快把卷积神经网络中的平移不变性带回来” - 知乎

老规矩,文章以我自己的Blog的最新版为准。 论文阅读:“快把卷积神经网络中的平移不变性带回来” blog.tsingjyujing.com 简介 这篇博客主要是我读论文Making Convolutional Networks Shift...

osc_r9yyhhqz
32分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部