iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 25
0
Modern Web

高效 Coding 術:Angular Schematics 實戰三十天系列 第 25

[高效 Coding 術:Angular Schematics 實戰三十天] Day24 - Angular Schematics API List (一)

介紹完如何開發給非 Angular 專案所使用的 Schematics 與如何在非 Angular 專案中使用 Schematics 之後,我們再把主軸拉回到 Angular 裡。

筆者之前在 Day12 - Angular Schematics API 之牛刀小試 裡有提到一些在開發 Schematics 時會用到的 API ,但那時介紹的 API 只有五個而已,根本不夠看!

所以接下來,就讓筆者來好好地把所有的 API 介紹給大家認識吧!

首先是引入路徑在 @schematics/angular/utility 之下的這些 API ,以檔名可分為:

可以從上表看出, Angular Schematics 其實有非常多的 API 可以使用,所以筆者會將其切成幾篇來介紹給大家。

此篇會先從之前介紹過的 API 開始,依序為:

  • validation
    • validateName
    • validateHtmlSelector
    • validateProjectName
    • htmlSelectorRe
  • find-module
    • ModuleOptions
    • MODULE_EXT
    • ROUTING_MODULE_EXT
    • findModuleFromOptions
    • findModule
    • buildRelativePath
  • paths
    • relativePathToWorkspaceRoot
  • pase-name
    • Location
    • parseName

因文章沒有支援錨點的關係,所以筆者把此篇會介紹到的每個 API 都列出來,讓大家要找特定的 API 的時候,連點兩下複製後,再貼到搜尋框內會比較方便一些。

首先是關於驗證相關的 validation


validation

引入路徑:

import { 
  validateName, 
  validateHtmlSelector,
  validateProjectName,
  htmlSelectorRe
} from '@schematics/angular/utility/validation';

validateName

用途:驗證傳入的字串是否為有效的 name ,不正確則拋出錯誤。

回傳值:無。

用法:

validateName('leo');  // pass
validateName('leo2'); // pass
validateName('2leo'); // throw error

原始碼

validateHtmlSelector

用途:驗證傳入的字串是否為有效的 selector ,不正確則拋出錯誤。

回傳值:無。

用法:

validateHtmlSelector('app-leo-chen');    // pass
validateHtmlSelector('app1-leo2-chen3'); // pass
validateHtmlSelector('app1-2leo-chen3'); // throw error

原始碼

validateProjectName

用途:驗證傳入的字串是否為有效的專案名稱 ,不正確則拋出錯誤。

回傳值:無。

用法:

validateProjectName('leo-chen');   // pass
validateProjectName('leo2-chen3'); // pass
validateProjectName('2leo-chen3'); // throw error
validateProjectName('leo/chen');   // throw error

原始碼

htmlSelectorRe

htmlSelectorRe 是一個常數,定義了 HTML 選擇器的正規表示式,如果有需要時可以直接引入使用。

此常數定義如下:

const htmlSelectorRe = /^[a-zA-Z][.0-9a-zA-Z]*(:?-[a-zA-Z][.0-9a-zA-Z]*)*$/;

validateHtmlSelector 即是用此正規表示式來驗證。

原始碼


接下來是跟尋找 Module 有相關的 find-module

find-module

引入路徑:

import { 
  ModuleOptions, 
  MODULE_EXT,
  ROUTING_MODULE_EXT,
  findModuleFromOptions,
  findModule,
  buildRelativePath
} from '@schematics/angular/utility/find-module';

ModuleOptions

ModuleOptions 定義了當我們使用 findModuleFromOptions 時,所傳入的 options 的介面。

此介面如下所示:

interface ModuleOptions {
  module?: string;
  name: string;
  flat?: boolean;
  path?: string;
  skipImport?: boolean;
  moduleExt?: string;
  routingModuleExt?: string;
}

原始碼

MODULE_EXT

MODULE_EXT 是一個常數,定義了一般 Module 檔名的後綴: .module.ts

原始碼

ROUTING_MODULE_EXT

ROUTING_MODULE_EXT 是一個常數,定義了路由 Module 檔名的後綴: -routing.module.ts

原始碼

findModuleFromOptions

用途:根據傳入的檔案樹參數物件找出最相近的 Module 的路徑 。

回傳值:有,字串型別,為最相近的 Module 的路徑。

用法:

const moduleOptions: ModuleOptions = { name: 'Leo Chen', path: '/projects/world/src/app/feature' };

findModuleFromOptions(tree, moduleOptions); // '/projects/world/src/app/app.module.ts'

原始碼

測試原始碼

findModule

用途:根據傳入的檔案樹檔案路徑一般 Module 檔名的後綴要過濾掉的路由 Module 檔名的後綴找出最相近的 Module 的路徑,其中一般 Module 檔名的後綴要過濾掉的路由 Module 檔名的後綴為非必要傳入之參數。

回傳值:有,字串型別,為最相近的 Module 的路徑。

用法:

findModule(tree, '/projects/world/src/app/feature'); // '/projects/world/src/app/app.module.ts'

原始碼

測試原始碼

buildRelativePath

用途:從傳入的兩個路徑之中得出相對的路徑。

回傳值:有,字串型別,為第二個路徑相對於第一個路徑而言的相對路徑。

用法:

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

原始碼

測試原始碼


paths

引入路徑:

import { relativePathToWorkspaceRoot } from '@schematics/angular/utility/paths';

relativePathToWorkspaceRoot

用途:從傳入的路徑計算出與專案根目錄的相對路徑。

回傳值:有,字串型別,為傳入之路徑相對於專案根目錄的路徑。

用法:

relativePathToWorkspaceRoot('foo/bar'); // '../..'

原始碼

測試原始碼


parse-name

引入路徑:

import {
  Location,
  parseName
} from '@schematics/angular/utility/parse-name';

Location

Location 定義了當我們使用 parseName 時,所回傳的資料介面。

此介面如下所示:

interface Location {
  name: string;
  path: Path;
}

原始碼

parseName

用途:從傳入的路徑檔名(含路徑)取得完整的路徑不含路徑的檔名

回傳值:有,Location 型別,為完整的路徑不含路徑的檔名

用法:

parseName('src/app', 'bar/foo') // { name: 'foo', path: 'src/app/bar' };

原始碼

測試原始碼


本日結語

雖然 API 文件類型的文章有點無聊,但因官方沒有這類的文件,所以筆者覺得這應該可以幫助到大家,還請邦友們多多體諒!

參考資料


上一篇
[高效 Coding 術:Angular Schematics 實戰三十天] Day23 - 與 Vue 共舞
下一篇
[高效 Coding 術:Angular Schematics 實戰三十天] Day25 - Angular Schematics API List (二)
系列文
高效 Coding 術:Angular Schematics 實戰三十天32

尚未有邦友留言

立即登入留言