[笔记] TypeScript不在的那几天:Angular 2与JavaScript一起的日子

前端之家收集整理的这篇文章主要介绍了[笔记] TypeScript不在的那几天:Angular 2与JavaScript一起的日子前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

TypeScript不在的那几天:Angular 2与JavaScript一起的日子,是否基情满满呢。

这几天,项目上在思考将一批App从纯jQuery转化到Angular。

个人还是偏向使用纯jQuery,Angular毕竟封装的东西太多,会导致不可控因素太多。

虽然以前写过Angular 1.x,也一直觉得Angular开发起来比较快很适合做prototype,但一直映像里就是笨重的东西。

对于Angular 2,看了看几个文件,没有压缩前的代码有5MB!越来越笨重!再加上Rx框架,惨不忍睹。

不过,还好压缩后600KB,但这么大的体积,真的不适合轻量级web app。

再准备偿个鲜,结果发现官方文档的例子都是TypeScript写的,JS那边的文档就仅限于CheatSheet了。

前端这变来变去,今天来个微软的试验品TypeScript,明天又是Google的试验品AtScript和Dart,偶尔当当小白鼠就这样吧。

不过根据Angular 1.x的经验,说到从jQuery直接转化到Angular,第一步,只要给element加个Controller其他都调用原有的jQuery就可以了嘛,然后再一步一步转化。

结果是Controller在Angular 2已经被干掉了。

对于快速Spike,用TypeScript当然没啥,不过写ts文件又是一个3MB的TypeScript解析器要引用。

算了算了,还是放逐下TypeScript,快速给出demo还是直接用JavaScript吧。

顺带理解一下Angular 2的构造和TypeScript到JavaScript的编译过程。

那就到网上搜一搜,其实教程蛮多的,这是比较好的一篇:http://blog.thoughtram.io/angular/2015/07/06/even-better-es5-code-for-angular-2.html

有了TypeScript到JavaScript的大概知识,就开始写代码吧(jsdille上运行结果如下):

Angular 2 Without TypeScript

这里就实现一个文本框输入css颜色值,输入的时候对应的div颜色就会改变。

其中包括了:1 一个Directive包含另一个Directive;2 通过Attribute传递数据到Directive里;3 Directive使用一个外部Service。

整理出来就特别简单了,中间还是不少坑的,结合Angular Cheat Sheet:https://angular.io/docs/js/latest/cheatsheet.html。

简单总结就是:

1 一个Directive包含另一个Directive,这没有什么难点,直接在template里写就好。

2 通过Attribute传递数据到Directive里的要点就是申明ng.core.Component的时候的inputs选项,填好就可以用this访问了。

3 Directive使用一个外部Service,和Angular 1.x很像,用一个array在constructor那里注入吧,注入后就可以很开心的使用了。至于更高级的功能,比如实现Angular 1.x里的compile功能,其实也不难,直接看Angular 2的源代码(比如看个简单的:https://github.com/angular/angular/blob/master/modules/angular2/src/common/directives/ng_if.ts;在ngIf构造函数里注入了ViewContainerRef和TemplateRef,那照葫芦画瓢,在contructor写个[ng.core.ViewContainerRef,ng.core.TemplateRef,function (_view,_template) {...}];然后它set ngIf就是ngIf变了就运行createEmbeddedView或者clear,这动态compile就可以出来了。至于更复杂的,大家看看ngFor等的吧。反正连ElementRef都可以有,直接操作DOM还是不难的。)当然,除了intputs选项,还有outputs选项,是为(xxx)用的。

后面还是要开始老老实实写TypeScript吧,不过demo使用JavaScript轻松快捷,也小小了解了一下Angular 2的结构。

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
  <script src="https://npmcdn.com/angular2@2.0.0-beta.12/es6/dev/src/testing/shims_for_IE.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.12/angular2-polyfills.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.12/Rx.umd.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.12/angular2-all.umd.dev.js"></script>
  <script>
    (function(app) {

      function OutsideService() {}
      OutsideService.prototype = {
        say: function(word) {
          return word;
        }
      };

      var shared = {
        value: 'additional parameter',color: 'yellow'
      };

      app.NestComponent =
        ng.core.Component({
          providers: [ng.core.ElementRef],selector: '[nestComponent]',inputs: ['nestComponent','additionalParameter'],template: '<div>{{color}} - {{additionalParameter.value}}</div>' +
            '<select><option *ngFor="#item of items" [value]="item.id">{{item.value}}</option></select>'
        })
        .Class({
          constructor: [ng.core.ElementRef,function(ref) {
            this.data = shared;
            this.ref = ref;
            this.color = null;
            this.items = [{
              value: 'banana',id: 1
            },{
              value: 'apple',id: 2
            },{
              value: 'pear',id: 3
            }];

            // watch on nestComponent value e.g. <div [nestComponent]="data.color"></div>
            Object.defineProperty(this,'nestComponent',{
              set: function(val) {
                this.color = val;
                this.ref.nativeElement.style.backgroundColor = val;
              }
            });
            this.ref.nativeElement.style.backgroundColor = "yellow";
          }]
        });

      app.AppComponent =
        ng.core.Component({
          selector: 'mainApp',template: '<div>{{label}} <input [(ngModel)]="data.color" /></div>' +
            '<div [nestComponent]="data.color" [additionalParameter]="data">Loading...</div>',directives: [app.NestComponent],providers: [OutsideService]
        })
        .Class({
          constructor: [OutsideService,function(service) {
            this.data = shared;
            this.label = service.say("Color:");
          }]
        });

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

    })(window.app || (window.app = {}));

  </script>
  <mainApp>Loading...</mainApp>
</body>
原文链接:https://www.f2er.com/angularjs/149774.html

猜你在找的Angularjs相关文章