这是一个在Angular中，利用Angular CLI來建立最基礎的應用，在此就核心檔案進行探討。
Angular-demo的核心檔案探討
这是一个在Angular中，利用Angular CLI來建立最基礎的應用，在此就核心檔案進行探討。
Angular-demo
# 必要的话，安装 Angular CLI npm install -g @angular/cli # 利用Angular CLI來建立最基礎的應用 ng new angular-demo # 編譯此應用，並運行此應用 ng serve
现在你可以在浏览器中打开( http://localhost:4200 )开始体验。
Directory Layout
接者，我們了解一下項目目錄的結構︰
. ├── /dist/ # 编译生成的目录 ├── /e2e/ # 端到端测试，用来做自动测试的 ├── /node_modules/ # 第三方依赖包存放目录 ├── /src/ # 应用源代码目錄 │ ├── /app/ # 本應用的源码 │ │ ├── /app.component.html # 根组件的模板 │ │ ├── /app.component.scss # 根组件的样式 │ │ ├── /app.component.spec.ts # 根组件的单元测试 │ │ ├── /app.component.ts # 根组件 │ │ └── /app.modules.ts # 根模块 │ ├── /assets/ # 静态文件，编译时会被复制到 /dist 目录 │ ├── /environments/ # 包含环境配置文件 │ │ ├── /environment.prod.ts # 生产环境配置文件 │ │ └── /environment.ts # 开发环境配置文件 │ ├── /favicon.ico # Angular icon │ ├── /index.html # HTML页面，程序启动就是访问这个页面 │ ├── /main.ts # 应用的入口文件，Angular通过这个文件来启动项目 │ ├── /polyfills.ts # 主要是用来导入一些必要库，为了让Angular能正常运行在老版本下 │ ├── /styles.scss # 应用的全局样式 │ └── /test.ts # 应用的单元测试入口 ├── .editorconfig # 编辑器的配置 ├── .gitignore # Git 忽略文件 ├── angular.json # Angular命令行工具的配置文件 ├── browserslist # browserslist ├── karma.conf.js # karma是单元测试的执行器，此檔案是karma的配置文件 ├── package-lock.json # ├── package.json # npm工具的配置文件 ├── README.md # 說明文档 ├── tsconfig.app.json # TypeScript 编译器的應用配置 ├── tsconfig.json # TypeScript 编译器的配置 ├── tsconfig.spec.json # TypeScript 编译器的单元测试的配置 └── tslint.json # TSLint 和 Codelyzer 的配置
Src
src 應用程式源代碼的目錄。
| /app/ | 本應用的源码，我们要写的代码都在这个目录。 | |
|---|---|---|
| app.component.html | 根組件的模板。 | |
| app.component.scss | 根组件的样式。 | |
| app.component.spec.ts | 根组件的单元测试。 | |
| app.component.ts | 根组件。 | |
| app.modules.ts | 根模块。 | |
| /assets/ | 静态文件，编译时会被复制到 /dist 目录，即资源目录，存储静态资源的，比如图片。 | |
| /environments/ | 包含环境配置文件。Angular是支持多环境开发的，我们可以在不同的环境下（开发环境，测试环境，生产环境）共用一套代码，主要用来配置环境的。 | |
| environment.prod.ts | 生产环境配置文件。 | |
| environment.ts | 开发环境配置文件。 | |
| favicon.ico | 此應用的favicon。 | |
| index.html | HTML页面，程序启动就是访问这个页面。 | |
| main.ts | 应用的入口文件，Angular通过这个文件来启动项目。默认配置无需更改，只有在特殊情况下，比如热部署等情况下需要更改。 | |
| polyfills.ts | 主要是用来导入一些必要库，为了让Angular能正常运行在老版本下。这个文件包含了Angular项目运行和加载前所需要的core-js中的相关es模块，默认即可。 | |
| styles.scss | 应用的全局样式。区别在于你创建Angular项目时采用何种样式文件来作为Angular项目的全局样式文件。默认在Angular.json 中"build"变量下的"options"变量的"styles"中导入，否则无法生效，并可在"schematics"中修改到底选择何种文件来作为全局样式。 | |
| test.ts | 应用的单元测试入口。 |
app目錄︰
app目录是我们要编写的代码目录。我们写的代码都是放在这个目录。
一个Angular程序至少需要一个模块和一个组件。(在我们新建项目的时候命令行已经默认生成出来了。)
組件 (Component)︰@Component
组件：
组件是Angular应用的基本构建模块，可以理解为一段带有业务逻辑和数据的Html。
例如，app.component.ts：这个文件表示根组件，我們了解一下一個組件的源代碼。
/*这里是从Angular核心模块里面引入了component装饰器*/
import { Component } from '@angular/core';
/*用装饰器定义了一个组件以及组件的元数据，所有的组件都必须使用这个装饰器来注解*/
@Component({
/*组件元数据，Angular会通过这里面的属性来渲染组件并执行逻辑
*selector ：就是css选择器，这个组件通过app-root来调用，
index.html中有个<app-root></app-root>标签，这个标签用来展示该组件的内容
*templateUrl：组件的模板，定义了组件的布局和内容
*styleUrls ：该模板引用那个css样式 */
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
/*AppComponent本来就是一个普通的typescript类，
但是上面的组件元数据装饰器告诉Angular，AppComponent是一个组件，
需要把一些元数据附加到这个类上，Angular就会把AppComponent当组件来处理*/
export class AppComponent {
/*这个类实际上就是该组件的控制器，我们的业务逻辑就是在这个类中编写*/
title = 'angular-demo';
}
| selector | CSS 選擇器，它告訴 Angular 在 Template 中找到相應的位置之後，創建並插入該Component 的實體。以上述的例子來說，Angular 會在 Template 中尋找 <app-root></app-root> 這樣子的標籤，然後創建出 AppComponent 的實體並將其插入其中。 |
|---|---|
| templateUrl | 此 Component 的 Template 檔案位置 （相對位置）。 |
| template | 跟 templateUrl 的用途類似，只是 templateUrl 的值是檔案的位置，這裡是直接放 HTML 的語法 （如非必要，不建議使用）。 |
| styleUrls | 光看名字就覺得是跟 templateUrl 類似的東西。沒錯！一樣是檔案位置，只不過換成是樣式檔而已。 |
| styles | 跟 styleUrls 與 template 類似，這裡可以直接放 CSS 的語法 （如非必要，不建議使用）。 |
| providers | 跟 NgModule 的 providers 類似。但要注意的是，在 NgModule 的 providers 裡宣告的 Service （或是直接在 Service 的 provideIn 宣告為 'root'），整個應用程式的生命週期只會有一個實體 （類似 singleton 的概念） ；但在此處宣告的 Service，實體數量是跟該 Component 的實體數量一致的。 |
简单来说，组件中的關係就如下图所示：
组件相关的概念：
-
组件元数据装饰器（@Component）： 简称组件装饰器，用来告知Angular框架如何处理一个TypeScript类. Component装饰器包含多个属性，这些属性的值叫做元数据，Angular会根据这些元数据的值来渲染组件并执行组件的逻辑
-
模板（Template）： 我们可以通过组件自带的模板来定义组件的外观，模板以html的形式存在，告诉Angular如何来渲染组件，一般来说，模板看起来很像html，但是我们可以在模板中使用Angular的数据绑定语法，来呈现控制器中的数据。
-
控制器（controller）： 控制器就是一个普通的typescript类，他会被@Component来装饰，控制器会包含组件所有的属性和方法，绝大多数的业务逻辑都是写在控制器里的。控制器通过数据绑定与模板来通讯，模板展现控制器的数据，控制器处理模板上发生的事件。
總而言之，装饰器，模板和控制器是组件的必备要素。
其他可選的元素：
-
输入属性（@inputs）：是用来接收外部传入的数据的,Angular的程序结构就是一个组件树，输入属性允许在组件树种传递数据
-
提供器（providers）：这个是用来做依赖注入的
-
生命周期钩子（LifeCycle Hooks）：一个组件从创建到销毁的过程中会有多个钩子会被触发，类似于Android中的Activity的生命周期
-
样式表：组件可以关联一些样式表
-
动画（Animations）： Angular提供了一个动画包来帮助我们方便的创建一些跟组件相关的动画效果，比如淡入淡出等
-
输出属性（@Outputs）：用来定义一些其他组件可能需要的事件或者用来在组件之间共享数据
模組(Module)︰@NgModule
模組：
app.module.ts：这个文件表示模块，与AppComponent类似，模块也需要装饰器来装饰。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
/*聲明模塊中有那些東西，只能聲明組件與指令與管道*/
declarations: [
AppComponent
],
/*聲明該模塊依賴的模塊*/
imports: [
BrowserModule
],
/*默認的情況下是空的，只能聲明有聽過的服務*/
providers: [],
/*聲明模塊中的主要組件*/
bootstrap: [AppComponent]
})
export class AppModule { }
| declarations | 於此 NgModule 的 Component、Directive 與 Pipe 皆放置於此。 |
|---|---|
| imports | 此 NgModule 需要使用、依賴的其他 NgModule 皆放置於此（好像有點饒舌）。 |
| providers | 可以被整個應用程式中的任何部分被使用的 Service 皆放置於此，也可以將 Service 直接放置在 Component 的 Metadata 裡的 providers （但放置在不同地方會有一些需要特別注意的事項，後續在說明 Service 時會提到。另外，在 Angular 6 之後，在 Service 之中也可以使用 Metadata 裡的 providedIn 宣告，該 Service 要 provided 到哪裡。）。 |
| exports | 此處放置的是，當在其他 NgModule 裡 import 了當前的 Module 後，可以在其他 NgModule 裡的 Component Template 使用的 Component、Directive 與 Pipe。 |
| entryComponents | 放在這裡的元件通常是用不通過 Route 的方式，而採用動態加入的元件。 |
| bootstrap | 在此設置的是應用程式通常稱之為 Root Component （根元件） ，而且只有 Root Module 才要設置此屬性。 |
Category
Angular
Keywords
Modern Web / Angular
License
angular-demo 使用 MIT 许可证发布。 详情请进入 LICENSE 查看。
Skyfu160
