Angular ट्यूटोरियल
शुरुआत एंगुलर से हुई
खोज…
टिप्पणियों
कोणीय (जिसे आमतौर पर " कोणीय 2+ " या " कोणीय 2 " कहा जाता है) एक टाइपस्क्रिप्ट -आधारित ओपन-सोर्स फ्रंट-एंड वेब फ्रेमवर्क है जिसकी अगुवाई में कोणीय टीम गूगल और व्यक्तियों और निगमों के एक समुदाय द्वारा सभी को संबोधित करती है। जटिल वेब अनुप्रयोगों का निर्माण करते समय डेवलपर के वर्कफ़्लो के कुछ हिस्से। एंगुलर उसी टीम से पूर्ण पुनर्लेखन है जिसने एंगुलरजेएस का निर्माण किया। ¹
फ्रेमवर्क में कई पुस्तकालय होते हैं, जिनमें से कुछ कोर (उदाहरण के लिए @ कोणीय / कोर ) और कुछ वैकल्पिक ( @ कोणीय / एनिमेशन ) होते हैं।
आप रचना द्वारा कोणीय अनुप्रयोग लिखने एचटीएमएल टेम्पलेट्स Angularized मार्कअप के साथ, लेखन घटक कक्षाएं उन टेम्पलेट्स प्रबंधन करने के लिए, में आवेदन तर्क जोड़ने सेवाओं , और में घटकों और सेवाओं मुक्केबाजी मॉड्यूल ।
फिर आप रूट मॉड्यूल बूटस्ट्रैप करके ऐप लॉन्च करें। कोणीय एक ब्राउज़र में आपकी एप्लिकेशन सामग्री को प्रस्तुत करने और आपके द्वारा दिए गए निर्देशों के अनुसार उपयोगकर्ता के इंटरैक्शन का जवाब देता है।
संभवतः, कोणीय अनुप्रयोगों को विकसित करने का सबसे बुनियादी हिस्सा घटक हैं । एक घटक HTML टेम्पलेट और एक घटक वर्ग का संयोजन है जो स्क्रीन के एक हिस्से को नियंत्रित करता है। यहाँ एक घटक का एक उदाहरण है जो एक साधारण स्ट्रिंग प्रदर्शित करता है:
src / ऐप्स / app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'Angular'; }
प्रत्येक घटक एक @Component डेकोरेटर फ़ंक्शन से शुरू होता है जो मेटाडेटा ऑब्जेक्ट लेता है। मेटाडेटा ऑब्जेक्ट बताता है कि HTML टेम्पलेट और कंपोनेंट क्लास एक साथ कैसे काम करते हैं।
selector संपत्ति को Angular को एक कस्टम <my-app> टैग के अंदर index.html फ़ाइल में प्रदर्शित करने के लिए कहता है।
index.html (
bodyटैग के अंदर)<my-app>Loading AppComponent content here ...</my-app>
टेम्पलेट गुण <h1> शीर्ष लेख के अंदर एक संदेश को परिभाषित करता है। संदेश "हैलो" से शुरू होता है और {{name}} साथ समाप्त होता है, जो एक कोणीय प्रक्षेप बंधन अभिव्यक्ति है। रनटाइम के दौरान, कोणीय घटक के name संपत्ति के मूल्य के साथ {{name}} बदलता है। इंटरपोलेशन बाइंडिंग इस दस्तावेज़ में आपके द्वारा खोजी जाने वाली कई कोणीय विशेषताओं में से एक है। उदाहरण में, घटक वर्ग की name संपत्ति को 'Angular' से 'World' बदलें और देखें कि क्या होता है।
यह उदाहरण टाइपस्क्रिप्ट , जावास्क्रिप्ट के एक सुपरसेट में लिखा गया है। कोणीय टाइपस्क्रिप्ट का उपयोग करता है क्योंकि इसके प्रकार टूलिंग के साथ डेवलपर उत्पादकता का समर्थन करना आसान बनाते हैं। इसके अतिरिक्त, लगभग सभी प्रकार टाइपस्क्रिप्ट के लिए है और इसलिए आपके आवेदन को लिखने के लिए सादे जावास्क्रिप्ट का उपयोग करना मुश्किल होगा। हालाँकि जावास्क्रिप्ट में कोणीय कोड लिखना संभव है; यह मार्गदर्शिका बताती है कि कैसे।
कोणीय की वास्तुकला के बारे में अधिक जानकारी यहाँ पाई जा सकती है
संस्करण
| संस्करण | रिलीज़ की तारीख |
|---|---|
| 5.0.0-बीटा.1 (नवीनतम) | 2017/07/27 |
| 4.3.2 | 2017/07/26 |
| 5.0.0-beta.0 | 2017/07/19 |
| 4.3.1 | 2017/07/19 |
| 4.3.0 | 2017/07/14 |
| 4.2.6 | 2017/07/08 |
| 4.2.5 | 2017/06/09 |
| 4.2.4 | 2017/06/21 |
| 4.2.3 | 2017/06/16 |
| 4.2.2 | 2017/06/12 |
| 4.2.1 | 2017/06/09 |
| 4.2.0 | 2017/06/08 |
| 4.2.0-rc.2 | 2017/06/01 |
| 4.2.0-rc.1 | 2017/05/26 |
| 4.2.0-rc.0 | 2017/05/19 |
| 4.1.3 | 2017/05/17 |
| 4.1.2 | 2017/05/10 |
| 4.1.1 | 2017/05/04 |
| 4.1.0 | 2017/04/26 |
| 4.1.0-rc.0 | 2017/04/21 |
| 4.0.3 | 2017/04/21 |
| 4.0.2 | 2017/04/11 |
| 4.0.1 | 2017/03/29 |
| 4.0.0 | 2017/03/23 |
| 4.0.0-rc.6 | 2017/03/23 |
| 4.0.0-rc.5 | 2017/03/17 |
| 4.0.0-rc.4 | 2017/03/17 |
| 2.4.10 | 2017/03/17 |
| 4.0.0-rc.3 | 2017/03/10 |
| 2.4.9 | 2017/03/02 |
| 4.0.0-rc.2 | 2017/03/02 |
| 4.0.0-rc.1 | 2017/02/24 |
| 2.4.8 | 2017/02/18 |
| 2.4.7 | 2017/02/09 |
| 2.4.6 | 2017/02/03 |
| 2.4.5 | 2017/01/25 |
| 2.4.4 | 2017/01/19 |
| 2.4.3 | 2017/01/11 |
| 2.4.2 | 2017/01/06 |
| 2.4.1 | 2016/12/21 |
| 2.4.0 | 2016/12/20 |
| 2.3.1 | 2016/12/15 |
| 2.3.0 | 2016/12/07 |
| 2.3.0-rc.0 | 2016/11/30 |
| 2.2.4 | 2016/11/30 |
| 2.2.3 | 2016/11/23 |
| 2.2.2 | 2016/11/22 |
| 2.2.1 | 2016/11/17 |
| 2.2.0 | 2016/11/14 |
| 2.2.0-rc.0 | 2016/11/02 |
| 2.1.2 | 2016/10/27 |
| 2.1.1 | 2016/10/20 |
| 2.1.0 | 2016/10/12 |
| 2.1.0-rc.0 | 2016/10/05 |
| 2.0.2 | 2016/10/05 |
| 2.0.1 | 2016/09/23 |
| 2.0.0 | 2016/09/14 |
| 2.0.0-rc.7 | 2016/09/13 |
| 2.0.0-rc.6 | 2016/08/31 |
| 2.0.0-rc.5 | 2016/08/09 |
| 2.0.0-rc.4 | 2016/06/30 |
| 2.0.0-rc.3 | 2016/06/21 |
| 2.0.0-rc.2 | 2016/06/15 |
| 2.0.0-rc.1 | 2016/05/03 |
| 2.0.0-rc.0 | 2016/05/02 |
कोणीय-क्ली का उपयोग करके कोणीय की स्थापना
यह उदाहरण कोणीय का एक त्वरित सेटअप है और एक त्वरित उदाहरण परियोजना कैसे उत्पन्न करता है।
आवश्यक शर्तें:
- Node.js 6.9.0 या उससे अधिक।
- npm v3 या अधिक या यार्न ।
- टंकण v1 या अधिक।
एक टर्मिनल खोलें और एक-एक करके कमांड चलाएं:
npm install -g typings या yarn global add typings
npm install -g @angular/cli या yarn global add @angular/cli
पहला कमांड वैश्विक स्तर पर टाइपिंग लाइब्रेरी को स्थापित करता है (और PATH के लिए निष्पादन योग्य typings जोड़ता है)। दूसरा, वैश्विक रूप से @ कोणीय / cli स्थापित करता है, जो PATH के निष्पादन योग्य ng को जोड़ता है।
एक नई परियोजना की स्थापना के लिए
टर्मिनल के साथ एक फ़ोल्डर में नेविगेट करें जहां आप नई परियोजना स्थापित करना चाहते हैं।
आदेश चलाएँ:
ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
वह यह है, अब आपके पास एंगुलर के साथ एक सरल उदाहरण परियोजना है। अब आप टर्मिनल में प्रदर्शित लिंक पर नेविगेट कर सकते हैं और देख सकते हैं कि यह क्या चल रहा है।
मौजूदा प्रोजेक्ट में जोड़ने के लिए
अपने वर्तमान प्रोजेक्ट की जड़ में नेविगेट करें।
कमांड चलाएँ:
ng init
यह आपकी परियोजना में आवश्यक मचान जोड़ देगा। फ़ाइलों को वर्तमान निर्देशिका में बनाया जाएगा ताकि खाली निर्देशिका में इसे चलाना सुनिश्चित करें।
स्थानीय रूप से प्रोजेक्ट चला रहा है
ब्राउज़र में चलने के दौरान अपने एप्लिकेशन को देखने और उसके साथ सहभागिता करने के लिए, आपको अपने प्रोजेक्ट के लिए फ़ाइलों की मेजबानी करने वाला एक स्थानीय विकास सर्वर शुरू करना होगा।
ng serve
यदि सर्वर सफलतापूर्वक शुरू हुआ तो उसे एक पता प्रदर्शित करना चाहिए जिस पर सर्वर चल रहा है। आमतौर पर यह है:
http://localhost:4200
बॉक्स से बाहर यह स्थानीय विकास सर्वर हॉट मॉड्यूल रीलोडिंग के साथ जुड़ा हुआ है, इसलिए HTML, टाइपस्क्रिप्ट, या सीएसएस में कोई भी परिवर्तन, ब्राउज़र को स्वचालित रूप से पुनः लोड होने के लिए ट्रिगर करेगा (लेकिन यदि वांछित हो तो इसे अक्षम किया जा सकता है)।
घटक, निर्देश, पाइप और सेवाएँ उत्पन्न करना
ng generate <scaffold-type> <name> (या बस ng g <scaffold-type> <name> ) कमांड आपको स्वचालित रूप से कोणीय घटकों को उत्पन्न करने की अनुमति देता है:
# The command below will generate a component in the folder you are currently at
ng generate component my-generated-component
# Using the alias (same outcome as above)
ng g component my-generated-component
# You can add --flat if you don't want to create new folder for a component
ng g component my-generated-component --flat
# You can add --spec false if you don't want a test file to be generated (my-generated-component.spec.ts)
ng g component my-generated-component --spec false
कई संभव प्रकार के मचानों कोणीय-क्ली उत्पन्न कर सकते हैं:
| मचान प्रकार | प्रयोग |
|---|---|
| मापांक | ng g module my-new-module |
| अंग | ng g component my-new-component |
| आदेश | ng g directive my-new-directive |
| पाइप | ng g pipe my-new-pipe |
| सेवा | ng g service my-new-service |
| कक्षा | ng g class my-new-class |
| इंटरफेस | ng g interface my-new-interface |
| enum | ng g enum my-new-enum |
आप इसके पहले अक्षर से टाइप नाम को भी बदल सकते हैं। उदाहरण के लिए:
ng gm my-new-module एक नया मॉड्यूल उत्पन्न करने के लिए या एक घटक बनाने के लिए ng gc my-new-component ।
भवन / बंडलिंग
जब आप सभी अपने कोणीय वेब ऐप का निर्माण कर रहे हैं और आप इसे Apache Tomcat जैसे वेब सर्वर पर स्थापित करना चाहते हैं, तो आपको केवल उत्पादन कमांड सेट के साथ या उसके बिना बिल्ड कमांड चलाने की आवश्यकता है। उत्पादन कोड को छोटा करेगा और उत्पादन सेटिंग के लिए अनुकूलित करेगा।
ng build
या
ng build --prod
उसके बाद प्रोजेक्ट्स रूट निर्देशिका में /dist फ़ोल्डर के लिए देखें, जिसमें बिल्ड शामिल है।
यदि आप एक छोटे उत्पादन बंडल के लाभों को पसंद करते हैं, तो आप अहेड-ऑफ-टाइम टेम्पलेट संकलन का भी उपयोग कर सकते हैं, जो अंतिम बिल्ड से टेम्पलेट कंपाइलर को हटा देता है:
ng build --prod --aot
इकाई का परीक्षण
कोणीय इन-बिल्ट यूनिट परीक्षण प्रदान करता है, और कोणीय-क्ली द्वारा बनाई गई प्रत्येक वस्तु एक बुनियादी इकाई परीक्षण उत्पन्न करती है, जिसे खर्च किया जा सकता है। इकाई परीक्षण चमेली का उपयोग करके लिखे गए हैं, और कर्म के माध्यम से निष्पादित किए जाते हैं। निम्नलिखित कमांड निष्पादित करने के लिए परीक्षण शुरू करने के लिए:
ng test
यह कमांड प्रोजेक्ट में सभी परीक्षणों को निष्पादित करेगा, और हर बार स्रोत फ़ाइल में परिवर्तन होने पर उन्हें फिर से निष्पादित करेगा, चाहे वह आवेदन से परीक्षण या कोड हो।
अधिक जानकारी के लिए यहां भी जाएं: कोणीय-क्लि गिथब पृष्ठ
कोणीय "हैलो वर्ल्ड" कार्यक्रम
आवश्यक शर्तें:
विकास पर्यावरण की स्थापना
इससे पहले कि हम शुरुआत करें, हमें अपने पर्यावरण को स्थापित करना होगा।
Node.js और npm स्थापित करें यदि वे पहले से ही आपकी मशीन पर नहीं हैं।
सत्यापित करें कि आप एक टर्मिनल / कंसोल विंडो में नोड -v और npm -v चलाकर कम से कम नोड 6.9.x और npm 3.xx चला रहे हैं। पुराने संस्करण त्रुटियां पैदा करते हैं, लेकिन नए संस्करण ठीक हैं।
npm install -g @angular/cliका उपयोग करके विश्व स्तर पर कोणीय सीएलआई स्थापित करें।
चरण 1: एक नई परियोजना बनाना
एक टर्मिनल विंडो खोलें (या विंडोज़ में Node.js कमांड प्रॉम्प्ट)।
हम कमांड का उपयोग करके एक नया प्रोजेक्ट और कंकाल एप्लिकेशन बनाते हैं:
ng new my-app
यहां ng के लिए है। हमें फ़ाइल संरचना कुछ इस तरह मिलती है।
बहुत सारी फाइलें हैं। हमें अब उन सभी के बारे में चिंता करने की आवश्यकता नहीं है।
चरण 2: आवेदन की सेवा
हम निम्नलिखित आदेश का उपयोग करके अपना एप्लिकेशन लॉन्च करते हैं:
ng serve
हम एक फ्लैग -open (या बस -o ) का उपयोग कर सकते हैं जो स्वचालित रूप से http://localhost:4200/ पर हमारे ब्राउज़र को खोलेगा
ng serve --open
ब्राउज़र को पता नेविगेट करें http://localhost:4200/ । यह कुछ इस तरह दिखता है:
चरण 3: हमारे पहले कोणीय घटक का संपादन
सीएलआई ने हमारे लिए डिफ़ॉल्ट कोणीय घटक बनाया। यह रूट कंपोनेंट है और इसे app-root नाम दिया गया है। कोई इसे ./src/app/app.component.ts में पा सकता है।
घटक फ़ाइल खोलें और Welcome to app!! से शीर्षक संपत्ति बदलें Welcome to app!! Hello World । ब्राउज़र संशोधित शीर्षक के साथ स्वचालित रूप से पुनः लोड होता है।
मूल कोड: title = 'app';
संशोधित कोड: title का मान बदल जाता है।
इसी तरह से ./src/app/app.component.html में एक बदलाव है।
मूल HTML
संशोधित HTML
ध्यान दें कि ./src/app/app.component.ts से title का मूल्य प्रदर्शित किया जाएगा। परिवर्तन किए जाने पर ब्राउज़र स्वचालित रूप से पुनः लोड होता है। यह कुछ इस तरह दिखता है।
विषय पर अधिक जानकारी प्राप्त करने के लिए, इस लिंक पर जाएं यहाँ ।