建站
咨询
售后
建站咨询
Angular脚手架开发的实现步骤-创新互联
简介
写一份自定义的angular脚手架吧
写之前我们先解析一下antd的脚手架
前提
先把 Angular Schematic这篇文章读一遍,确保了解了collection等基础
antd脚手架
克隆项目
git clone https://github.com/NG-ZORRO/ng-zorro-antd.git
开始
打开项目
在schematics下的collection.json为入口,查看内容
一共定了了4个schematic,每个schema分别指向了各文件夹的子schema.json,factory指向了函数入口，index.ts
ng-add/schema.json
{
// 指定schema.json的验证模式
"$schema": "http://json-schema.org/schema",
"id": "nz-ng-add",
"title": "Ant Design of Angular(NG-ZORRO) ng-add schematic",
"type": "object",
// 包含的属性
"properties": {
"project": {
"type": "string",
"description": "Name of the project.",
"$default": {
"$source": "projectName"
}
},
// 是否跳过package.json的安装属性
"skipPackageJson": {
// 类型为布尔
"type": "boolean",
// 默认值为false
"default": false,
// 这是个描述,可以看到，如果在ng add ng-zorro-antd时不希望自动安装可以加入--skipPackageJson配置项
"description": "Do not add ng-zorro-antd dependencies to package.json (e.g., --skipPackageJson)"
},
// 开始页面
"bootPage": {
// 布尔
"type": "boolean",
// 默认为true
"default": true,
// 不指定--bootPage=false的话，你的app.html将会被覆盖成antd的图标页
"description": "Set up boot page."
},
// 图标配置
"dynamicIcon": {
"type": "boolean",
"default": false,
"description": "Whether icon assets should be add.",
"x-prompt": "Add icon assets [ Detail: https://ng.ant.design/components/icon/en ]"
},
// 主题配置
"theme": {
"type": "boolean",
"default": false,
"description": "Whether custom theme file should be set up.",
"x-prompt": "Set up custom theme file [ Detail: https://ng.ant.design/docs/customize-theme/en ]"
},
// i18n配置,当你ng add ng-antd-zorro 的时候有没有让你选择这个选项呢?
"i18n": {
"type": "string",
"default": "en_US",
"enum": [
"ar_EG",
"bg_BG",
"ca_ES",
"cs_CZ",
"da_DK",
"de_DE",
"el_GR",
"en_GB",
"en_US",
"es_ES",
"et_EE",
"fa_IR",
"fi_FI",
"fr_BE",
"fr_FR",
"is_IS",
"it_IT",
"ja_JP",
"ko_KR",
"nb_NO",
"nl_BE",
"nl_NL",
"pl_PL",
"pt_BR",
"pt_PT",
"sk_SK",
"sr_RS",
"sv_SE",
"th_TH",
"tr_TR",
"ru_RU",
"uk_UA",
"vi_VN",
"zh_CN",
"zh_TW"
],
"description": "add locale code to module (e.g., --locale=en_US)"
},
"locale": {
"type": "string",
"description": "Add locale code to module (e.g., --locale=en_US)",
"default": "en_US",
"x-prompt": {
"message": "Choose your locale code:",
"type": "list",
"items": [
"en_US",
"zh_CN",
"ar_EG",
"bg_BG",
"ca_ES",
"cs_CZ",
"de_DE",
"el_GR",
"en_GB",
"es_ES",
"et_EE",
"fa_IR",
"fi_FI",
"fr_BE",
"fr_FR",
"is_IS",
"it_IT",
"ja_JP",
"ko_KR",
"nb_NO",
"nl_BE",
"nl_NL",
"pl_PL",
"pt_BR",
"pt_PT",
"sk_SK",
"sr_RS",
"sv_SE",
"th_TH",
"tr_TR",
"ru_RU",
"uk_UA",
"vi_VN",
"zh_TW"
]
}
},
"gestures": {
"type": "boolean",
"default": false,
"description": "Whether gesture support should be set up."
},
"animations": {
"type": "boolean",
"default": true,
"description": "Whether Angular browser animations should be set up."
}
},
"required": []
}另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
文章题目：Angular脚手架开发的实现步骤-创新互联
浏览路径：http://lswzjz.com/article/esegs.html
