跟我学Angular2（1-初体验）

最新推荐文章于 2024-07-20 10:36:53 发布

diaochou1143

最新推荐文章于 2024-07-20 10:36:53 发布

阅读量69

点赞数

文章标签： javascript 前端移动开发 ViewUI

原文链接：http://www.cnblogs.com/humin/p/5036394.html

版权

0、导言

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

1、优势

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

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

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>

转载于:https://www.cnblogs.com/humin/p/5036394.html

diaochou1143

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跟我学Angular2（1-初体验）

0、导言Angular1作为最流行的前端MV*框架，给前端开发带来了极大的便利性。但是，仍然有许多不好的地方已经很难再改变了。Angular团队根据WEB发展的趋势和Angular1中积累的经验来开发了一个全新的Angular，也就是Angular2。1、优势Angular2做了很激进的变化，带来的成果也是显而易见的。极大的提高了性能更强大的模块化改进的依赖注...
复制链接

扫一扫