कोणीय सामग्री क्या है और इसे कैसे लागू करें?

कोणीय में यूआई / यूएक्स घटकों के रूप में जाना जाता है कोणीय सामग्री। वेमदद कोणीय अनुप्रयोगों प्रदर्शन करते हैं कुशलता से । हालांकि, यदि आप अभी तक उनके बारे में नहीं जानते हैं, तो यहां आपको कोणीय सामग्री को विस्तार से जानने में मदद करने के लिए एक लेख है। इसके अलावा, टीo कोणीय का गहन ज्ञान प्राप्त करें, में दाखिला लेने पर विचार करें ' एडुरका से।

इस लेख में, मैं निम्नलिखित विषयों पर जाऊंगा:

• कोणीय सामग्री का परिचय
• कोणीय सामग्री स्थापना
• कोणीय सामग्री घटक
  • पथ प्रदर्शन
    1. टूलबार
    2. मेन्यू
  • प्रपत्र नियंत्रण
    1. फॉर्म फील्ड
    2. रेडियो बटन
• कोणीय सामग्री सी.डी.के.
  • पाठ्य से भरा

कोणीय सामग्री का परिचय

सामग्री एक डिजाइन भाषा के रूप में पेश किया गया था जिसे 2014 में Google द्वारा विकसित किया गया था। सामग्री डिजाइन एक उपकरण हैफ्रंट-एंड फ्रेमवर्क के लिए, जो आपकी मदद करता है दृश्य , गति , तथा बातचीत डिज़ाइन। यह आपको विभिन्न उपकरणों और विभिन्न स्क्रीन आकारों में अनुकूलन करने में भी मदद करता है। सबसे पहले, इन ऐप्स को और अधिक बनाने के लिए AngularJS को टैग किया गया था मोह लेने वाला और प्रदर्शन करते हैं और तेज । फिर, Google ने पूरी तरह से कोड को स्क्रैच से फिर से लिखा और जेएस को हटा दिया। , और इसे नाम दिया सितंबर 2016 में। बाद में, Google ने एंगुलर को मैटेरियल डिज़ाइन को टैग किया, जो उपयोग करता है , और इसका नाम कोणीय सामग्री रखा।

कोणीय सामग्री या उपयोगकर्ता-इंटरफ़ेस (UI) घटक आपको अपने एप्लिकेशन को एक में डिज़ाइन करने में मदद करते हैं संरचित तौर तरीका। वे उपयोगकर्ताओं को आकर्षित करते हैं और इसे बनाते हैं उपयोग करने के लिए आसान है आपके आवेदन में मौजूद तत्व या घटक। वे आपके अनुप्रयोगों को आकर्षक तरीके से डिजाइन करने में भी मदद करते हैं, अद्वितीय के साथ शैलियों तथा आकार । ये घटक आपके एप्लिकेशन को अधिक बनाने में मदद करते हैं सुसंगत , तेज , बहुमुखी और यहां तक ​​कि डिजाइन उत्तरदायी वेबसाइटों।

कोणीय सामग्री स्थापना

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

@ कोणीय / सामग्री जोड़ें

सबसे पहले, यह आपको एक प्रीबिल्ट थीम नाम या कस्टम थीम चुनने के लिए कहेगा।

आपको 'इंडिगो / पिंक' प्रीबिलीट थीम चुनने की आवश्यकता है जो आपके एप्लिकेशन को स्टाइल करने के लिए डिफ़ॉल्ट थीम है। आप 'कस्टम' थीम भी चुन सकते हैं ताकि आप अपनी थीम फ़ाइलों को अनुकूलित कर सकें जिसमें सभी सामान्य शैलियाँ शामिल हैं।

अगला, यह आपको स्थापित करने के लिए कहेगा हैमरजेज । HammerJS एक लोकप्रिय पुस्तकालय है, जिसका उपयोग कोणीय अनुप्रयोग में किया जाता है। यह विशेष रूप से मोबाइल एप्लिकेशन में स्वाइप, पैन, पिंच, रोटेट और कई अन्य जैसे स्पर्श इशारों के लिए समर्थन जोड़ता है।

आप या तो 'हां' या 'नहीं' चुन सकते हैं। जब आप मोबाइल एप्लिकेशन पर अपने एप्लिकेशन का उपयोग करते हैं, तो HammerJS उपयोगी हो सकता है। जैसा कि मोबाइल टच डिस्प्ले प्रदान करते हैं, ये इशारे अधिक उपयोगी होते हैं और आपके मोबाइल एप्लिकेशन में ट्रेंडी दिख सकते हैं।

अपनी पसंद चुनने के बाद, इसके बाद यह आपको सेट करने के लिए कहेगा ब्राउज़र एनिमेशन कोणीय सामग्री के लिए।

आपको 'हां' चुनने की आवश्यकता है ताकि आप अपने आवेदन पर एनिमेशन का उपयोग कर सकें। कोणीय एनिमेशन आपके एप्लिकेशन को अधिक मजेदार और उपयोग करने में आसान बनाता है। यह आपके ऐप और उपयोगकर्ता अनुभव को बेहतर बना सकता है जो उपयोगकर्ताओं का ध्यान आकर्षित करता है।

इसके बाद, यह आपके आवेदन में कोणीय सामग्री स्थापित करेगा।

कोणीय सामग्री घटक

जैसा कि पहले उल्लेख किया गया है, कोणीय सामग्री घटक कुछ भी नहीं हैं यूआई / यूएक्स डिजाइन घटक। इनमें विभिन्न प्रकार के घटक होते हैं जैसे कि फॉर्म कंट्रोल, नेविगेशन, बटन और संकेतक, पॉपअप और कई अन्य। ये घटक सामग्री डिज़ाइन विनिर्देश के अनुसार पैटर्न को लागू करने में आपकी सहायता करते हैं।

आगे बढ़ते हुए, आइए अपने एंगुलर एप्लिकेशन में इन घटकों को कैसे लागू करें, इसके कुछ उदाहरण देखें।

पथ प्रदर्शन

सबसे पहले, मैं नेविगेशन में घटकों पर चर्चा करूंगा।

• टूलबार

आपको निम्न कोड टाइप करना होगा app.component.html अपने आवेदन में टूलबार घटक का उपयोग करने के लिए फ़ाइल।

 कोणीय सामग्री ट्यूटोरियल 

कोणीय सामग्री से एक कंटेनर है जो हेडर और शीर्षक के लिए उपयोग किया जाता है। का रंग कंटेनर का उपयोग करके बदला जा सकता है रंग संपत्ति।डिफ़ॉल्ट रूप से, टूलबार वर्तमान थीम के आधार पर एक तटस्थ पृष्ठभूमि रंग का उपयोग करते हैं, अर्थात या तो प्रकाश या अंधेरा।आप तीन डिफ़ॉल्ट थीम चुन सकते हैं जो हैं: ‘प्राथमिक’ , ‘उच्चारण’ , या 'चेतावनी' ।इस टूलबार का उपयोग करने के लिए, आपको पहले इसे आयात करना होगा app.module.ts निम्नलिखित कमांड का उपयोग करके कोणीय सामग्री से फ़ाइल:

'@ कोणीय / सामग्री' से {MatToolbarModule} आयात करें

बाद में, आपको इस मॉड्यूल को भी जोड़ना होगा आयात: [] में स्थित अनुभाग app.module.ts फ़ाइल।

आयात: [BrowserModule, AppRoutModule, BrowserAnimationsModule, MatToolbarMalule],

Mat-Toolbar के लिए, आपको 'जोड़ना होगा' MatToolbarModule ”।

अब, निम्नलिखित कमांड का उपयोग करके अपनी परियोजना की सेवा दें:

की सेवा -o

यह आपके सिस्टम को आपके सिस्टम के डिफ़ॉल्ट ब्राउज़र पर खोलेगा जैसा कि नीचे दिखाया गया है:

यदि आप अपनी पसंद के अनुसार टूलबार का रंग बदलना चाहते हैं, तो आप इसे सीएसएस स्टाइलशीट की मदद से कर सकते हैं। मैं आपको एक उदाहरण दिखाता हूं।

सबसे पहले, आपको मिटाने की जरूरत है रंग से संपत्ति कंटेनर और फिर, निम्न टाइप करें सीएसएस में कोड app.component.css फ़ाइल।

मैट-टूलबार {बैकग्राउंड-कलर: / * कलर-ऑफ-योर-चॉइस * / कलर: / * टेक्स्ट-कलर * /}

अब, परिणाम देखने के लिए अपनी परियोजना की सेवा करें।

• मेन्यू

अगला, मैं मेनू घटक पर चर्चा करूंगा। आपको अपने में निम्न कोड टाइप करना होगा app.component.html फ़ाइल।

 कोणीय सामग्री ट्यूटोरियल मेनू सेटिंग्स मदद

आइए कुछ स्टाइल जोड़ें मेन्यू बटन। आपको अपने में निम्न कोड टाइप करना होगा app.component.css फ़ाइल।

.space {फ्लेक्स: 1 1 ऑटो} .btns {चौड़ाई: 100px ऊंचाई: 40px फ़ॉन्ट-आकार: बड़ी सीमा-त्रिज्या: 10px सीमा: 3px ठोस # 113c89 पृष्ठभूमि-रंग: lightcoral}

क्लास = 'स्पेस' 'टूलबार नाम' और 'मेनू विकल्प' के बीच रिक्ति जोड़ने के लिए उपयोग किया जाता है।

मामले में, आप CSS स्टाइलशीट से परिचित नहीं हैं, आप हमारे ब्लॉग को देख सकते हैं गहराई में जाना

टूलबार की तरह, उपयोग करने के लिए तथा कंटेनर, आपको आयात करने के लिए उपरोक्त प्रक्रिया का पालन करने की आवश्यकता है माटमेनुमोडुले तथा माटबटनमॉडल से कोणीय सामग्री और उन्हें अंदर जोड़ें आयात: [] में स्थित अनुभाग app.module.ts फ़ाइल।

आउटपुट प्रदर्शित करने के लिए अपनी परियोजना परोसें।

प्रपत्र नियंत्रण

अब, मैं प्रपत्र नियंत्रण में घटकों पर चर्चा करूंगा।

• फॉर्म फील्ड

जैसा कि नाम से पता चलता है, फॉर्म-फील्ड का उपयोग उपयोगकर्ता द्वारा दिए गए इनपुट के लिए किया जाता है। यह आमतौर पर किसी एप्लिकेशन या वेबसाइट में किसी उपयोगकर्ता के पंजीकरण के लिए उपयोग किया जाता है।

आपको निम्न कोड टाइप करना होगा app.component.html अपने आवेदन में फॉर्म-फील्ड घटक का उपयोग करने के लिए फ़ाइल।

 
प्रपत्र नियंत्रण
नाम

हमेशा की तरह, आपको आयात करने की आवश्यकता है MatFormFieldModule तथा MatInputModule और उन्हें अंदर जोड़ें आयात: [] में स्थित अनुभाग app.module.ts फ़ाइल। उपरोक्त कोड का उपयोग आम तौर पर नाम 'प्रथम नाम', 'अंतिम नाम', आदि के लिए किया जाता है। आप यहां तक ​​कि Validators का उपयोग कर सकते हैं और फ़ील्ड को अनिवार्य बना सकते हैं। उदाहरण के लिए, आप इसे ई-मेल फ़ील्ड के लिए उपयोग कर सकते हैं। आप पासवर्ड के लिए पाठ छिपा या अनहाइड कर सकते हैं। अपने संदर्भ के लिए, नीचे दिए गए कोड को देखें:

अपना ईमेल दर्ज करें {{getErrorMessage ()}} अपना पासवर्ड दर्ज करें {{छिपाएँ? 'दृश्यता_ऑफ़': 'दृश्यता'}}

अपने में app.component.css फ़ाइल, आपको निम्नलिखित कोड जोड़ना होगा:

.example- कंटेनर {पैडिंग-लेफ्ट: 50px}

अब, अपने में app.component.ts फ़ाइल, आपको आयात करने की आवश्यकता है फॉर्मकंट्रोल तथा मान्यवर से @ कोणीय / रूप निर्देशिका।

'@ कोणीय / रूपों' से आयात {फॉर्मकंट्रोल, वैध}

आपको निम्न वर्ग के अंदर त्रुटि प्रदर्शित करने के लिए पाठ जोड़ने की भी आवश्यकता है।

निर्यात वर्ग AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {रिटर्न this.email.hasError ('आवश्यक')? 'आपको एक मान दर्ज करना होगा': this.email.hasError ('ईमेल')? 'मान्य ईमेल नहीं': ''} छिपाएँ = सत्य}

उपरोक्त प्रक्रिया का उल्लेख करते हुए, आपको अपने में निम्न कोड टाइप करना होगा app.module.ts आवश्यक मॉड्यूल आयात करने के लिए फ़ाइल।

आयात {FormsModule, ReactiveFormsModule} ular @ कोणीय / रूपों ’से आयात {MatIconModule} से ang @ कोणीय / सामग्री’

बाद में, आपको इन मॉड्यूल को जोड़ने की आवश्यकता है आयात: [] अनुभाग।

• रेडियो बटन

रेडियो बटन आमतौर पर विभिन्न विकल्पों के बीच एक विकल्प चुनने के लिए उपयोग किया जाता है। आप संदर्भ के लिए निम्नलिखित कोड देख सकते हैं।

के लिये app.component.html फ़ाइल,

 
लिंग
पुरुष महिला

के लिये app.component.css फ़ाइल,

मैट-रेडियो-बटन {पैडिंग-लेफ्ट: 50px}

अब, आपको आयात करने की आवश्यकता है मटरादियोमॉडुले और इसमें जोड़ें आयात: [] में स्थित अनुभाग app.module.ts फ़ाइल।

बाद में, आपको आउटपुट प्रदर्शित करने के लिए अपनी परियोजना की सेवा करने की आवश्यकता है।

आगे बढ़ते हुए, मैं Angular Material CDK पर चर्चा करूंगा।

कोणीय सामग्री सी.डी.के.

सीडीके, के रूप में भी जाना जाता है घटक देव किट का पुस्तकालय है पूर्वनिर्धारित व्यवहार कोणीय सामग्री में, जो उपकरणों का एक सेट है जो सामान्य रूप से लागू होता है इंटरैक्शन पैटर्न तथा आवेदन सुविधाएँ । यह सामग्री डिजाइन के लिए विशिष्ट कोई स्टाइल नहीं है। आइए CDK का एक उदाहरण देखें।

• पाठ्य से भरा

पाठ क्षेत्र घटक पाठ इनपुट क्षेत्रों के साथ काम करने के लिए उपयोगिताओं प्रदान करता है। आप इनपुट का आकार बदलने के लिए टेक्स्ट फ़ील्ड पर CDK घटकों का उपयोग कर सकते हैं। आइए देखें कि इसे कैसे लागू किया जाए।

के लिये app.component.html फ़ाइल,

 
कोणीय सामग्री सी.डी.के.
फ़ॉन्ट का आकार 10px 12px 14px 16px 18px 20px टेक्स्टरो को स्वतः-आकार दें

के लिए app.component.ts फ़ाइल, आपको पहले आवश्यक घटकों को आयात करना होगा।

आयात {CdkTextareaAutosize} '@ angular / cdk / text-field' आयात {NgZone, ViewChild} से '@ कोणीय / कोर' आयात {take} से 'rxjn / ऑपरेटरों' से।

अब, आपको कक्षा के अंदर निम्न कोड टाइप करना होगा।

git और github के बीच अंतर

निर्यात वर्ग AppComponent {कंस्ट्रक्टर (निजी _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize ट्रिगर () {this._ngZone.onStable.pipe (ले (1))। ) = & ampampampgt इस .autosize.resizeToFitContent (सच))}}

अगला, आपको आयात करने की आवश्यकता है मैटसेलेमॉड्यूल और इसमें जोड़ें आयात: [] में स्थित अनुभाग app.module.ts फ़ाइल।

अंत में, आपको आउटपुट प्रदर्शित करने के लिए अपनी परियोजना की सेवा करने की आवश्यकता है।

यह निष्कर्ष नहीं है और कोणीय सामग्री में कई अन्य घटक हैं। आप से उन्हें संदर्भित कर सकते हैं आधिकारिक वेबसाइट कोणीय सामग्री की।

इसके साथ ही मैं अपने ब्लॉग को समाप्त करना चाहूंगा। मुझे उम्मीद है कि आप कोणीय सामग्री के मूल सिद्धांतों के बारे में स्पष्ट हैं।यदि आपके पास इस लेख के बारे में कोई संदेह या प्रश्न हैं, तो उन्हें नीचे टिप्पणी अनुभाग में पोस्ट करने में संकोच न करें।

यदि आप वह सब सीखना चाहते हैं जो आपने अभी इस ब्लॉग से सीखा है, और अधिक के बारे में कोणीय , और एक प्रवीण कोणीय डेवलपर की ओर अपने कैरियर को गियर करें, फिर हमारे लिए नामांकन पर विचार करें ' ।

क्या आप हमसे कोई प्रश्न पूछना चाहते हैं? कृपया इस 'कोणीय सामग्री' ब्लॉग के टिप्पणी अनुभाग में उल्लेख करें और हम जल्द से जल्द आपके पास वापस आ जाएंगे।