————————模块————————
定义:模块由一块代码组成,可用于执行一个简单的任务。
此部分涉及到两个文件:AppModule和main.ts
先来看AppModule(根模块)中各句的含义:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; @NgModule({ imports: [//本模块组件模板中需要由其它导出类的模板 BrowserModule,FormsModule,HttpModule ],declarations: [//试图类属于这个模板。Angular有三种类型的试图类:组件、指令、通道。 AppComponent ],exports:[],//声明的子集,可用于其它模块的组件模板。 providers: [],//服务的创建者。本模块把它们加入全局的服务表中,让它们在应用中的任何部分都可被访问到。 bootstrap: [AppComponent] }) export class AppModule { }
需在main.ts中引导AppModule,然后再由AppModule来启动应用。
————————组件————————
定义:组件是一个模板的控制类用于处理应用和逻辑页面的试图部分。其通过一些由属性和方法组成的API与视图交互。
创建 Angular 组件的方法有三步:(?)
1、从 @angular/core中引入 Component 修饰器
2、建立一个普通的类,并用@Component 修饰它
3、在 @Component 中,设置selector 自定义标签,以及 template 模板
————————模板————————
默认语言是html
————————元数据————————
元数据告诉angular如何处理一个类
来看看app.component.ts中的代码:
import { Component } from '@angular/core'; //这是一个装饰器,能接受一个配置对象,并把紧随其后的类标记成组件类 //(接上句)angular会基于这些信息创建和展示组件及其视图 @Component({ //css选择器,它告诉angular在父级html中寻找一个<mylist>标签, //然后创建该组件,并插入此标签中 selector: 'app-root',templateUrl: './app.component.html',//组件HTML模板的地址 styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app works!'; }