Angular2 学习系列课程（版本分析+快速上手）

本文链接：https://blog.csdn.net/jiangbo_phd/article/details/51777478

这里写图片描述

对于目前主流的前端框架，当属React和Angular, 这两个框架各有优缺点，选择的同事也着实令开发者头疼。

很多人都搞不懂，为什么Google会对Angular2做如此大的改变，可以称得上是一个全新的框架，其实我们可以从以下几点做一个分析：

性能的不足：对于用过1.x版本开发者都知道，虽然Angular提供了很多的方便，可以自定义多个directive, 进行代码复用，这些都是优点，可以向ng-repeat等有些组件的性能，也着实令人头疼，由于最初的架构设计，比如数据绑定，模板，可以说性能的提升存在很大的短板，无法做出更大的优化。
组件化开发：在2016年兴起了组件化开发的一股浪潮，大红大紫的当属React莫属了，在配合ES6的兴起，给开发者带来的好处和效率还和很多了，而且在开发模式上来讲，组件化开发也是势在必行，可是angular1.x版本对这方面的支持并不是特别完美（当然也是支持的）。
上手复杂度: 个人认为angular 1.x版本的学习还是可以的，但是相比其他框架而言复杂度颇高了一些（VUE.js), angular 团队希望在第二个版本中封装的更好，暴露出更易用的接口。

相信很多人都看过官方的教程，想必都发现了一个问题：就是想轻易的运行起来angular 2的demo项目并没有那么容易，因为Angular 2的Syntax 采用了最新的ES6标准，而这个标准并没有被广大的浏览器所支持，我们仍需要在运行时，对ES6语法进行转化，使用最多的转化库，当属babel了，

Angular 2支持了多中语法规则，包括TypeScript(这是一个微软发起的javascript语法库，支持面向对象变成)， dart， JavaScript(ES6标准)，对于angular团队比较推荐我们使用TypeScript语法，因为TypeScript不需要做任何额外的转化工作，因为在这个框架内默认做了支持，但我个人还是喜欢ES6的语法，所以下面带大家简单运行一个Angular 2demo小程序。

配置package.json，安装所需要的依赖库：

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.13",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0"
  }
}

上面我们引入的es6-shim 是一个ES6兼容库， lite-server是一个简单的服务框架，方便我们创建临时的测试服务器。

创建index.html:

<html>
<head>
    <title>Angular 2 QuickStart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
    <!-- IE required polyfill -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
    <script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>
    <!-- 2. Load our 'modules' -->
    <script src='app/app.component.js'></script>
    <script src='app/main.js'></script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>

导入相关类库，my-app就是我们即将要创建的组件。

创建main.js

(function(app) {
    document.addEventListener('DOMContentLoaded', function() {
        ng.platform.browser.bootstrap(app.AppComponent);
    });
})(window.app || (window.app = {}));

用bootstrap启动我们创建的组件。

创建app.component.js

(function(app) {
    app.AppComponent =
        ng.core.Component({
                selector: 'my-app',
                template: '<h1>My First Angular 2 App</h1>'
            })
            .Class({
                constructor: function() {}
            });
})(window.app || (window.app = {}));