- 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树的结构。组件作为指令的一个重要子类,组件本质上可以看作是一个带有模板的指令。
<li *ngFor="let site of sites"></li>
<site-detail *ngIf="selectedSite"></site-detail>