Skip to main content

Creating New Project And Running It | नया प्रोजेक्ट बनाना और उसको रन करना

अगर अपने आवश्यक सॉफ्टवेर इनस्टॉल नहीं किया है तो यहाँ क्लिक करे. Angular में कोडिंग शुरू करने के लिए सबसे पहले हम एक नया प्रोजेक्ट बनायेगें. तो चलिए शुरू करते हैं:

नया प्रोजेक्ट बनाये

नया प्रोजेक्ट बनाने के लिए टर्मिनल में ये कमांड run करें. प्रोजेक्ट का नाम demo है.
ng new demo
नया प्रोजेक्ट बनाने में कुछ समय लग सकता है. ध्यान रहे कि नया प्रोजेक्ट बनाते समय इन्टरनेट कनेक्ट हो क्यूंकि इस कमांड को run करने पर आवश्यक फाइल डाउनलोड होती है.

फाइल्स में कुछ बदलाव करना

  1. src/app/app.component.html फाइल को open करके उसमे ये कोड लिख दें.
    <h1>{{ msg }}</h1>
  2. src/app/app.component.ts फाइल को open कर के ये बदलाव करें:
    title = 'app';
    को डिलीट करके ये लाइन लिख दे:
    msg = 'Hello World!';

प्रोजेक्ट को run करना

प्रोजेक्ट को कम्पाइल और run करने के लिए टर्मिनल में ये कमांड run करें. 
ng serve
इस कमांड के run हो जाने के बाद ब्राउज़र में 
localhost:4200
को open करें. शुभकामनाये! हमने अपने पहले प्रोग्राम को सफलता पूर्वक run कर लिए. run करने पर कुछ इस प्रकार दिखेगा :

धन्यवाद!
Labels:

Comments

Post a Comment

Popular posts from this blog

Setting Up Software for Angular Programming | एंगुलर प्रोग्रामिंग के लिए आवश्यक सॉफ्टवेर इनस्टॉल करना

Angular प्रोग्रामिंग शुरू करने के लिए हमें कुछ सॉफ्टवेयर को इनस्टॉल करना होता है. इन सॉफ्टवेयर को इनस्टॉल करने के बाद ही हम Angular प्रोग्रामिंग सीखना प्रारंभ कर सकतें हैं. Angular प्रोग्रामिंग के लिए आवश्यक सॉफ्टवेयर और उनको इनस्टॉल करने के चरण इस प्रकार है. Install Nodejs और npm सर्वप्रथम Nodejs और npm इनस्टॉल करें. Nodejs सॉफ्टवेयर डाउनलोड करने के लिए यहाँ क्लिक करें . Nodejs इनस्टॉल करने पर npm स्वतः ही इनस्टॉल हो जायेगा. Install Typescript compiler Typescript इनस्टॉल करने के लिए कमांड प्रांप्ट cmd में ये कमांड run करें: npm install -g typescript Typescript को इनस्टॉल होने में कुछ समय लग सकता है. Typescript सही से इनस्टॉल हुआ है को सुनिश्चित करने के लिए यह कमांड run करें. tsc -v Install Angular CLI अब Angular CLI इनस्टॉल कर लें. Angular CLI इनस्टॉल करने के लिए cmd में इस कमांड को run करें. npm install -g @angular/cli Angular CLI को इनस्टॉल होने में कुछ समय लग सकता है. Angular CLI सही से इनस्टॉल हुआ है को सुनिश्चित करने के लिए यह कमांड run करें. ng --version अगर ...
Post a Comment
Read more

Angular App Structure | एंगुलर एप्प की रूपरेखा

Angular एप्प की कोडिंग शुरू करने से पहले उसके structure को जानना अति आवश्यक है। हम यहाँ पर केवल उनके बारे में जानेंगे तथा उनका प्रयोग हम आगे पढेंगे। आगे बढ़ने से पहले एक बार ज़रूर पढ़ लें। तो चलिए शुरू करतें हैं-- Module (मॉड्यूल) प्रत्येक angular project में एक module ज़रूर होता है जिसको root module कहतें हैं। root module ही पूरे एप्प को load करता है। प्रोजेक्ट में प्रयोग होने वाले दूसरे helping module, components इत्यादि को यही पर import करते हैं। Component (कॉम्पोनेन्ट) Component किसी भी वेबसाइट के view का एक छोटा भाग होता है। जैसे: header, sidebar, footer इत्यादि। किसी भी कॉम्पोनेन्ट को हम छोटे छोटे कॉम्पोनेन्ट में विभाजित कर सकते हैं। जैसे: header को हम logo, वेबसाइट का नाम, सर्चबार, लॉगआउट बटन आदि में विभाजित कर सकते हैं। प्रत्येक component एक दूसरे से स्वतंत्र होते हैं अर्थात एक कॉम्पोनेन्ट के लिए लिखा गया कोड दूसरे कॉम्पोनेन्ट को प्रभावित नहीं करता है। एप्प में बनाये गये प्रत्येक component को root module में import करना पड़ता है. Component के ये भाग होते हैं: Component class, co...
Post a Comment
Read more

Understanding important files generated by Angular CLI new command| एंगुलर CLI के new कमांड के द्वारा बनाये गए महत्वपूर्ण फाइल का विवरण

जब हम Angular CLI से ng new कमांड के द्वारा नया प्रोजेक्ट बनाते हैं तो CLI एक फाइल स्ट्रक्चर generate करता है। जिनमे से कुछ फाइल एप्प डेवलपमेंट में सहायता करती हैं तो कुछ फाइल में प्रोग्रामर कोड्स लिखता है। यहाँ पर हम केवल उन फाइल के बारे में जानेंगे जो प्रोग्रामर के लिए जानना अति आवश्यक है। ये आवश्यक फाइल कुछ इस प्रकार हैं- src/app/app.module.ts : इस फ़ाइल के में हम अपने एप्प के root module को define करते है। इसके अंदर हम उन सभी module को import करतें हैं जो इस प्रोजेक्ट में प्रयोग किये जायेंगे। और इसी फाइल में हम उन सभी component को import और declare करते हैं जोकि इस प्रोजेक्ट का हिस्सा है। import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } जैसा कि हम देख सकतें हैं कि हमने लाइन 1 पर BrowserModule modul...
Post a Comment
Read more