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

Sep 16, 2025
कैसे करना है
  • [1 1] पृष्ठ 2
  • [1 1] पेज 3
  • [1 1] पृष्ठ 4

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

    यह एक श्रृंखला में पहला भाग है कि कोणीय में पूर्ण-पृष्ठ एनिमेटेड वेबसाइट कैसे बनाएं। हम एक पूर्ण-पृष्ठ वेबसाइट बनाकर शुरू करेंगे, और फिर इसे निम्न किश्त में एनिमेट करेंगे।

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

    यहां (और नीचे सबसे अच्छी कीमतें)। [22 9] 01. एक परियोजना बनाएँ

    ऐसे कई हिस्सों में हैं जो एक गैर-तुच्छ वेब अनुप्रयोग में जाते हैं। आपके आवेदन की क्या निर्भरताएँ हैं? आप इसे स्थानीय रूप से कैसे चलाने जा रहे हैं? आप इसका परीक्षण कैसे कर रहे हैं? आप अपनी संपत्ति को कैसे बंडल करने जा रहे हैं

    शुक्र है, इन तत्वों की कंपोजिटिंग की जटिल प्रक्रिया को दृष्टि से बाहर कर दिया जाता है, [1 1] @ कोणीय / सीएलआई

    । हमारे टर्मिनल से केवल कुछ आदेशों में हम अपने साथ काम करने के लिए एक पूर्ण कार्यात्मक कोणीय एप्लिकेशन तैयार कर सकते हैं।

    सीएलआई के साथ काम करने का पहला कदम इसे स्थापित करना है। इसके लिए, नीचे दिए गए आदेश का उपयोग करें: 

    npm install -g @angular/cli

    एक बार सीएलआई स्थापित हो जाने के बाद, कमांड लाइन से हम उस फ़ोल्डर पर नेविगेट कर सकते हैं जिसे हम अपनी परियोजना को स्थापित करना चाहते हैं। वहां से हम दौड़ेंगे [1 1] नया

    हमारी परियोजना के नाम से। यह उसी नाम के साथ एक फ़ोल्डर बनाएगा, जिसे हम प्रोजेक्ट पूरा होने के बाद नेविगेट करेंगे। 
     सीडी & lt; आपकी परियोजनाओं-फ़ोल्डर और जीटी;
एनजी नई कोणीय-एनिमेशन-साइट
सीडी कोणीय-एनिमेशन-साइट

    और वह है! हमारा कोणीय आवेदन चलाने के लिए तैयार है। आप या तो अपना आवेदन शुरू कर सकते हैं [1 1] एनपीएम शुरू

    या [1 1] एनजी सेवा । मैं उपयोग करना पसंद करता हूं [1 1] एनपीएम शुरू क्योंकि यह अधिक पारंपरिक है और मुझे अतिरिक्त आदेशों में जोड़ने में सक्षम बनाता है। फिर आप नेविगेट कर सकते हैं [1 1] http: // लोकलहोस्ट: 4200 आवेदन चलाने के लिए।

    The stock Angular CLI application running

    स्टॉक कोणीय सीएलआई आवेदन चल रहा है
    [22 9] 02. एनिमेशन और कोणीय सामग्री शामिल करें

    क्योंकि हमें सुंदर चीजें पसंद हैं, हम जोड़कर और स्थापित करके हमारे आवेदन में कुछ छोटे जोड़ बनाने जा रहे हैं [1 1] @ कोणीय / एनिमेशन

    तथा [1 1] @ कोणीय / सामग्री पैकेज: 
     एनपीएम I - वेसव @ कोणीय / सामग्री @ कोणीय / एनिमेशन

    हम उन्हें जोड़कर इन निर्भरताओं के बारे में कोणीय जान सकते हैं [1 1] app.module.ts

    फ़ाइल। हम कोणीय सामग्री बटन, कार्ड और टूलबार का उपयोग करने जा रहे हैं, इसलिए हम उनके संबंधित मॉड्यूल के साथ ही आयात करेंगे [1 1] Browseranimationsmodule । 
     // ऐप / app.module.ts
...
'@ कोणीय / सामग्री' से {mdbuttonmodule, mdcardmodule, mdtoolbarmodule} आयात करें;
'@ कोणीय / प्लेटफार्म-ब्राउज़र / एनिमेशन' से {browseranimationsmodule} आयात करें;

    फिर हम उन्हें जोड़ सकते हैं [1 1] आयात

    हमारे साथ सरणी [1 1] Ngmodule घोषणा। 
     // ऐप / app.module.ts
...
'@ कोणीय / सामग्री' से {mdbuttonmodule, mdcardmodule, mdtoolbarmodule} आयात करें;
'@ कोणीय / प्लेटफ़ॉर्म-ब्राउज़र / एनिमेशन' से {browseranimationsmodule} आयात करें;

@Ngmodule ({
  ...
  आयात: [
    ...
    Browseranimationsmodule,
    Mdtoolbarmodule,
    Mdbuttonmodule,
    Mdcardmodule
  ],
  ...
})

    और एक अंतिम जोड़ के लिए, हम इंडिगो गुलाबी थीम को हमारे में आयात करेंगे [1 1] styles.css

    फ़ाइल। 
     / * styles.css * /
@import '~ @ ganular/material/prebuilt-themes/indigo-pink.css';

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

    [22 9] 03. एक पृष्ठ घटक का परिचय दें

    चूंकि हम कोणीय के साथ एक वेबसाइट बना रहे हैं, इसलिए हमें अपने पृष्ठों को प्रदर्शित करने के लिए एक तंत्र पेश करने की आवश्यकता होगी। कोणीय में, एक आवेदन का परमाणु बिल्डिंग ब्लॉक घटक है। अच्छी तरह से परिभाषित, encapsulated घटकों के साथ हमारे आवेदन को वास्तुकला करके, हम आसानी से कार्यक्षमता का पुन: उपयोग करने में सक्षम हैं, साथ ही साथ नए घटकों को पेश करके नई कार्यक्षमता लिखें।

    जेनरेटर समर्थन के साथ सीएलआई जहाज बॉक्स के ठीक बाहर समर्थन करते हैं, और यही वह है जो हम अपने पेज घटक को बनाने के लिए उपयोग करते हैं। हम नीचे दिए गए आदेश को चलाकर हमारे पृष्ठ घटक उत्पन्न कर सकते हैं (द [1 1] जी

    कमांड के लिए शॉर्टेंड है [1 1] उत्पन्न )। 
     एनजी जी घटक पृष्ठ

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

    सीएलआई में एक फ़ोल्डर उत्पन्न करेगा [1 1] एसआरसी

    नामित निर्देशिका [1 1] पृष्ठ एक HTML, CSS और टाइपस्क्रिप्ट फ़ाइल के साथ-साथ एक स्पेक फ़ाइल के साथ। हमारे में [1 1] पृष्ठ। component.ts फ़ाइल, हमारे पास एक घटक की मूल संरचना है। हमारा घटक हमारे टेम्पलेट और शैली फ़ाइलों को संदर्भित करता है [1 1] @ मेटाडेटा और हमारे पास है [1 1] निर्माता तथा [1 1] Ngonit तरीके बाहर stubbed। 
     // ऐप / पेज / पेज component.ts

'@ कोणीय / कोर' से {घटक, oninit} आयात करें;

@ कॉम्पोनेंट ({
  चयनकर्ता: 'ऐप-पेज',
  templateurl:'/page.component.html ',
  StyleUrls: ['./page.component.css']})
निर्यात वर्ग pagecomponent लागू {{

  कंस्ट्रक्टर () {}

  ngoninit () {}
}

    हमारे घटक उत्पन्न करने के साथ, सीएलआई भी हमारे संशोधित करेगा [1 1] app.module.ts

    एक शामिल करने के लिए [1 1] पापा में प्रवेश [1 1] घोषणाओं सरणी। इसका मतलब है कि हमारा पृष्ठ घटक अब पूरे मॉड्यूल में उपलब्ध है। 
     // ऐप / app.module.ts

@Ngmodule ({
  घोषणा: [
    AppComponent,
    पापा
  ],
  ...
})

    एक सैनिटी चेक के रूप में, हम अपने में हॉप कर सकते हैं [1 1] app.component.html

    फ़ाइल और जोड़ें [1 1] & lt; ऐप-पेज & gt; & lt; / app-page & gt; नीचे तक। ध्यान दें कि तत्व टैग हम का उपयोग कर रहे हैं [1 1] चयनकर्ता हमारी संपत्ति में परिभाषित [1 1] @ मेटाडाटा। [35 9] & lt;! - ऐप / app.component.html - & gt; & lt; h1 & gt; {{शीर्षक}} & lt; / h1 & gt; & lt; ऐप-पेज & gt; & lt; / ऐप-पेज & gt;

    The page component rendering in our main application component

    हमारे मुख्य आवेदन घटक में पेज घटक प्रतिपादन
    [22 9] 04. अपना पृष्ठ घटक बनाएं

    हमारे पृष्ठ घटक जिंदा और अच्छी तरह से, हम इसे बना सकते हैं ताकि यह वास्तविक वेबपृष्ठ की तरह दिखने लगे। हम एक परिचय देंगे [1 1] पृष्ठ

    के साथ वस्तु [1 1] शीर्षक , [1 1] उपशीर्षक , [1 1] सामग्री , तथा [1 1] छवि गुण। 
     // ऐप / पेज / पेज component.ts

निर्यात वर्ग pagecomponent लागू {{
  पृष्ठ = {
    शीर्षक: 'होम',
    उपशीर्षक: 'स्वागत घर!',
    सामग्री: 'कुछ होम सामग्री।',
    छवि: 'संपत्ति / bg00.jpg'
  };

  कंस्ट्रक्टर () {}

  ngoninit () {}
}

    [39 9] The styled page component with Angular Material

    कोणीय सामग्री के साथ स्टाइल पेज घटक

    हम अपने टेम्पलेट को बाध्य करने के लिए अपडेट करेंगे [1 1] पृष्ठ

    वस्तु। एक छवि तत्व है जो अंततः पूरी ब्राउज़र विंडो को भरने के लिए बढ़ाया जाएगा। हम एक कोणीय सामग्री कार्ड घटक में भी जोड़ने जा रहे हैं कि हम बाकी को बाध्य करेंगे [1 1] पृष्ठ करने के लिए वस्तु। [35 9] & lt;! - ऐप / पेज / पेज component.html - & gt; & lt; img class = "fullbg" [src] = "page.image" & gt; & lt; एमडी कार्ड & gt; & lt; एमडी-कार्ड-हेडर और जीटी; & lt; एमडी-कार्ड-शीर्षक & gt; & lt; h1 & gt; {{page.title}} & lt; / h1 & gt; & lt; / md-card-title & gt; & lt; md-card-subtitle & gt; {{page.subtitle}} & lt; / md-card-subtitle & gt; & lt; / md-card-header & gt; & lt; एमडी-कार्ड-सामग्री और जीटी; {{पृष्ठ सामग्री}} & lt; / md-card-content & gt; & lt; / md-card & gt;

    हमारा पृष्ठ घटक बहुत बेहतर दिखना शुरू कर रहा है! हमारा अगला कदम कई पृष्ठों और उनके बीच नेविगेट करने की क्षमता में जोड़ना है।

    [1 1] पृष्ठ 2: कई पृष्ठों को कैसे बनाएं

    • 1
    • [1 1] 2
  • [1 1] 3
  • [1 1] 4

    • वर्तमान पृष्ठ: पृष्ठ 1

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

    लिनो प्रिंटमेकिंग: एक परिचय

    कैसे करना है Sep 16, 2025

    (छवि क्रेडिट: मेग Buick) [1 9] लिनो प्रिंटमेकिंग रा�..

    How to kitbash on the go with Shapr3D

    कैसे करना है Sep 16, 2025

    (छवि क्रेडिट: एडम dewhirst) [1 9] Shapr3D किटबाशिंग के लिए �..

    How to use Smart layers in Photoshop

    कैसे करना है Sep 16, 2025

    एक उदाहरण में दोहराए जाने वाले डिज़ाइन और पैटर्न ..

    Create clouds with FumeFX for 3ds Max

    कैसे करना है Sep 16, 2025

    यह चरण-दर-चरण मार्गदर्शिका यथार्थवादी बादलों के �..

    3 tips for crafting stunning print promotional material

    कैसे करना है Sep 16, 2025

    एक तेजी से डिजिटल दुनिया में, चालाकी से तैयार प्र�..

    Paint a classic fairy tale scene with Procreate

    कैसे करना है Sep 16, 2025

    Procreate जल्दी से मेरे गो-टू डिजिटल पेंटिंग ऐप बन गया ह�..

    अपने स्केचिंग कौशल को तेज करें

    कैसे करना है Sep 16, 2025

    स्केच डिजिटल उत्पादों को बनाने में शामिल किसी के लिए एक सरल लेकिन शक�..

    How to create manga-style hair in motion

    कैसे करना है Sep 16, 2025

    सीख रहा हूँ मंगा कैसे आकर्षित करें कोई आसान काम नहीं है। तो, जितना स�..

    श्रेणियाँ