ng2

  • typescript
  • angular

typescript是js的拓展,本质上在浏览器中运行的还是javascript,且编译完成后的js版本是es5,所以不存在兼容性问题。主要添加的概念大致有接口(interface)类(class)继承(extends)箭头函数,将js包装得更像其他的后端语言的功能,这些类似于es6中的概念。ts中可以包含js代码,这部分代码不会被编译。ts中含有类型检查,也就是说可以为变量定制类型。接口可以作为定制类型(相当于面向对象中的实例化接口?)。

官网教程:
示例使用了typescript,js的一个超集。angular 使用typescript让程序员使用工具提高开发效率,你也可以使用js来写angular

注意:vue与react中模板最外层需要一个标签将组件整体包起来,ng2则不需要,可以利用es6中的模板字符串提高模板的可读性(主要是换行,保持代码缩进规范)

单向绑定

单向数据绑定的典型:{{}}插值
还可以为组件或者dom元素绑定属性或者事件

双向绑定

ng中的数据双向绑定由ngModel指令实现,需要从@angular/forms中导入FormsModule模块,从而使用其中的ngModel。

修饰器(decoration)

一般以@开头,如@Component()、@Injectable()、@NgModule(),有一些可以以传入一个对象作为配置数据,但其后都必须跟着一个普通的类,意味着将这个类修饰成对应的组件,依赖注入,模块等等。

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [HeroService],
  bootstrap: [AppComponent]
})
export class AppModule { }
元数据(metadata)

上述例子中,配置对象中的属性都可以视为元数据,元数据告诉 Angular 如何处理一个类

指令(directives)

可以通过@Directive()将指令元数据绑定到类上,指令可以通过添加元素属性的方式进行使用。当 Angular 开始渲染时,它会根据指令对 DOM 进行修改。类似ngIf与ngFor这类指令会直接影响到dom树的结构。组件作为指令的一个重要子类,组件本质上可以看作是一个带有模板的指令。

  • 你可能感兴趣的:(ng2)