Angular项目结构分析

Angular项目结构分析

|---e2e                           //在e2e下是端到端(End-to-End)测试
|---node_modules				//第三方模块
|---src							//编写的项目文件都放在这个文件夹里面
	|---app						//组件
		|---app.component.html		//根组件页面
		|---app.component.sass		//根组件样式
		|---app.component.spec.ts	//测试用例
		|---app.component.ts		//根组件
		|---app.module.ts			//根模块
		|---app-routing.module.ts	//根路由
	|---assets						//静态资源  图片  第三方库
    	|---.gitkeep
	|---environments				//开发模式和生产模式的配置文件,可以吧接口的更路径写在这里面
    	|---environment.prod.ts
		|---environment.ts
	|---favicon.ico         		//小图标  浏览器用的
	|---index.html					//启动页
	|---main.ts						//入口文件
	|---polyfills.ts				//兼容腻子脚本,可以配置兼容ie以及es6 es7
	|---styles.sass					//全局样式
	|---test.ts						//测试用例
|---.editorconfig					//editorconfig配置文件,规范开发用的
|---.gitignore						//git忽略文件
|---package.json
|---package-lock.json
|---README.md
|---tsconfig.app.json				//typescript配置文件
|---typescript.json					//typescript配置文件		
|---tslint.json						//tslint语法校验配置文件

文件内容介绍

app.module.ts

/*这个文件是Angular 根模块，告诉Angular如何组装应用*/
//BrowserModule，浏览器解析的模块
import { BrowserModule } from '@angular/platform-browser';
//Angular核心模块
import { NgModule } from '@angular/core';

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

app.component.ts

//引入核心模块里面的Component
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',   //使用这个组件的名称
  templateUrl: './app.component.html',   //html 
  styleUrls: ['./app.component.scss']   //css
})
export class AppComponent {
  title = 'angulardemo01';   //定义属性


  constructor(){   //构造函数

    
  }
}

自定义组件

https://cli.angular.io

• 创建组件：ng g component components/textcomponents
• 解释:ng g 表示自动创建一个组件 在app下的那一个文件夹下 / 组件名称
• 使用这种方式创建组件,组件会自动注册到app.module.ts;如果想要使用这个组件只需要找到新创建的组件的XXXX.component.ts中会有一个selector属性;属性后面的就是这个组建的名称
• 在需要显示组件的页面使用一段标签的的形式书写selector中的组件名如:<app-textcomponents></app-textcomponents>

删除组件

• 删除单个组件文件夹
• 在app.module.ts文件夹中将对应注册的组价移除

将组件中的数据渲染在页面上

• 在组建的ts文件中的export class .......中使用public 修饰变量名

  • export class HomeComponent implements OnInit {
      public title = "这是首页组件的数据,相当于vue中data中的数据"
      public title2 = "这是首页组件的数据,相当于vue中data中的数据"
    
      constructor() { }
    
      ngOnInit() {
      }
    
    }
    
    

• 在页面中直接可以使用插值表达式来渲染数据 {{title2}}