介紹完如何開發給非 Angular 專案所使用的 Schematics 與如何在非 Angular 專案中使用 Schematics 之後,我們再把主軸拉回到 Angular 裡。
筆者之前在 Day12 - Angular Schematics API 之牛刀小試 裡有提到一些在開發 Schematics 時會用到的 API ,但那時介紹的 API 只有五個而已,根本不夠看!
所以接下來,就讓筆者來好好地把所有的 API 介紹給大家認識吧!
首先是引入路徑在 @schematics/angular/utility
之下的這些 API ,以檔名可分為:
可以從上表看出, Angular Schematics 其實有非常多的 API 可以使用,所以筆者會將其切成幾篇來介紹給大家。
此篇會先從之前介紹過的 API 開始,依序為:
因文章沒有支援錨點的關係,所以筆者把此篇會介紹到的每個 API 都列出來,讓大家要找特定的 API 的時候,連點兩下複製後,再貼到搜尋框內會比較方便一些。
首先是關於驗證相關的 validation
:
引入路徑:
import {
validateName,
validateHtmlSelector,
validateProjectName,
htmlSelectorRe
} from '@schematics/angular/utility/validation';
用途:驗證傳入的字串是否為有效的 name
,不正確則拋出錯誤。
回傳值:無。
用法:
validateName('leo'); // pass
validateName('leo2'); // pass
validateName('2leo'); // throw error
用途:驗證傳入的字串是否為有效的 selector
,不正確則拋出錯誤。
回傳值:無。
用法:
validateHtmlSelector('app-leo-chen'); // pass
validateHtmlSelector('app1-leo2-chen3'); // pass
validateHtmlSelector('app1-2leo-chen3'); // throw error
用途:驗證傳入的字串是否為有效的專案名稱 ,不正確則拋出錯誤。
回傳值:無。
用法:
validateProjectName('leo-chen'); // pass
validateProjectName('leo2-chen3'); // pass
validateProjectName('2leo-chen3'); // throw error
validateProjectName('leo/chen'); // throw error
htmlSelectorRe
是一個常數,定義了 HTML 選擇器的正規表示式,如果有需要時可以直接引入使用。
此常數定義如下:
const htmlSelectorRe = /^[a-zA-Z][.0-9a-zA-Z]*(:?-[a-zA-Z][.0-9a-zA-Z]*)*$/;
validateHtmlSelector
即是用此正規表示式來驗證。
接下來是跟尋找 Module
有相關的 find-module
:
引入路徑:
import {
ModuleOptions,
MODULE_EXT,
ROUTING_MODULE_EXT,
findModuleFromOptions,
findModule,
buildRelativePath
} from '@schematics/angular/utility/find-module';
ModuleOptions
定義了當我們使用 findModuleFromOptions
時,所傳入的 options
的介面。
此介面如下所示:
interface ModuleOptions {
module?: string;
name: string;
flat?: boolean;
path?: string;
skipImport?: boolean;
moduleExt?: string;
routingModuleExt?: string;
}
MODULE_EXT
是一個常數,定義了一般 Module 檔名的後綴: .module.ts
。
ROUTING_MODULE_EXT
是一個常數,定義了路由 Module 檔名的後綴: -routing.module.ts
。
用途:根據傳入的檔案樹與參數物件找出最相近的 Module 的路徑 。
回傳值:有,字串型別,為最相近的 Module 的路徑。
用法:
const moduleOptions: ModuleOptions = { name: 'Leo Chen', path: '/projects/world/src/app/feature' };
findModuleFromOptions(tree, moduleOptions); // '/projects/world/src/app/app.module.ts'
用途:根據傳入的檔案樹、檔案路徑、一般 Module 檔名的後綴與要過濾掉的路由 Module 檔名的後綴找出最相近的 Module 的路徑,其中一般 Module 檔名的後綴與要過濾掉的路由 Module 檔名的後綴為非必要傳入之參數。
回傳值:有,字串型別,為最相近的 Module 的路徑。
用法:
findModule(tree, '/projects/world/src/app/feature'); // '/projects/world/src/app/app.module.ts'
用途:從傳入的兩個路徑之中得出相對的路徑。
回傳值:有,字串型別,為第二個路徑相對於第一個路徑而言的相對路徑。
用法:
const modulePath = '/projects/hello/src/app/app.module.ts';
const componentPath = '/projects/hello/src/app/feature/hello-leo-chen.component.ts';
buildRelativePath(modulePath, componentPath); // ./feature/hello-leo-chen.component.ts
引入路徑:
import { relativePathToWorkspaceRoot } from '@schematics/angular/utility/paths';
用途:從傳入的路徑計算出與專案根目錄的相對路徑。
回傳值:有,字串型別,為傳入之路徑相對於專案根目錄的路徑。
用法:
relativePathToWorkspaceRoot('foo/bar'); // '../..'
引入路徑:
import {
Location,
parseName
} from '@schematics/angular/utility/parse-name';
Location
定義了當我們使用 parseName
時,所回傳的資料介面。
此介面如下所示:
interface Location {
name: string;
path: Path;
}
用途:從傳入的路徑與檔名(含路徑)取得完整的路徑與不含路徑的檔名。
回傳值:有,Location 型別,為完整的路徑與不含路徑的檔名。
用法:
parseName('src/app', 'bar/foo') // { name: 'foo', path: 'src/app/bar' };
雖然 API 文件類型的文章有點無聊,但因官方沒有這類的文件,所以筆者覺得這應該可以幫助到大家,還請邦友們多多體諒!