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

对于目前主流的前端框架，当属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 = {}));

我们用ng.core.Component常见一个组件，其中selector就是我们要写到html中的element.

总结：

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

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

相关文章