Angular目录结构分析、Angular中创建组件、绑定数据

一、目录结构分析

e2e

在e2e/下是端对端测试

node_modules

安装的第三方模块，项目里面所需要的各种依赖，也就是在package.json里面定义的模块，通过-npm install 安装到node_modules里面

editorconfig

编辑器的配置文件

gitignore

Git的配置文件

package.json（*）

项目的配置文件，定义项目的名称，版本，以及定义项目所需要的各种依赖，npm配置文件

README.md

项目的基础文档，说明文档（如何运行项目，编译项目）

tsconfig.json

Typescript编译器的配置文件

src

app 组件以及根模块（*）

assets 静态资源文件（*）

environments 环境相关的文件

browserslist angular支持浏览器的配置文件

index.html 主页面、入口（*）

main.ts 这是应用的主要入口

polyfills.ts 填充库，能帮我们把这些不同点进行标准化

styles.css 全局样式（*）

test.ts 测试的入口文件

二、app.module.ts 、组件分析

1、app.module.ts（根模块）

定义 AppModule，这个根模块会告诉 Angular 如何组装该应用

/**
*Angular模块类描述应用的部件是如何组装在一起的。每个应用都至少有一个
*angular模块，哦那个来引导并运行应用。你可以为它取任何名字。常规名字
*是AppModule。也就是app.module.ts文件
*/
import { BrowserModule } from '@angular/platform-browser';//BrowserModule ，浏览器解析的模块
import { NgModule } from '@angular/core';//angularjs核心模块

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';//根组件
//@NgModule装饰器，接受一个元数据对象，告诉angular如何编译和启动应用
@NgModule({
  declarations: [//引入当前项目运行的组件
    AppComponent
  ],
  imports: [//引入当前模块运行依赖的其他模块
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],//定义的服务，回头放在这个里面
  bootstrap: [AppComponent]//指定应用的主视图（称为根组件）通过引导根AppModule来启动应用，这里一般写的是根组件
})
export class AppModule { }//根模块不需要导出任何东西，因为其他组件不需要导入根模块，但是一定要写

2、自定义组件

创建组件：

/**
*在app文件夹下创建components文件夹，并在该文件夹里创建news组件，也可以把components去掉，直接在app文件夹下创建组件
**/
ng g component components/news

组件内容详解

import { Component, OnInit } from '@angular/core';//引入angular核心

@Component({
  selector: 'app-news',//使用这个组件的名称
  templateUrl: './news.component.html',//html模板
  styleUrls: ['./news.component.css']//css样式
})
export class NewsComponent implements OnInit {//实现接口

  constructor() { }//构造函数

  ngOnInit() {//初始化加载的生命周期函数
  }

}

3、绑定数据

3.1、数据文本绑定

使用花括号：{{title}}、1+1={{1+1}}

// news.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {
  public title = '我是新闻组件。。。。';//定义一个title属性
  public username:string = '张三';
  public user:any = {
    username:'李四',
    age:'20'
  };
  constructor() { }
  
  ngOnInit() {
  }

}

/**声明属性的几种方式：
*public：公有（默认） 可以在这个类里面使用，也可以在类外面使用
*protected 保护类型 只有在当前类和他的子类里面使用
*private 私有 只有在当前类才可以访问该属性
**/

//news.component.html
<h2>
  {{title}}
</h2>

<div>
1+1={{1+1}}
</div>
<h3>
{{username}}
</h3>
<hr>
<h4>
  {{user.username}}
</h4>

3.2、绑定属性

动态的属性加上[]符号

// news.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {
  public msg:string = '我是一个div';
  public id:any = '001';
  constructor() { }
  
  ngOnInit() {
  }

}

//news.component.html
<div [title]="msg" [id]="id">
  我是一个div
</div>

3.3、绑定html

在标签上加上[innerHTML]属性

// news.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {
  public h:any = '<h1>我是一个h1标签</h1>';
  constructor() { }
  
  ngOnInit() {
  }

}

//news.component.html
<div [innerHTML]="h">

</div>

Angular学习之路——介绍、安装、创建Angular项目