zoukankan      html  css  js  c++  java
  • 跟我学Angular2(1-初体验)

    0、导言

    Angular1作为最流行的前端MV*框架,给前端开发带来了极大的便利性。但是,仍然有许多不好的地方已经很难再改变了。Angular团队根据WEB发展的趋势和Angular1中积累的经验来开发了一个全新的Angular,也就是Angular2。

    1、优势

    Angular2做了很激进的变化,带来的成果也是显而易见的。

    1. 极大的提高了性能
    2. 更强大的模块化
    3. 改进的依赖注入
    4. 对Web Component友好
    5. 原生移动支持 - iOS 和 Android
    6. 服务端渲染,搜索引擎优化

    2、工具链

    由于Angular2面向未来,使用了太多还不被当前主流浏览器支持的技术,跑起来还真不是一个容易的事情,所以我们需要一个工具链:

    systemjs - 通用模块加载器,支持AMD、CommonJS、ES6等各种格式的JS模块加载

    es6-module-loader - ES6模块加载器,systemjs会自动加载这个模块

    traceur - ES6转码器,将ES6代码转换为当前浏览器支持的ES5代码。systemjs会自动加载 这个模块。

    3、Angular2 Hello world

    Step1、下载angular2

    https://angular.io/是angular2的官网,我们需要通过npm进行下载angular2: npm install angular2 https://www.npmjs.com/package/angular2

    Step2、引入angular2

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title></title>
      <script src="../node_modules/angular2/bundles/angular2.sfx.dev.js"></script>
    </head>
    
    <body>
    </body>
    
    </html>
    

    Step3、 Hello angular

    <body>
      <app></app>
      <script>
      var App = ng.Component({
        selector: 'app',
        template: '<h1>Hello {{name}}.</h1>'
      }).Class({
        constructor: function() {
          this.name = 'Angular2';
        }
      });
      ng.bootstrap(App);
      </script>
    </body>
    
  • 相关阅读:
    java io 学习笔记(一)
    Centos中查看系统信息的常用命令
    arcgis影像批量裁剪代码
    VS2010中VC++目录和C/C++之间的区别。VC++ Directories和C/C++的区别。
    VS中为什么不同的项目类型属性查看和设置的界面不一样
    C++函数中返回引用和返回值的区别
    java中HashMap的keySet()和values()
    repoquery详解——linux查看包依赖关系的神器
    linux学习笔记
    log4j的AppenderLayout格式符
  • 原文地址:https://www.cnblogs.com/humin/p/5036394.html
Copyright © 2011-2022 走看看