对于目前主流的前端框架,当属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@R_403_447@。
配置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了。