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.module.ts文件夹中将对应注册的组价移除

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

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

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！