ng-movie

写了个在线demo

http://embed.plnkr.co/veU7rSv...

核心代码：

@Component({
  selector: 'my-app',
  template: `
  <p class="side-left" *ngIf="isHideContainer">
      <p>
        <header>
          <h1>ng-movie</h1>
          <h4 (click)="hideSidebar()">点击此处隐藏container</h4>
        </header>
      </p>
    </p>
    `
})
export class AppComponent { 
  isHideContainer: bollean = true; // 准备用于控制 container 显示与否，通过 *ngIf
  hideSidebar() {
    this.isHideContainer = false;
  }
}

两个问题，其实都是在说一个问题 组件。

在Angular应用中是以组件树来组织的，每一个组件都是非常内聚、单一、可测试的。但凡有软件工程的经验，这三点是非常重要的。

而这三点最核心的是数据流向问题，为什么组件之间的通信是依赖于入、出就是出于这一点。

其次，如果你了解Web Components你就会知道 <side-bar> 所代表远比 <p> 更有含义，或许你可以再了解点Shadow DOM，标签的意义简直就是逆天。