文档章节

angular2 学习一 小结

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

小结

如果你了解一点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
徐汇
程序员
私信 提问
《AngularJS学习整理》系列分享专栏

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

开元中国2015
11/09
0
0
【前端】Angular组件钩子

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m18633778874/article/details/82259409 Angular中的钩子方法,是非常常用的知识点,也在项目代码运用中有所体...

冯浩月
08/31
0
0
[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen
05/21
0
0
AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/miniboo...

liaolzy2
2015/05/31
0
0
【Angular】之Angular环境搭建

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

m18633778874
05/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

想买的书

Java并发编程之美

miaojiangmin
23分钟前
4
0
Linux(centos7)共享文件

安装samba samba安装 关闭防火墙和selinux firewalld /etc/selinux/config SELINUX=enforcing改为SELINUX=disabled yum install -y samba samba-client systemctl start smb smbpasswd -a 用......

qinjiudong
24分钟前
3
0
SparkLauncher执行spark程序一直阻塞卡在running-undefined的情况处理

使用SparkLauncher提交spark程序时,有时间会一直卡在status是running状态 finalstatus为undefined,这种情况是因为使用的java的ProcessBuilder,查阅了资料后发现可能是因为buffer被填满,导...

那年的暖风
28分钟前
3
0
php中echo(),print(),print_r(),var_dump()与var_export()间的区别

echo()函数:输出一个或多个字符串。 输出所有参数。不会换行。 echo 不是一个函数(它是一个语言结构), 因此你不一定要使用小括号来指明参数,单引号,双引号都可以。 echo (不像其他语言...

hansonwong
28分钟前
1
0
php 生成 桌面快捷链接

<?php $Shortcut = "[InternetShortcut] URL=http://IP地址或网址IDList= [{000214A0-0000-0000-C000-000000000046}] Prop3=19,2 "; Header("Content-type: application......

zxcgzq
29分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部