zoukankan      html  css  js  c++  java
  • Angular2入门(四)

    初步小结

    如果你了解一点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了。

    例如:

     1 <!doctype html>
     2 <html>
     3 <head>
     4     <meta charset="utf-8">
     5     <title>hello,angular2</title>
     6     <!--模块加载器-->
     7     <script type="text/javascript" src="lib/system@0.16.11.js"></script>
     8     <!--Angular2模块库-->
     9     <script type="text/javascript" src="lib/angular2.dev.js"></script>
    10     <script>
    11         //设置模块加载规则
    12         System.baseURL = document.baseURI;
    13         System.config({
    14             map:{traceur:"lib/traceur"},
    15             traceurOptions: {annotations: true}
    16         });
    17     </script>        
    18 </head>
    19 <body>
    20     <!--组件渲染锚点-->
    21     <my-app></my-app>
    22     
    23     <!--定义一个ES6脚本元素-->
    24     <script type="module">
    25         //从模块库引入三个类型定义
    26         import {Component,View,bootstrap} from "angular2/angular2";
    27         
    28         //组件定义
    29         @Component({selector:"my-app"})
    30         @View({template:"<h1>Angular2 - 以组件为基石</h1>"})
    31         class EzApp{}       
    32                 
    33         //渲染组件
    34         bootstrap(EzApp);
    35     </script>
    36 </body>
    37 </html>
  • 相关阅读:
    top-adx-apps
    mac 打印机无法打印
    doubleclick-video-skipable
    微信小程序-基础学习
    uniapp-学习总结1
    react-1
    mysql-1
    jenkins-1
    后台管理系统-1
    微信小程序-父子组件通信
  • 原文地址:https://www.cnblogs.com/gett/p/5036487.html
Copyright © 2011-2022 走看看