ANGULAR.JSON 是包含 Angular 项目的各种属性和配置的文件。这是构建器首先引用的文件,用于查找所有路径和配置并检查哪个是主文件。下面是一个 hello-world 应用程序的 angular.json 文件,在 build 部分下,可以看到如下选项对象:
"options":{ "outputPath":"dist/hello-world", "index":"src/index.html", "main":"src/main.ts", // THIS LINE "polyfills":"src/polyfills.ts", "tsConfig":"src/tsconfig.app.json", "assets":[ "src/favicon.ico", "src/assets" ], "styles":[ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ], "scripts":[], "es5BrowserSupport":true}
它有一个对 main.ts 文件的引用,该文件告诉构建器从哪里启动应用程序。
该文件充当应用程序的入口点。
这个入口点是在 Angular 用来支持模块化功能
的 webpack 内部定义的。
main.ts 的路径/名称可以更改,但也应在 angular.json 文件中更改。
main.ts 有助于为应用程序运行创建浏览器环境。
这是通过以下方式完成的:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic’;
在此之后,main.ts 文件调用函数 bootstrapModule(AppModule) 告诉构建器引导应用程序。
platformBrowserDynamic().bootstrapModule(AppModule)
从 main.ts 文件中可以清楚地看出,我们正在使用 AppModule 引导应用程序。 此 AppModule 在 APP.MODULE.TS 文件中定义,该文件位于:
<project_directory>/src/app/app.module.ts
这是使用 @NgModule
装饰器创建的模块,它包含我们在 app 模块中创建的所有组件的声明,以便 Angular 能够识别它们。 在这里,我们还有 imports 数组,我们可以在其中导入其他模块并在我们的应用程序中使用。
下面是一个 app.module.ts 文件的示例,其中声明了一个测试组件并导入了两个模块。
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { TestComponent } from './test/test.component'; @NgModule({ declarations: [ AppComponent, TestComponent ], imports: [ BrowserModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
从上面的 app.module.ts 文件中,我们可以清楚地看到模块要求引导应用程序组件。
这个应用程序组件在 app.component.ts 文件中。
这是与网页的 html 交互并为它提供数据的文件。
该组件是使用从@angular/core 导入的@Component 装饰器制作的。 该组件有一个选择器,就像一个自定义的 html 标签,我们可以使用它来调用该组件。
然后它有 template 或 templateUrl,其中包含要显示的页面的 html。 它还具有 styleUrls 数组,可以在其中放置特定于组件的样式表。
联系客服