码疯窝

AngularJS 2.0 使用初体验

2016/04/15 09:36:37    分类: 技术随笔    0人评论 次浏览

AngularJS官方推出2.0,是超越了AngularJS 1.x版本的一次革新。但是现在还是beta版本,抽了点时间体验了一下,对比AngularJS 1.3.x的异同给出自己的一些体验感受。以下简称ng1和ng2。

1. Typescript
ng2 使用Typescript,积极迎合新的技术标准同时类Java的强类型语言特性更容易构建WEB大型应用,就我个人来说,是比较喜欢Javascript的灵活的弱类型与对象原型链,不太喜欢强类型与类。如果打个比方说写Javascript好像写优雅的散文。那么写Typescript就好比在写严谨的论文。仁者见仁智者见智,但无论是使用Javascript也好,Typescript也好,AngularJS所要表达的中心思想还是一样的。

2. 数据绑定
ng1 使用的脏数据检查实现数据的双向绑定,初学者不踩几个坑是很难去理解它的执行流程的,同时也常常被人从它的效率与开销上说事,反观Ember,以复杂的数据类型去实现双向绑定。虽然说解决了解决脏数据检查的效率问题,却也使得没法用原生的数据类型进行绑定。
ng2 因为Object.observe还不成熟,所以目前应该是使用Zones.js来替代脏数据检查。在未来应该是会使用 O.o() 来进行数据绑定的,这样即避免了脏数据检查,同时也可以使用原生的数型类型。

zone.fork().run(function () {
  zone.inTheZone = true;
  setTimeout(function () {
    console.log('in the zone: ' + !!zone.inTheZone);
  }, 0);
});
console.log('in the zone: ' + !!zone.inTheZone);
//'in the zone: false'
//'in the zone: true'

3. Module
ng1 中的 module 是一个我特别想要吐槽的点,这里的 module 似乎起着一个 namespace 的作用,但是各个 module 却没有独立的生命周期和作用域,使得 module 显得十分鸡肋,似乎功能只存在于名义上的区分与约束,感觉没有实际用处。与其如此,我还不如从命名规范或者目录结构方面去实现他的 namespace 功能。

angular.module('webapp', ['ui.router', 
    'webapp.page1',
    'webapp.page2'
]);

ng2 中终于去除了原有的 module,直接用es6的 import 和 class 代替,这里的 module 才是真正意义上的功能模块,同时还考虑了动态加载的需求。

import {Component} from 'angular2/core';
import {OnInit} from 'angular2/core';
import {Router} from 'angular2/router';

4. 依赖注入
ng1 的核心特性就是它的依赖注入吧,将复杂的问题概念化, 然后生成具体的对象,再通过依赖注入组装进逻辑,组件隔离,代码解藕。但同时也存在一些小的问题,因为依赖于变量名的检测,所以代码压缩会破坏依赖注入。

// 注入$scope和$http
angular.module('webapp.page1')
.controller('IndexCtrl', function($scope, $http) {
    // Do something
});

ng2 中因为使用 TypeScript,可以使用类似于 Java 注解去取代原有的依赖注入功能。


@Component({
    selector: 'my-page1',
    templateUrl: 'app/page1/index.html',
    styleUrls: ['app/page1/index.css'],
    providers: [SomeService]
})
export class ListComponent implements OnInit {
    constructor(private _service: SomeService, private _router: Router) { 
    }
    ngOnInit() {
        // Do something
    }
}

5. Controller 和 Scope
ng1 中 controller 负责业务逻辑,scope 负责数据,但是对于初学者来说,是很难梳理出来scope, rootScope, parentScope, directive scope的层级关系的。
ng2 中因为Web Components的特性,所以就不存在有controller和scope了,因为一个component就包含了controller和scope。

6. jQuery
ng1 内置 jqLite,大部分初学者没办法从 jQuery 的 DOM 操作的思想转变为数据绑定的思想,以至于各种 AngularJS 和 jQuery 的混合体破坏框架原本的优势。
ng2 摒弃了 jqLite,鼓励以 AngularJS 的思想去解决问题。

7. 其它
像其它模板语法,路由,Directive等相对于 ng1 都是存在些许变化,但大体一致。其它差异可能需要继续深入探索。

整体感觉ng2的这次一革新的确是解决了一些ng1留下的痛点,更进一步的促进了Web应用的大型化。用惯了ng1反到对ng2感觉不太适应,似乎更适合那些做 Java 的人向前端转型。现在还处于beta版本,希望早日发布正式版本并且期待更多更好的改变。

以上代码片段出自我写的一个ng2的CRUD demo中
https://github.com/Gcaufy/angularjs2-demo

最后,因为水平有限,大家凑合着看,同时也欢迎各路大神评论指正。

继续查看有关 技术随笔的文章

0个访客评论