今天完成的事情
app.module.ts组件分析
1. app.module.ts
定义AppModule ， 这个根模块会告诉Angular 如何组装该应用。
/*这个文件是Angular 根模块，告诉Angular如何组装应用*/
//BrowserModule，浏览器解析的模块
import { BrowserModule } from '@angular/platform-browser';
//Angular核心模块
import { NgModule } from '@angular/core';
//根组件
import { AppComponent } from './app.component';
import { NewsComponent } from './components/news/news.component';
import { HomeComponent } from './components/home/home.component';
import { HeaderComponent } from './components/header/header.component';
/*@NgModule装饰器, @NgModule接受一个元数据对象，告诉 Angular 如何编译和启动应用*/
@NgModule({
declarations: [ /*配置当前项目运行的的组件*/
AppComponent, NewsComponent, HomeComponent, HeaderComponent
],
imports: [ /*配置当前模块运行依赖的其他模块*/
BrowserModule
],
providers: [], /*配置项目所需要的服务*/
bootstrap: [AppComponent] /* 指定应用的主视图（称为根组件） 通过引导根AppModule来启动应用 ，这里一般写的是根组件*/
})
//根模块不需要导出任何东西， 因为其它组件不需要导入根模块
export class AppModule { }
2. 自定义组件
ng g component components/header
组件内容详解：
组件内容详解：
import { Component, OnInit } from '@angular/core'; /*引入angular 核心*/
@Component({
selector: 'app-header', /*使用这个组件的名称*/
templateUrl: './header.component.html', /*html 模板*/
styleUrls: ['./header.component.css'] /*css 样式*/
})
export class HeaderComponent implements OnInit { /*实现接口*/
constructor() {
/*构造函数*/
}
ngOnInit() {
/*初始化加载的生命周期函数*/
}
}
3.绑定数据
Angular 中使用{{}}绑定业务逻辑里面定义的数据
创建angualr 组件
Angular CLI:
https://cli.angular.io/
创建组件
ng g component components/header
使用组件
<app-header></app-header>
Angular绑定数据
1. 数据文本绑定
<h1>
{{title}}
</h1>
<div>
1+1={{1+1}}
</div>
2.绑定html
this.h="<h2>这是一个h2 用[innerHTML]来解析</h2>"
<div [innerHTML]="h"></div>
3.angular绑定属性
<div [id]="id" [title]="msg">调试工具看看我的属性</div>
今天遇到的问题
对于angular中的各种指令还不够熟悉，对于angular的使用更不熟悉
今天的收获
学习了angular的组件的使用以及绑定的使用
明天的计划
学习angular中的组件以及条件判断语句和循环语句
返回列表
评论