AngularJS Environment Setup in Hindi :-

दोस्तों आज के पाठ में हम यह सीखेंगे की AngularJS का Environment Setup कैसे करना है इसका मतलब कि अगर आप AngularJS को अपने प्रोजेक्ट में use करना चाहते हैं तो आप AngularJS को उसके ऑफिशियल वेबसाइट angularjs.org से कैसे डाउनलोड करेंगे| उसके बाद फिर उससे अपने वेबसाइट से कैसे जोड़ेंगे यह सारी विधि आज हम विस्तार से जानेंगे |

दोस्तों आप दो तरीके से अपनी वेबसाइट में AngularJS को जोड़ सकते है , सबसे पहला तरीका है AngularJS को डाउनलोड करके उसे अपने वेबसाइट पर जोड़ना और दूसरा तरीका है AngularJS के CDN (content delivery network or content distribution network ) को अपने वेबसाइट पर यूज करना |

दोस्तों आप किस तरीके का यूज करके आप अपनी वेबसाइट को AngularJS से जोड़ना चाहते हैं यह आपके इंटरनेट की उपलब्ध्ता के ऊपर निर्भर करती है | अगर आप हर समय इंटरनेट से connect रहते हैं तो आप AngularJS के CDN को अपने वेबसाइट से जोड़ सकते हैं और यह सबसे आसान तरीका भी है |

लेकिन अगर आप चाहते हैं कि आप AngularJS को अपने कंप्यूटर पर ही डाउनलोड कर ले तो आप AngularJS को डाउनलोड भी कर सकते हैं और हमेशा AngularJS का यूज कर सकते हैं फिर चाहे आपके पास इंटरनेट हो या ना हो | और दोस्तों AngularJS को डाउनलोड करना भी बहुत आसान है यह बहुत ही छोटा सा फाइल है इसका साइज लगभग 100 kb के आसपास है आप बड़ी आसानी से AngularJS को डाउनलोड कर सकते है |

सबसे पहले आप यह देखिए कि अगर आप AngularJS के CDN का उपयोग अपनी वेबसाइट में करना चाहते हैं तो कैसे कर सकते हैं :-

 

<script   Src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js">
</script>

आपको बस इस कोड को copy कर के अपने वेबसाइट के <head> </head> के अंदर पेस्ट कर देना है और उसके बाद आप AngularJS का प्रयोग अपनी वेबसाइट में कर सकते हैं चलिए अब एक उदाहरण देखते हैं :-

 

(याद रखें की आप AngularJS के CDN का प्रयोग अपनी वेबसाइट में तभी तक कर सकते हैं जब तक कि आप Internet से Connected हो)

 

<html>    
 <head>  
 <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>  
</head>    
<body ng-app >
    <div>     
        <label>Name:</label> 
         <input type = "text" ng-model = "yourName" placeholder = "Enter a name here">              <hr />           
        <h1>Hello {{yourName}}!</h1>   
    </div> 
</body>
</html>

अब इस कोड को कॉपी कर कर अपने Text Editor जैसे कि Notepad++ पर पेस्ट करिए और उसके बाद कुछ नाम देखकर . html फॉर्मेट में इसे Save करिए | उसके बाद डबल क्लिक करके इस पेज को अपने ब्राउज़र पर खोलिए | अब इस वेब पेज में जो इनपुट बॉक्स दिख रहा है उस पर उसमें आप अपना नाम लिखकर देखे वही नाम आपको <h1></h1> tag के अंदर Hello के साथ भी दिखाई देगा |

 

अब देखते हैं कि अगर आप AngularJS को डाउनलोड करके अपनी वेबसाइट पर Use करना चाहते हैं तो ये कैसे होगा सबसे पहले आप AngularJS के ऑफिशियल वेबसाइट https://angularjs.org पर जाएं |

Angularjs Home Page

अब इस चित्र में देखें जिस डाउनलोड बटन पर लाल रंग का निशान बना हुआ है उस पर क्लिक करें |

Angularjs Home Page

अब डाउनलोड बटन पर क्लिक करें|

उसके बाद AngularJS का फाइल आपके कंप्यूटर पर डाउनलोड हो जाएगा | आप उस फाइल को अपने डेस्कटॉप पर copy करके रख ले |

<html>  
 <head>  
  <script src = "angular.min.js"></script> 
</head>    
<body ng-app >
    <div>     
     <label>Name:</label>
     <input type = "text" ng-model = "yourName" placeholder = "Enter a name here">              <hr />           
     <h1>Hello {{yourName}}!</h1>   
    </div> 
</body>
</html>

अब ऊपर लिखे Code को Copy कर कर अपने Text Editor जैसे कि Notepad++ पर पेस्ट करिए और उसके बाद कुछ नाम देखकर . html फॉर्मेट में इसे Save करिए | उसके बाद डबल क्लिक करके इस पेज को अपने ब्राउज़र पर खोलिए | अब इस वेब पेज में जो इनपुट बॉक्स दिख रहा है उस पर उसमें आप अपना नाम लिखकर देखे वही नाम आपको <h1></h1> tag के अंदर Hello के साथ भी दिखाई देगा | आपने जो यह नए word ng-model और ng-app आदि का प्रयोग किया है इसका क्या मतलब होता है यह मैं आपको आने वाले पाठ में बताऊंगा |

Next:- Angular Js MVC Architecture :-

Previous:- Introduction to Angular Js :-