Angular

SPA Apps with Angular.

Why to Use AngularJS?

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Learning Angular

Core Conceptions

  • One-Way Data-Binding
  • Two-Way Data-Binding
  • $watch and Digest Loop
  • AOT Compiling
  • Dependency injection / injector
  • Avoid directly manipulate DOM
  • decorators
  • self-describing components

研究

最有意思的部分:

  • @metaDataDecorator(DI / imports / exports …)元数据 Binding。模块化的思想做到机制。万物皆模块。
  • Typescript in all. 强类型系统书写,系统化的研发质量还是觉得有必要的。
  • Rx.js as data manipulator. 响应式的数据流。
  • JIT & AOT Compile。实时和静态编译 App 体系的技术。
  • Decorator 体系使用得出神入化,类方法中各种 @Input @Output 的装饰器。
  • NgModules / Components / Services / Directives 概念和解决方案构成复合的 Angular 体系。

Angular Directives

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS’s HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.

AngularModules

  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { FormsModule } from '@angular/forms';
  4. import { AppComponent } from './app.component';
  5. import { HeroesComponent } from './heroes/heroes.component';
  6. import { HeroDetailComponent } from './hero-detail/hero-detail.component';
  7. import { HeroService } from './hero.service';
  8. import { MessageService } from './message.service';
  9. import { MessagesComponent } from './messages/messages.component';
  10. @NgModule({
  11. declarations: [
  12. AppComponent,
  13. HeroesComponent,
  14. HeroDetailComponent,
  15. MessagesComponent
  16. ],
  17. imports: [
  18. BrowserModule,
  19. FormsModule
  20. ],
  21. providers: [
  22. HeroService,
  23. MessageService
  24. ],
  25. bootstrap: [ AppComponent ]
  26. })
  27. export class AppModule { }

Ref