कोणीय योजनाबद्ध, या मैंने कोणीय क्ली के लिए अपना टेम्पलेट कैसे लिखा

हैलो, मेरा नाम मैक्सिम है। अब कई सालों से मैं फ्रंट-एंड डेवलपमेंट कर रहा हूं। मुझे अक्सर विभिन्न html टेम्प्लेट के लेआउट से निपटना पड़ता है। अपने दैनिक कार्य में, मैं आमतौर पर अनुकूलित पग टेम्पलेट इंजन के साथ वेबपैक बिल्डर का उपयोग करता हूं, और मैं बीईएम पद्धति का भी उपयोग करता हूं। अपने जीवन को आसान बनाने के लिए मैं एक अद्भुत पैकेज का उपयोग करता हूं।

हाल ही में, मुझे कोणीय पर एक छोटी सी परियोजना बनाने की आवश्यकता थी, और जब से मुझे अपने पसंदीदा उपकरणों के साथ काम करने की आदत थी, मैं नंगे html में वापस नहीं आना चाहता था। इस संबंध में, समस्या यह आई कि कैसे एक कोणीय के साथ दोस्त बनाने के लिए, और न केवल दोस्त बनाने के लिए, बल्कि मुझे आवश्यक संरचना के साथ cli से घटकों को उत्पन्न करना चाहिए।

कौन परवाह करता है कि मैंने यह सब कैसे किया, बिल्ली का स्वागत है।

शुरू करने के लिए, एक परीक्षण परियोजना बनाएं, जिस पर हम अपने टेम्पलेट का परीक्षण करेंगे।

हम कमांड लाइन पर अमल करते हैं:

ng g test-project ।

सेटिंग्स में, मैंने scss प्रीप्रोसेसर को चुना, क्योंकि मेरे लिए इसके साथ काम करना अधिक सुविधाजनक है।

प्रोजेक्ट बनाया गया था, लेकिन हमारे HTML में डिफ़ॉल्ट घटक टेम्पलेट, अब इसे ठीक करें। सबसे पहले, आपको पग टेम्पलेट इंजन के साथ कोणीय क्ली मित्र बनाने की आवश्यकता है, इसके लिए मैंने एनजी-क्ली-पग-लोडर पैकेज का उपयोग किया था

पैकेज स्थापित करें, इसके लिए, प्रोजेक्ट फ़ोल्डर पर जाएं और निष्पादित करें:

ng add ng-cli-pug-loader ।

अब आप पग टेम्पलेट फ़ाइलों का उपयोग कर सकते हैं। अगला, हम AppComponent घटक के मूल डेकोरेटर को फिर से लिखते हैं:

  @Component({ selector: 'app-root', templateUrl: './app.component.pug', styleUrls: ['./app.component.scss'] }) 

तदनुसार, हम फ़ाइल एक्सटेंशन app.component.html को app.component.pug में बदलते हैं, और सामग्री टेम्पलेट सिंटैक्स में लिखी जाती है। इस फ़ाइल में, मैंने राउटर को छोड़कर सब कुछ हटा दिया।

अंत में, चलो हमारे घटक जनरेटर बनाना शुरू करें!

टेम्प्लेट उत्पन्न करने के लिए, हमें अपनी योजना बनाने की आवश्यकता है। मैं @ कोणीय-देवकिट से योजनाबद्ध-cli पैकेज का उपयोग कर रहा हूं। कमांड के साथ विश्व स्तर पर पैकेज स्थापित करें:

npm install -g @angular-devkit/schematics-cli ।

मैंने कमांड के साथ परियोजना के बाहर एक अलग निर्देशिका में योजना बनाई:

schematics blank --name=bempug-component ।

हम बनाई गई योजना में जाते हैं, अब हम src / collection.json फ़ाइल में रुचि रखते हैं। यह इस तरह दिखता है:

  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json", "schematics": { "bempug-component": { "description": "A blank schematic.", "factory": "./bempug-component/index#bempugComponent" } } } 

यह हमारी योजना की एक विवरण फ़ाइल है, जहाँ पैरामीटर "फ़ैक्टरी": "./bempug-component/index#bempugComponent" है: यह हमारे जनरेटर के "कारखाने" के मुख्य कार्य का विवरण है।

प्रारंभ में, यह कुछ इस तरह दिखता है:

 import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics'; // You don't have to export the function as default. You can also have more than one rule factory // per file. export function bempugComponent(options: any): Rule { return (tree: Tree, _context: SchematicContext) => { return tree; }; } 

आप फ़ंक्शन को डिफ़ॉल्ट रूप से निर्यात कर सकते हैं, फिर "फ़ैक्टरी" पैरामीटर को ".bempug-component/index" के रूप में फिर से लिखा जा सकता है।

अगला, हमारी योजना की निर्देशिका में, फ़ाइल स्कीमा बनाएँ ।json, यह हमारी योजना के सभी मापदंडों का वर्णन करेगा।

 { "$schema": "http://json-schema.org/schema", "id": "SchemanticsForMenu", "title": "Bempug Schema", "type": "object", "properties": { "name": { "type": "string", "$default": { "$source": "argv", "index": 0 } }, "path": { "type": "string", "format": "path", "description": "The path to create the component.", "visible": false }, "project": { "type": "string", "description": "The name of the project.", "$default": { "$source": "projectName" } } } } 

पैरामीटर गुण में हैं, अर्थात्:

• इकाई का नाम (हमारे मामले में यह एक घटक होगा);
• पथ वह पथ है जिसके द्वारा जनरेटर घटक फ़ाइलों का निर्माण करेगा;
• प्रोजेक्ट स्वयं प्रोजेक्ट है, जिसमें घटक उत्पन्न होगा;

भविष्य में आवश्यक फ़ाइल में कुछ और पैरामीटर जोड़ें।

 "module": { "type": "string", "description": "The declaring module.", "alias": "m" }, "componentModule": { "type": "boolean", "default": true, "description": "Patern module per Component", "alias": "mc" }, "export": { "type": "boolean", "default": false, "description": "Export component from module?" } 

• यहां मॉड्यूल को मॉड्यूल के लिए एक लिंक संग्रहीत किया जाएगा जिसमें घटक शामिल किया जाएगा, या घटक मॉड्यूल;
• घटकमॉड्यूल वहाँ एक झंडा है कि क्या घटक को अपने स्वयं के मॉड्यूल के लिए बनाना है (तब मैं इस निष्कर्ष पर आया था कि यह हमेशा बनाया जाएगा और इसे सही पर सेट करेगा);
• निर्यात: यह वह ध्वज है जो उस मॉड्यूल से निर्यात करना है जिसमें हम अपने घटक मॉड्यूल का आयात कर रहे हैं;

अगला, हम अपने घटक के मापदंडों के साथ एक इंटरफ़ेस बनाते हैं, स्कीमा। डीटीएस फ़ाइल।

 export interface BemPugOptions { name: string; project?: string; path?: string; module?: string; componentModule?: boolean; module?: string; export?: boolean; bemPugMixinPath?: string; } 

इसमें, गुण स्कीमा.json से डुप्लिकेट गुण। अगला, हमारे कारखाने को तैयार करें, index.ts फ़ाइल पर जाएं। इसमें, हम दो फ़िल्टरटेम्पलेट फ़ंक्शंस बनाते हैं, जो घटक के लिए मॉड्यूल बनाने के लिए ज़िम्मेदार होंगे घटकोमॉड्यूल और सेटअपऑफ्यूशंस के मूल्य के आधार पर, जो कारखाने के लिए आवश्यक पैरामीटर सेट करता है।

 function filterTemplates(options: BemPugOptions): Rule { if (!options.componentModule) { return filter(path => !path.match(/\.module\.ts$/) && !path.match(/-item\.ts$/) && !path.match(/\.bak$/)); } return filter(path => !path.match(/\.bak$/)); } function setupOptions(options: BemPugOptions, host: Tree): void { const workspace = getWorkspace(host); if (!options.project) { options.project = Object.keys(workspace.projects)[0]; } const project = workspace.projects[options.project]; if (options.path === undefined) { const projectDirName = project.projectType === 'application' ? 'app' : 'lib'; options.path = `/${project.root}/src/${projectDirName}`; } const parsedPath = parseName(options.path, options.name); options.name = parsedPath.name; options.path = parsedPath.path; } 

अगला, हम मुख्य कार्य में लिखते हैं:

 export function bempugComponent(options: BemPugOptions): Rule { return (host: Tree, context: SchematicContext) => { setupOptions(options, host); const templateSource = apply(url('./files'), [ filterTemplates(options), template({ ...strings, ...options }), move(options.path || '') ]); const rule = chain([ branchAndMerge(chain([ mergeWith(templateSource), ])) ]); return rule(host, context); } } 

कारखाना तैयार है और यह पहले से ही फाइल फ़ोल्डर से टेम्प्लेट टेम्प्लेट द्वारा घटक फाइलें उत्पन्न कर सकता है, जो अभी उपलब्ध नहीं है। इससे कोई फर्क नहीं पड़ता, हम मेरे मामले में हमारे योजना फ़ोल्डर में एक bempug- घटक फ़ाइलें फ़ोल्डर बनाते हैं। फ़ाइलों के फ़ोल्डर में, फ़ोल्डर बनाएं __name@dasherize__ , पीढ़ी के दौरान, कारखाना घटक के नाम के साथ __name@dasherize__ को बदल __name@dasherize__ ।

अगला, __name@dasherize__ अंदर __name@dasherize__ फाइलें बनाएं

• __name@dasherize__ पग घटक टेम्पलेट
• घटक के लिए __name@dasherize__ यूनिट परीक्षण फ़ाइल
• घटक का __name@dasherize__ फ़ाइल
• __name@dasherize__ -component.module.ts घटक मॉड्यूल
• __name@dasherize__ -component.scss घटक स्टाइलशीट

अब हम अपने कारखाने में मॉड्यूल को अपडेट करने के लिए समर्थन जोड़ेंगे, इसके लिए हम उन मापदंडों को संग्रहीत करने के लिए ऐड-टू-मॉड्यूल-रेफरेंस फ़ाइल बनाएंगे, जिन्हें कारखाने को मॉड्यूल के साथ काम करने की आवश्यकता होगी।

 import * as ts from 'typescript'; export class AddToModuleContext { // source of the module file source: ts.SourceFile; // the relative path that points from // the module file to the component file relativePath: string; // name of the component class classifiedName: string; } 

कारखाने में मॉड्यूल समर्थन जोड़ें।

 const stringUtils = { dasherize, classify }; // You don't have to export the function as default. You can also have more than one rule factory // per file. function filterTemplates(options: BemPugOptions): Rule { if (!options.componentModule) { return filter(path => !path.match(/\.module\.ts$/) && !path.match(/-item\.ts$/) && !path.match(/\.bak$/)); } return filter(path => !path.match(/\.bak$/)); } function setupOptions(options: BemPugOptions, host: Tree): void { const workspace = getWorkspace(host); if (!options.project) { options.project = Object.keys(workspace.projects)[0]; } const project = workspace.projects[options.project]; if (options.path === undefined) { const projectDirName = project.projectType === 'application' ? 'app' : 'lib'; options.path = `/${project.root}/src/${projectDirName}`; } const parsedPath = parseName(options.path, options.name); options.name = parsedPath.name; options.path = parsedPath.path; options.module = options.module || findModuleFromOptions(host, options) || ''; } export function createAddToModuleContext(host: Tree, options: ModuleOptions, componentPath: string): AddToModuleContext { const result = new AddToModuleContext(); if (!options.module) { throw new SchematicsException(`Module not found.`); } // Reading the module file const text = host.read(options.module); if (text === null) { throw new SchematicsException(`File ${options.module} does not exist.`); } const sourceText = text.toString('utf-8'); result.source = ts.createSourceFile(options.module, sourceText, ts.ScriptTarget.Latest, true); result.relativePath = buildRelativePath(options.module, componentPath); result.classifiedName = stringUtils.classify(`${options.name}ComponentModule`); return result; } function addDeclaration(host: Tree, options: ModuleOptions, componentPath: string) { const context = createAddToModuleContext(host, options, componentPath); const modulePath = options.module || ''; const declarationChanges = addImportToModule( context.source, modulePath, context.classifiedName, context.relativePath); const declarationRecorder = host.beginUpdate(modulePath); for (const change of declarationChanges) { if (change instanceof InsertChange) { declarationRecorder.insertLeft(change.pos, change.toAdd); } } host.commitUpdate(declarationRecorder); }; function addExport(host: Tree, options: ModuleOptions, componentPath: string) { const context = createAddToModuleContext(host, options, componentPath); const modulePath = options.module || ''; const exportChanges = addExportToModule( context.source, modulePath, context.classifiedName, context.relativePath); const exportRecorder = host.beginUpdate(modulePath); for (const change of exportChanges) { if (change instanceof InsertChange) { exportRecorder.insertLeft(change.pos, change.toAdd); } } host.commitUpdate(exportRecorder); }; export function addDeclarationToNgModule(options: ModuleOptions, exports: boolean, componentPath: string): Rule { return (host: Tree) => { addDeclaration(host, options, componentPath); if (exports) { addExport(host, options, componentPath); } return host; }; } export function bempugComponent(options: BemPugOptions): Rule { return (host: Tree, context: SchematicContext) => { setupOptions(options, host); deleteCommon(host); const templateSource = apply(url('./files'), [ filterTemplates(options), template({ ...strings, ...options }), move(options.path || '') ]); const rule = chain([ branchAndMerge(chain([ mergeWith(templateSource), addDeclarationToNgModule(options, !!options.export, `${options.path}/${options.name}/${options.name}-component.module` || '') ])) ]); return rule(host, context); } } 

अब, cli कमांड में -m <मॉड्यूल संदर्भ> पैरामीटर जोड़ते समय, हमारा घटक मॉड्यूल निर्दिष्ट मॉड्यूल में आयात जोड़ देगा और -एक्सपोर्ट फ्लैग जोड़ते समय इसमें से निर्यात जोड़ देगा। अगला हम BEM समर्थन जोड़ते हैं। ऐसा करने के लिए, मैंने npm bempug पैकेज के लिए स्रोतों को लिया और एक bempugMixin.pug फ़ाइल में कोड बनाया, जिसे मैंने सामान्य फ़ोल्डर में और दूसरे सामान्य फ़ोल्डर में रखा ताकि मिक्सचर को कोणीय पर परियोजना में आम फ़ोल्डर में कॉपी किया जा सके।

हमारा कार्य यह है कि यह मिश्रण हमारी प्रत्येक टेम्पलेट फ़ाइल में जुड़ा हुआ है, और नए घटकों को बनाते समय डुप्लिकेट नहीं किया गया है, इसके लिए हम इस कार्यक्षमता को हमारे कारखाने में जोड़ देंगे।

 import { Rule, SchematicContext, Tree, filter, apply, template, move, chain, branchAndMerge, mergeWith, url, SchematicsException } from '@angular-devkit/schematics'; import {BemPugOptions} from "./schema"; import {getWorkspace} from "@schematics/angular/utility/config"; import {parseName} from "@schematics/angular/utility/parse-name"; import {normalize, strings} from "@angular-devkit/core"; import { AddToModuleContext } from './add-to-module-context'; import * as ts from 'typescript'; import {classify, dasherize} from "@angular-devkit/core/src/utils/strings"; import {buildRelativePath, findModuleFromOptions, ModuleOptions} from "@schematics/angular/utility/find-module"; import {addExportToModule, addImportToModule} from "@schematics/angular/utility/ast-utils"; import {InsertChange} from "@schematics/angular/utility/change"; const stringUtils = { dasherize, classify }; // You don't have to export the function as default. You can also have more than one rule factory // per file. function filterTemplates(options: BemPugOptions): Rule { if (!options.componentModule) { return filter(path => !path.match(/\.module\.ts$/) && !path.match(/-item\.ts$/) && !path.match(/\.bak$/)); } return filter(path => !path.match(/\.bak$/)); } function setupOptions(options: BemPugOptions, host: Tree): void { const workspace = getWorkspace(host); if (!options.project) { options.project = Object.keys(workspace.projects)[0]; } const project = workspace.projects[options.project]; if (options.path === undefined) { const projectDirName = project.projectType === 'application' ? 'app' : 'lib'; options.path = `/${project.root}/src/${projectDirName}`; } const parsedPath = parseName(options.path, options.name); options.name = parsedPath.name; options.path = parsedPath.path; options.module = options.module || findModuleFromOptions(host, options) || ''; options.bemPugMixinPath = buildRelativePath(`${options.path}/${options.name}/${options.name}.component.ts`, `/src/app/common/bempugMixin.pug`); } export function createAddToModuleContext(host: Tree, options: ModuleOptions, componentPath: string): AddToModuleContext { const result = new AddToModuleContext(); if (!options.module) { throw new SchematicsException(`Module not found.`); } // Reading the module file const text = host.read(options.module); if (text === null) { throw new SchematicsException(`File ${options.module} does not exist.`); } const sourceText = text.toString('utf-8'); result.source = ts.createSourceFile(options.module, sourceText, ts.ScriptTarget.Latest, true); result.relativePath = buildRelativePath(options.module, componentPath); result.classifiedName = stringUtils.classify(`${options.name}ComponentModule`); return result; } function addDeclaration(host: Tree, options: ModuleOptions, componentPath: string) { const context = createAddToModuleContext(host, options, componentPath); const modulePath = options.module || ''; const declarationChanges = addImportToModule( context.source, modulePath, context.classifiedName, context.relativePath); const declarationRecorder = host.beginUpdate(modulePath); for (const change of declarationChanges) { if (change instanceof InsertChange) { declarationRecorder.insertLeft(change.pos, change.toAdd); } } host.commitUpdate(declarationRecorder); }; function addExport(host: Tree, options: ModuleOptions, componentPath: string) { const context = createAddToModuleContext(host, options, componentPath); const modulePath = options.module || ''; const exportChanges = addExportToModule( context.source, modulePath, context.classifiedName, context.relativePath); const exportRecorder = host.beginUpdate(modulePath); for (const change of exportChanges) { if (change instanceof InsertChange) { exportRecorder.insertLeft(change.pos, change.toAdd); } } host.commitUpdate(exportRecorder); }; export function addDeclarationToNgModule(options: ModuleOptions, exports: boolean, componentPath: string): Rule { return (host: Tree) => { addDeclaration(host, options, componentPath); if (exports) { addExport(host, options, componentPath); } return host; }; } function deleteCommon(host: Tree) { const path = `/src/app/common/bempugMixin.pug`; if(host.exists(path)) { host.delete(`/src/app/common/bempugMixin.pug`); } } export function bempugComponent(options: BemPugOptions): Rule { return (host: Tree, context: SchematicContext) => { setupOptions(options, host); deleteCommon(host); const templateSource = apply(url('./files'), [ filterTemplates(options), template({ ...strings, ...options }), move(options.path || '') ]); const mixinSource = apply(url('./common'), [ template({ ...strings, ...options }), move('/src/app/' || '') ]); const rule = chain([ branchAndMerge(chain([ mergeWith(templateSource), mergeWith(mixinSource), addDeclarationToNgModule(options, !!options.export, `${options.path}/${options.name}/${options.name}-component.module` || '') ]), 14) ]); return rule(host, context); } } 

यह हमारी टेम्पलेट फ़ाइलों को भरना शुरू करने का समय है।

__name@dasherize__.component.pug :

 include <%= bemPugMixinPath %> +b('<%= name %>') +e('item', {m:'test'}) | <%= name %> works 

पीढ़ी के दौरान <% =%> में निर्दिष्ट क्या घटक के नाम से बदल दिया जाएगा।

__name@dasherize__.component.spec.ts:

 import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import {NO_ERRORS_SCHEMA} from '@angular/core'; import { <%= classify(name) %>ComponentModule } from './<%= name %>-component.module'; import { <%= classify(name) %>Component } from './<%= name %>.component'; describe('<%= classify(name) %>Component', () => { let component: <%= classify(name) %>Component; let fixture: ComponentFixture<<%= classify(name) %>Component>; beforeEach(async(() => { TestBed.configureTestingModule({ imports: [<%= classify(name) %>ComponentModule], declarations: [], schemas: [ NO_ERRORS_SCHEMA ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(<%= classify(name) %>Component); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); 

इस मामले में, <% = वर्गीकृत (नाम)%> का उपयोग कैमलकेस को नाम देने के लिए किया जाता है।

__name@dasherize__.component.ts:

 import { Component, OnInit, ViewEncapsulation} from '@angular/core'; @Component({ selector: 'app-<%=dasherize(name)%>-component', templateUrl: '<%=dasherize(name)%>.component.pug', styleUrls: ['./<%=dasherize(name)%>-component.scss'], encapsulation: ViewEncapsulation.None }) export class <%= classify(name) %>Component implements OnInit { constructor() {} ngOnInit(): void { } } 

__name@dasherize__-component.module.ts:

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import {<%= classify(name) %>Component} from './<%= name %>.component'; @NgModule({ declarations: [ <%= classify(name) %>Component, ], imports: [ CommonModule ], exports: [ <%= classify(name) %>Component, ] }) export class <%= classify(name) %>ComponentModule { } 

__name@dasherize__-component.scss:

 .<%= name %>{ } 

हम `` एनपीएम रन बिल्ड`` कमांड के साथ अपनी योजना का निर्माण करते हैं।

परियोजना में घटक उत्पन्न करने के लिए सब कुछ तैयार है!

जांच करने के लिए, हमारे कोणीय प्रोजेक्ट पर वापस जाएं और एक मॉड्यूल बनाएं।
ng gm test-schema
अगला, हम अपनी योजना के साथ प्रोजेक्ट फ़ोल्डर में `` npm लिंक <निरपेक्ष पथ> करते हैं, ताकि हमारी योजना को प्रोजेक्ट के नोड_मॉडल में जोड़ा जा सके।

और हम ng g bempug-component:bempug-component test -m /src/app/test-schema/test-schema.module.ts –export साथ सर्किट की कोशिश करते हैं ng g bempug-component:bempug-component test -m /src/app/test-schema/test-schema.module.ts –export ।
हमारी योजना एक घटक बनाएगी और इसे निर्यात के साथ निर्दिष्ट मॉड्यूल में जोड़ेगी।
योजना तैयार है, आप परिचित प्रौद्योगिकियों पर आवेदन करना शुरू कर सकते हैं।

आप यहां अंतिम संस्करण देख सकते हैं, और पैकेज भी npm में उपलब्ध है ।

जब मैंने इस विषय पर लेखों का उपयोग किया, तो योजना बनाते समय मैं लेखकों का आभार व्यक्त करता हूं।

• https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2 ;
• https://medium.com/@tomastrajan/total-guide-to-custom-angular-schematics-5c50cf90cdb4 ;
• https://developer.okta.com/blog/2019/02/13/angular-schematics ;

आपका ध्यान के लिए धन्यवाद, हर कोई जो अंत तक पढ़ता है, आप सबसे अच्छे हैं!
और एक और रोमांचक परियोजना मुझे इंतजार कर रही है। जल्द मिलते हैं!