Build a Material Design app with Angular 2

Sep 12, 2025

कैसे करना है

कोणीय सामग्री एक यूआई घटक ढांचा है जो कोणीय 2 के लिए Google के भौतिक डिजाइन विनिर्देश को लागू करता है - कोणीय के नए, तेज़ कार्यान्वयन, टाइपस्क्रिप्ट में लिखित। यद्यपि अभी भी अल्फा में, कोणीय सामग्री पहले से ही भौतिक डिजाइन के आधार पर पुन: प्रयोज्य और सुलभ यूआई घटकों का एक सेट प्रदान करती है।

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

इस ट्यूटोरियल में हम कुछ हस्ताक्षर सामग्री डिजाइन तत्वों के साथ एक साधारण टू-डू ऐप बनाने के लिए कोणीय 2 का उपयोग करने जा रहे हैं। [2 9] यहां स्रोत फ़ाइलें प्राप्त करें

।

सेट अप करें

प्रारंभिक वातावरण की स्थापना करना मुश्किल हो सकता है। वहाँ है एक [3 9] कोणीय 2 बीज

उपलब्ध, साथ ही एक [3 9] कोणीय 2-स्टार्टर । हालांकि, कुछ भी बेहतर है: के साथ [3 9] कोणीय आप अपने कोणीय 2 प्रोजेक्ट को एक कमांड के साथ कॉन्फ़िगर कर सकते हैं।

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

कोणीय सीएलआई एनपीएम पैकेज के रूप में उपलब्ध है, इसलिए आपको अपनी मशीन पर वैश्विक स्तर पर नोड और एनपीएम स्थापित करने की आवश्यकता होगी [3 9] एनपीएम इंस्टॉल-जी कोणीय-सीएलआई

। अब एक नया कोणीय 2 ऐप बनाएं [3 9] एनजी नई सामग्री 2-डू । आपको थोड़ा इंतजार करना होगा, क्योंकि यह आवश्यक फ़ाइलों को उत्पन्न करने के बाद, यह एक गिट रेपो को आरंभ करता है और एक करता है [3 9] एनपीएम स्थापित करें सभी आवश्यक मॉड्यूल डाउनलोड करने के लिए [3 9] node_modules / । पर एक नज़र डालें [3 9] Package.json और वहां मॉड्यूल और स्क्रिप्ट से परिचित हो जाएं।

अब आपने एक नया कोणीय 2 एप्लिकेशन बनाया है जो आधिकारिक सर्वोत्तम प्रथाओं का पालन करता है।

सामग्री डिजाइन जोड़ें

डिफ़ॉल्ट ऐप भौतिक डिजाइन के बारे में कुछ भी नहीं जानता है (एक निगरानी मुझे यकीन है), इसलिए हमें इसे स्वयं जोड़ना होगा।

प्रकाशित कोणीय 2 सामग्री डिजाइन संकुल की एक सूची है [3 9] @ कोणीय 2-सामग्री

पुस्तकालय। इस उदाहरण में हम उपयोग करने जा रहे हैं [3 9] कोर (सभी कोणीय सामग्री 2 ऐप्स के लिए आवश्यक), साथ ही साथ [3 9] बटन , [3 9] कार्ड , [3 9] चेक बॉक्स , [3 9] आइकन , [3 9] इनपुट , [3 9] सूची तथा [3 9] उपकरण पट्टी :

npm install --save @angular2-material/{core,button,card,checkbox,icon,input,list,toolbar}@2.0.0-alpha.5

काम करने के लिए विक्रेता बंडल के लिए, हमें जोड़ने की जरूरत है [3 9] @ कोणीय 2-सामग्री / ** / *

की सरणी के लिए [3 9] vendornpmfiles में [3 9] कोणीय-cli-build.js । हमें रास्ता भी जोड़ने की जरूरत है [3 9] @ कोणीय 2-सामग्री तक [3 9] एमएपीएस वस्तु:

 कॉन्स मैप: किसी भी = {
  '@ कोणीय 2-सामग्री': 'विक्रेता / @ angular2-सामग्री'
};

SystemJS को पता है कि प्रत्येक पैकेज की मुख्य फ़ाइलों को इंगित करके नए मॉड्यूल को कैसे संसाधित किया जाए:

 कॉन्स पैकेज: किसी भी = {};

// यहां अपने किसी भी भौतिक घटकों के नाम रखो
const materialpkgs: स्ट्रिंग [] = ['कोर', 'बटन', 'कार्ड', 'चेकबॉक्स',
'आइकन', 'इनपुट', 'सूची', 'टूलबार'];

materialpkgs.foreach ((pkg) = & gt; {
  पैकेज [`@ rogular2-सामग्री / $ {pkg}`] = {मुख्य: `$ {pkg} .js`};
});

अब इसमें सामग्री डिजाइन आइकन फ़ॉन्ट लोड करने का समय है [3 9]

का [3 9] src / index.html । कोई भी फ़ॉन्ट काम करेगा, लेकिन हम मानक सामग्री डिजाइन आइकन का उपयोग कर रहे हैं: [1 9 8] & lt; लिंक href = "https://fonts.googleapis.com/icon?family=material+icons" rel = "स्टाइलशीट" & gt;

एक एमडी संवाद बनाएँ

अब हम अपने टू-डू ऐप में भौतिक डिजाइन के साथ काम कर सकते हैं। वर्तमान में कोणीय 2 सामग्री डिजाइन से गायब घटकों में से एक एक संकेत या संवाद है, इसलिए हमारे पहले कार्य के लिए हम एक बना देंगे!

आइए एक सामग्री डिजाइन कार्ड, टूलबार, एक इनपुट और कुछ बटन का उपयोग करके एक नया घटक बनाएं। में [3 9] SRC / App

आपके रेपो के फ़ोल्डर, प्रकार [3 9] एनजी जेनरेट संवाद संवाद । यह एक नया उत्पन्न करता है [3 9] संवाद में [3 9] SRC / APP / DIALOG , और एक बैरल को जोड़ता है [3 9] सिस्टम- config.ts तो systemjs जानता है कि इसे कैसे लोड किया जाए।

यदि आप उत्पन्न को देखते हैं [3 9] dialog.component.ts

फ़ाइल, आप देखेंगे कि पहली पंक्ति यह है: [3 9] आयात {घटक, oninit} से [3 9] '@ कोणीय / कोर'; । [3 9] अंग कोणीय के मुख्य भवन खंडों में से एक है, और [3 9] Oninit यह एक इंटरफेस में से एक है। हालांकि, नेस्टेड घटकों के बीच संचार तक पहुंचने के लिए, साथ ही ऊपर वर्णित भौतिक डिजाइन घटकों के बीच, हमें इनपुट आयात करने की आवश्यकता है, [3 9] उत्पादन तथा [3 9] घटना से [3 9] @ कोणीय / कोर; तथा [3 9] म्डकार्ड , [3 9] Mdinput , [3 9] Mdtoolbar तथा [3 9] एमडीबटन में उनके संबंधित मॉड्यूल से [3 9] @ कोणीय 2- सामग्री पुस्तकालय।

इन भौतिक घटकों को प्रस्तुत करने के लिए, हमें निर्देशों को इंजेक्ट करने की आवश्यकता है [3 9] संवाद

आवश्यकता है। हम निम्नलिखित निर्देशों को जोड़ देंगे [3 9] @अवयव मेटाडाटा:

 Templeateurl: 'dialog.component.html',
निर्देश: [mdcard, mdtoolbar, mdinput, mdbutton],
StyleUrls: ['dialog.component.css']

हम फिर एक नंबर की घोषणा करते हैं [3 9] @Input

चर ( [3 9] ओकटेक्स्ट , [3 9] रद्द और इसी तरह) जो हमें संवाद की सामग्री को परिभाषित करने की अनुमति देता है। हमें एक जोड़ने की भी आवश्यकता है [3 9] @Output उत्सर्जक जो हमें संवाद बंद होने पर मूल घटक में मान के साथ एक फ़ंक्शन को ट्रिगर करने की अनुमति देता है।

अब हम जेनरेट किए गए कन्स्ट्रक्टर को बदल सकते हैं [3 9] dialog.component.ts

निम्नलिखित कोड के साथ:

 कंस्ट्रक्टर () {
 this.oktext = 'ओके';
 this.canceltext = 'रद्द करें';
}

Emitvalue (मान) {
 this.valueemitted.emit (मान);
}

साथ ही उपयोग का उपयोग [3 9] @Input

हमारे अंदर चर [3 9] संवाद के अंदर [3 9] dialog.component.html टेम्पलेट, द [3 9] इनपुट हमें उपयोगकर्ता से इनपुट स्वीकार करने की अनुमति देता है:

 & lt; md-इनपुट वर्ग = "पूर्ण-चौड़ाई" [प्लेसहोल्डर] = "प्लेसहोल्डर"
        [(ngmodel)] = "मान" #dialoginput
        (keyup.enter) = "emitvalue (मान)"
        (keyup.escape) = "emitvalue (शून्य)" & gt; & lt; / md-इनपुट & gt;

[3 9] एमडी बटन

उपयोगकर्ता को 'ठीक', 'रद्द करें' पर क्लिक करने दें या जो भी आप इन बटनों को लेबल करने का निर्णय लेते हैं: [1 9 8] & lt; बटन एमडी-बटन (क्लिक करें) = "Emitvalue (शून्य)" रंग = "प्राथमिक" & gt; {{conceeltext}} & lt; / बटन & gt; & lt; बटन एमडी-उठाया-बटन (क्लिक करें) = "Emitvalue (मान)" रंग = "प्राथमिक" & gt; {{OKTEXT}} & lt; / बटन & gt;

नोटिस [3 9] तनाव के स्थिति में

इवेंट हैंडलर, जो एंटर या एस्केप कुंजी दबाए जाने पर चीजों का ख्याल रखते हैं। ये हैंडलर समान हैं [3 9] क्लिक के लिए घटना हैंडलर [3 9] रद्द तथा [3 9] ओकटेक्स्ट । एस्केप रद्द करने के समान ही है [3 9] (Emitvalue (शून्य)) , और टक्कर मारने के समान परिणाम के रूप में एक ही परिणाम होगा [3 9] (Emitvalue (मान)) । यह हमें उपयोगकर्ता को एक के लिए संकेत देने की अनुमति देता है [3 9] मूल्य के माध्यम से [3 9] इनपुट , और उत्सर्जित आउटपुट प्राप्त करते हैं।

हम कई भौतिक डिजाइन घटकों के उदाहरण देख सकते हैं: [3 9] एमडी कार्ड

, [3 9] एमडी-बटन , और इसी तरह। हमें कुछ सीएसएस जोड़ने की भी आवश्यकता है [3 9] dialog.component.css लेआउट को प्राप्त करने के लिए हम चाहते हैं - आप गिटहब रेपो के साथ पूर्ण कोड देख सकते हैं।

अब इसे जोड़ दें [3 9] संवाद

सेवा मेरे [3 9] material2-do.component.html यह देखने के लिए कि यह कैसा दिखता है:

 & lt; ऐप-डायलॉग [शीर्षक] = "'संवाद प्रॉम्प्ट'"
  [टेम्पलेट] = "'यह हमारी नई सामग्री डिजाइन आधारित घटक है:'"
  [प्लेसहोल्डर] = "'यहां टेक्स्ट दर्ज करें'"
  [OKTEXT] = "'हाँ'"
  [conceltext] = "'नहीं'"
  [value] = "'स्टार्टिंग टेक्स्ट'"
  (VALUESMITED) = "लॉग ($ EVER)"
  [showprompt] = "सत्य" & gt;
& lt; / ऐप-संवाद & gt;

ध्यान दें कि हमारे पास सभी के लिए शाब्दिक तार हैं [3 9] @Inputs

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

हमारे पास एक उत्सर्जित भी है [3 9] @Output

। यह संवाद को सरल और बेहद विन्यास योग्य बनाता है। अधिकांश इनपुट छोड़े जाने पर खाली तारों के लिए चूक गए होंगे।

चलो संशोधित करें [3 9] Material2docomponent

। हमें संवाद को आयात करने और इसे निर्देश के रूप में घोषित करने की आवश्यकता है, अन्यथा [3 9] Material2docomponent इसे प्रस्तुत करने में सक्षम नहीं होगा। हम लॉग फ़ंक्शन भी जोड़ देंगे:

 लॉग (पाठ) {
   Console.log (पाठ);
 }

आइए हमारे हैंडवर्क पर नज़र डालें। आप ऐप को सेवा दे सकते हैं (डिफ़ॉल्ट पोर्ट 4200 है) चलकर [3 9] एनपीएम रन-स्क्रिप्ट शुरू

, जो बदले में चलता है [3 9] एनजी सर्वर । यदि आप कंसोल खोलते हैं, तो आप देख सकते हैं कि क्या लॉग है: जब आप 'हां' पर क्लिक करते हैं तो इनपुट की सामग्री उत्सर्जित होती है, और [3 9] शून्य जब आप 'नहीं' पर क्लिक करते हैं तो उत्सर्जित होता है।

अब हम इस नए का उपयोग करने के लिए तैयार हैं [3 9] संवाद

हमारे टू-डू ऐप बनाने के लिए।

मुख्य ऐप बनाएँ

हम मुख्य ऐप के लिए निम्नलिखित एमडी घटकों का उपयोग करने जा रहे हैं: [3 9] उपकरण पट्टी

, [3 9] सूची , [3 9] सामग्री सूचीबद्ध करें , [3 9] चेक बॉक्स , [3 9] बटन , [3 9] आइकन , [3 9] आइकन रजिस्ट्री , और इसके आश्रित, [3 9] Http_provider , कोणीय HTTP लाइब्रेरी से। इसलिए इनके आयात अनुभाग में जोड़े जाने की जरूरत है [3 9] Material2docomponent ।

एक बार फिर, इन घटकों को प्रस्तुत करने में सक्षम होने के लिए, हमें उन्हें शामिल करने की आवश्यकता है [3 9] @अवयव

मेटाडाटा [3 9] निर्देशों के साथ सरणी [3 9] संवाद , जिसे हमने अभी जोड़ा:

 निर्देश: [एमडीकार्ड, एमडीटूलबार, एमडीएलआईएसटी, एमडीएलआईटीईटीईएम, एमडीचेकबॉक्स, एमडीबटन, एमडीआईसीओएन, डायलॉग कॉम्पोनेंट],

तक पहुंच प्राप्त करने के लिए [3 9] Mdiconegrystry

, हमें इसके साथ इंजेक्ट करने की आवश्यकता है [3 9] Http_providers , के माध्यम से [3 9] @अवयव मेटाडाटा [3 9] प्रदाताओं सरणी:

 प्रदाता: [mdiconegistry, http_providers],

अब हम अपने का लाभ उठाते हैं [3 9] संवाद

, एक साधारण टू-डू एप्लिकेशन के लिए पर्याप्त तर्क जोड़ रहा है। [3 9] tododialog को हमारे संवाद को खोलने के लिए कहा जाता है, या तो कार्य को संपादित करने के लिए ( [3 9] ऐसा करने के लिए ) या [3 9] शून्य अगर हम एक नया बना रहे हैं।

हमने एक नए कार्य के लिए डिफ़ॉल्ट चर स्थापित किए हैं, या यदि हम एक कार्य संपादित कर रहे हैं इसके बजाय हम उन्हें तदनुसार बदलते हैं। हम फिर दिखाते हैं [3 9] संवाद

सेट करके [3 9] शोडियालोग के लिए चर [3 9] सच :

 TODODIALOG (TODO = NULL) {
    this.okbuttontext = 'कार्य बनाएं';
    thisfieldvalue = '';
    that.editingtodo = todo;
    अगर (टोडो) {
      thisfieldvalue = todo.title;
      this.okbuttontext = 'कार्य संपादित करें';
    }
    howdialog = सत्य;
  }

[3 9] Updatetodo

जब हम इसे बंद करना चाहते हैं तो फ़ंक्शन कहा जाता है। अन्य कार्य ( [3 9] एडिटोडो , [3 9] Addtodo , [3 9] hidedialog ) के लिए सहायक तरीके हैं [3 9] Updatetodo ।

 Updatetodo (शीर्षक) {
    यदि (शीर्षक) {
      शीर्षक = title.trim ();
      IF (it.editingtodo) {
        this.edittodo (शीर्षक);
      } अन्य {
        this.addtodo (शीर्षक);
      }
    }
    इस.शेडियलॉग ();
  }

में [3 9] material2-do.component.html

हमने अपना आवेदन दिया है [3 9] एमडी-टूलबार जहां हमने शीर्षक दिया है, और एक [3 9] एमडी-आइकन बुला हुआ [3 9] जोड़ना (जो हमारे फ़्लोटिंग एक्शन बटन (एफएबी) के लिए एक प्लस साइन की तरह दिखता है), जो हमें एक नया कार्य बनाने की अनुमति देता है: [1 9 8] & lt; बटन एमडी-फैब क्लास = "फैब-ऐड" (क्लिक करें) = "Tododialog ()" & gt; & lt; md-icon & gt; जोड़ें & lt; / md-icon & gt; & lt; / बटन & gt;

हम प्रयोग करते हैं [3 9] एमडी कार्ड-सामग्री

एक धारण करने के लिए [3 9] मध्यम सूची और एक [3 9] * ngfor इसके माध्यम से, और प्रदर्शित करने के लिए, हमारे [3 9] करने के लिए सूची सरणी के रूप में [3 9] एमडी-सूची-आइटम :

 & lt; md-list-item * ngfor = "todolist के todo; सूचकांक = सूचकांक" & gt;

[3 9] एमडी-चेकबॉक्स

हमें हमारी सूची में वस्तुओं पर टिक करने में सक्षम बनाता है। और हमारे पास दो हैं [3 9] एमडी-मिनी-फैब बटन हम अपने कार्य को हटाने और संपादित करने के लिए उपयोग कर सकते हैं: [3 9] md-icons delete_forever तथा [3 9] MODE_EDIT : [1 9 8]& lt; बटन एमडी-मिनी-फैब (क्लिक करें) = "निकालें (इंडेक्स)" रंग = "प्राथमिक" & gt; & lt; md-icon & gt; delete_forever & lt; / md-icon & gt; & lt; / बटन & gt; & lt; बटन एमडी-मिनी-फैब (क्लिक करें) = "Tododialog (TODO)" रंग = "प्राथमिक" [अक्षम] = "todo.completed" & gt; & lt; md-icon & gt; move_edit & lt; / md-icon & gt; & lt; / बटन & gt;

थोड़ा सीएसएस के साथ, ये रोलओवर (या क्लिक) तक छिपे रहते हैं। आप रेपो में कोड देख सकते हैं।

आगे जा रहा है

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

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

[3 9] संबंधित आलेख:

[39 9]

[3 9] कोणीय 4 में नया क्या है?

[3 9] कोणीय में एक पूर्ण-पृष्ठ वेबसाइट कैसे बनाएं

[3 9] Angularjs के साथ एक डेटा डैशबोर्ड का निर्माण

Build a Material Design app with Angular 2

सेट अप करें

सामग्री डिजाइन जोड़ें

एक एमडी संवाद बनाएँ

मुख्य ऐप बनाएँ

आगे जा रहा है

कैसे करना है - सर्वाधिक लोकप्रिय लेख

एक माउस नियंत्रित लंबन पृष्ठभूमि प्रभाव बनाएं

Build prototypes with Adobe XD

How to create a super-realistic fantasy creature

A guide to Google's web tools

Create clouds with FumeFX for 3ds Max

Keep perfect version control with Abstract

How to master creature anatomy

Get creative with portraits and Face-Aware Liquify

श्रेणियाँ