tiny-ng

实验性质的个人项目, 实现一个MV*核心, 语法上几乎完全仿照angular, 完成进展:

• [x] angular短语表达式语言解释器
• [x] 单向数据流的脏检查系统
• [x] 基于AST常量折叠分析的数据绑定优化
• [x] 双向绑定
• [x] 依赖注入
• [x] 模块系统
• [x] 组件系统
• [x] 基于myers算法的列表diff
• [x] 结构型指令支持
• [x] 属性型指令支持
• [ ] 异步事件支持
• [ ] 完善测试用例
• [ ] 生命周期hook

demo

因为现在还不支持路由功能, 生命周期hook与异步相关的处理, 代码做了一些修改, 请在最新版本的chrome下打开:

1. todomvc
2. tour of hero(基于angular官方示例)

反馈

作者QQ: [email protected] 您有任何意见和建议, 可以给我issue, 或者直接联系我, 您宝贵的意见将帮助我完善这个不成熟的项目.

示例代码(来自上面的demo)

import { Component }    from 'tiny-ng';
import { Hero }         from './hero';
import { HeroService }  from './services/hero.service';
import { PageService }  from './services/page.service';

@Component({
  selector: 'hero-detail',
  template: `
    <div *ng-if="hero">
      <h2>{{ hero.name }} details!</h2>
      <div>
        <label>id: </label>{{ hero.id }}</div>
      <div>
        <label>name: </label>
        <input [(ng-model)]="hero.name" placeholder="name" />
      </div>
      <button (click)="pageService.jump()">Back</button>
    </div>
  `
})
export class HeroDetailComponent {
  hero: Hero | undefined;

  constructor(
    private heroService: HeroService,
    private pageService: PageService
  ) {
    this.hero = heroService.getHero(pageService.heroId);
  }
}

import { Component }   from 'tiny-ng';
import { Hero }        from './hero';
import { HeroService } from './services/hero.service';
import { PageService } from './services/page.service';

@Component({
  selector: 'heroes',
  template: `
    <h2>My Heroes</h2>
    <ul class="heroes">
      <li *ng-for="let hero of heroes"
        [ng-class]="{ selected: hero === selectedHero }"
        (click)="onSelect(hero)">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
      </li>
    </ul>

    <div *ng-if="selectedHero">
      <h2>
        {{ selectedHero.name }} is my hero
      </h2>
      <button (click)="pageService.jumpHeroDetail(selectedHero.id)">View Details</button>
    </div>
  `
})
export class HeroesComponent {
  heroes: Hero[];
  selectedHero: Hero;

  constructor(
    private heroService: HeroService,
    private pageService: PageService
   ){
    this.ngOnInit();
  }

  getHeroes(): void {
    this.heroes = this.heroService.getHeroes();
  }

  ngOnInit(): void {
    this.getHeroes();
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }
}