tiny-ng
TypeScript icon, indicating that this package has built-in type declarations

0.0.4-alpha • Public • Published

tiny-ng

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

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

demo

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

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

反馈

作者QQ: 120000456@qq.com 您有任何意见和建议, 可以给我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;
  }
}
 

Readme

Keywords

Package Sidebar

Install

npm i tiny-ng

Weekly Downloads

2

Version

0.0.4-alpha

License

MIT

Unpacked Size

448 kB

Total Files

209

Last publish

Collaborators

  • mr_haili