浅谈angular架构(上)

前端之家收集整理的这篇文章主要介绍了浅谈angular架构(上)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。


————————模块————————

定义:模块由一块代码组成,可用于执行一个简单的任务。

此部分涉及到两个文件AppModulemain.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!';
}

猜你在找的Angularjs相关文章