Angular2入门(四)
2015-12-10 16:31
796 查看
初步小结
如果你了解一点Angular1.x的bootstrap,可能隐约会感受到Angular2中bootstrap的一些 变化 - 我指的并非代码形式上的变化。以组件为核心
在Angular1.x中,bootstrap是围绕DOM元素展开的,无论你使用ng-app还是手动执行bootstrap() 函数,自举过程是建立在DOM之上的。
而在Angular2中,bootstrap是围绕组件开始的,你定义一个组件,然后启动它。如果没有一个组件, 你甚至都没有办法使用Angular2!
支持多种渲染引擎
以组件而非DOM为核心,意味着Angular2在内核隔离了对DOM的依赖 - DOM仅仅作为一种可选的渲染引擎存在:
上面的图中,DOM Render已经实现,Server Render正在测试,iOS Render和Android Render 是可预料的特性,虽然我们看不到时间表。
这有点像React了。
例如:
<!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>
相关文章推荐
- 跟我学Angular2(1-初体验)
- Angular2入门(三)
- AngularJS之备忘与诀窍
- Angular2入门(二)
- 【js类库AngularJs】学习angularJs的指令(包括常见表单验证,隐藏等功能)
- 详解AngularJS中module模块的导入导出
- Angular2入门(一)
- AngularJS中module的导入导出
- AngularJS 配置和运行phonecat错误
- AngularJs实现ng1.3+表单验证
- 理解AngularJs指令
- AngularJS的工作机制
- 详解AngularJS实现表单验证
- 解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
- 解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
- 详解AngularJS实现表单验证
- 理解AngularJs指令
- AngularJs实现ng1.3+表单验证
- 详解AngularJS中module模块的导入导出
- 学习 AngularJS (六) scope 续