Angularjs kya hai

AngularJS Kya Hai – What is AngularJS

AngularJS ये light-weighted open-source Javascript framework है | ये MVC(Model-View) based Web Application को बनाने के लिए इस्तेमाल किया जाता है | इस framework में directives, filters और expressions जैसे कुछ components होते है | AngularJS को HTML में इस्तेमाल करना हो तो angular.min.js इस file को include किया जाता है | इस file को online या offline भी include किया जा सकता है

सिंगल Page Applications में हम databace से डाटा को पेज पर दिखाते हैं और पेज को refresh करने की जरूरत भी नहीं होता है यह एक ऐसा application है जिसमें हम एक पेज से दूसरे पेज पर जा सकते हैं

AngularJS को अपने वेब पेज में जोड़ने के लिए हम उसी प्रकार <script> tag का यूज़ करते हैं जैसे कि जावास्क्रिप्ट के कोड को अपने वेब पेज में जोड़ने के लिए करते हैं सिंगल-पेज applications के लिए, AngularJS फ्रेमवर्क वास्तविक समय अनुभव के लिए unique interactive फीचर्स को भी बनाता है

यह tutorial आपको बुनियादी स्तर से एक उन्नत स्तर तक शुरू होने वाले angularjs के imperatives को जानने में मदद करेंगे इस tutorial को अनुभागों में विभाजित किया गए हैं

एक web developer के रूप में, आपको नियमित आधार पर नए frameworks का उपयोग करने का तरीका जानने की आवश्यकता होगी angularjs एक पूर्ण विशेषताओं वाला ढांचा है जो developer के बीच unreliable रूप से लोकप्रिय है

यह Developer के लिए अनुकूल है और एक सहायक और Active समुदाय है. AngularJS के साथ निर्मित उत्पादो मे Youtube Video Manager, Weather Channel Site कई Google Products और Tender शामिल है.

For Example

angular.module('myApp').service('magicidea',function(){
this.sayHello=function(){
alert('Hello!! Welcome to magic.');
}
});

ऊपर दिए गए के उदाहरण मे आपने देखा कि हमने myApp नाम का एक Angular Module बनाया है और उसमे Service Function का उपयोग भी किया है आपने अपना खुद का एक Service बनाया है जिसका नाम magicidea है.

AngularJS के फायदे

  • Dependency Injection – Dependency Injection एक Design Pattern को Specified करता है. जिसमे Components को Component के भीतर Hard Coding की बजाय उनकी Dependency दी जाती है.
  • Two Way Data Binding – AngularJS Select Element और OrderProp Model के बीच दो तरह के Data-binding बनाता है. OrderProp को फिर Order के लिए Input के रूप मे उपयोग किया जाता है.
  • Testing – AngularJS इस तरह से Design किया गया है कि हम शुरुआत से ही परीक्षण कर सकते है. इसलिए Unit Testing और End-to-end Test के माध्यम से इसके किसी भी Component का परीक्षण करना बहुत आसान होता है.
  • Model View Controller – AngularJS मे एक स्वच्छ MVC Way से आवेदन विकसित करना बहुत आसान होता है. इसके लिए आपको बस अपने Application Code को MVC Components यानी Model, View और Controller मे विभाजित करना होगा.

Angularjs in Hindi

AngularJS गतिशील वेब application के लिए एक structural रूप रेखा है यह आपको अपनी template भाषा के रूप में HTML का उपयोग करने देता है

Angularjs एक ओपन सोर्स सॉफ़्टवेयर है जिस का यूज़ दुनिया भर के सभी developers व्यापक रूप से करते है AngularJS वेब applications के लिए एक जावा स्क्रिप्ट ढांचे है जो प्रायः सिंगल पेज एप्लीकेशन के विकास के लिए यूज़ होता है

AngularJS का उपयोग एक ओपन सोर्स जावास्क्रिप्ट framework के रूप में किया जाता है ओपन source फ्रेमवर्क का मतलब होता है कि हमें AngularJS का use करने के लिए किसी से किसी प्रकार की कोई परमिशन लेने की जरुरत नहीं है और ना हमें किसी को किसी भी प्रकार की कोई money pay करने की जरुरत होती है

दोस्तों अगर आप चाहें तो AngularJS के Source कोड में बदलाव करके एक new फ्रेमवर्क भी बना सकते हैं और इसके लिए आपको किसी से किसी प्रकार की इजाज़त लेने की आवश्यकता नहीं है दोस्तों Single पेज एप्लीकेशन बनाने के लिए AngularJS सबसे बढ़िया framework है।

AngularJS को नई विशेषताओं के साथ HTML का विस्तार करने के लिए उपयोग में लाया जाता है AngularJS एक पृष्ठ वेब अनुप्रयोग बनाने के लिए सबसे उपयुक्त है

MVC Architecture

  • AngularJS MVC Architecture को follows करता है।
  • आजकल, MVC वेब अनुप्रयोगों के लिए डेवलपर द्वारा यूज़ किए जाने वाले सबसे सामान्य designing पैटर्न होते है।

AngularJS Advantages

  • AngularJS तेजी से काम करता है क्योंकि यह Ajax के साथ काम करता है और केवल आवश्यक सामग्री को ही लोड करता है
  • चूंकि यह एक ओपन सोर्स फ्रेमवर्क है, इसलिए आप इसका यूज़ करते समय कम से कम errors या समस्याओं की संख्या की उम्मीद कर सकते हैं
  • AngularJS डेटा या मॉडल को expression के साथ सीधे सीधे जोड़ने में मदद करता है
  • AngularJS modules नामक विभिन्न भागों में कोड और कार्यक्षमता को तोड़ता है यह एक कुशल तरीके से कोड को Managed और उपयोग करने में सहायता करता है।

Example Code

<!DOCTYPE html>
<html>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<body>

<div ng-app="">
 
<p>Angularjs Example</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{magic}}</h1>

</div>

</body>
</html>

Output

Angularjs Example

Name :

Hello {{magic}}

Angularjs in Hindi Expressions

AngularJS मे Expressions को HTML मे Application Data को Bind करने के लिए उपयोग किया जाता है. AngularJS Expression को Solve करता है और उस Result को Returns करता है जहां Expression मे लिखा जाता है.

AngularJS मे Expression का उपयोग Model से HTML DOM Elements और ng-bind Instructions के समान Data को Bind करने के लिए किया जाता है. Expressions आपको Variables, Objects, Operators और liters का उपयोग करने की Permission भी देता है.

AngularJS Expression Application Data को HTML Elements मे Bind होता है. इस को हम दो Curly Braces के अंदर लिखते यह हमे Javascript Expression को Reminds कराता है. इसलिए Angularjs Expression Javascript से Different होता है.

Expressions को Double Braces {{expression}} मे लिखा जाता है यह Instructions के अंदर भी लिखा जा सकता है.


ng-bind="expression".
 

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Angularjs Expressions Example</title>
      <script src = 
         "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
      </script>
   </head>
   <body>
      <div ng-app>
         <p>My Angularjs Expressions: {{ 9 + 9 }}</p>
      </div>
   </body>
</html>

Output

My Angularjs Axpressions: 18

Angular Expressions Number

हम Angular Expressions मे Numbers या Numerical Values का उपयोग कर सकते है और Numerical Values मे Decimal Value भी हो सकते है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Angular Expressions Number Example</title>
      <script src = 
         "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
      </script>
   </head>
   <body>
      <div ng-app="" ng-init="quantity=8;cost=8">
         <p>Total in dollar: {{ quantity * cost }}</p>
      </div>
   </body>
</html>

Output

Total in dollar: 64

Angularjs in Hindi Modules

AngularJS मे एक Module मे Controller, Service, Filters, Instructions, Factories आदि होते है. जैसे किसी Application के विभिन्न Parts का एक Container होता है ऐसे ही AngularJS मे एक ही Module के तहत कुछ Javascript की Functionality को एक साथ Group कर सकते है.

Angularjs मे आप एक Module से अपने Controllers, Services, Filters, Instructions आदि को Defined कर सकते है जो पूरे Module मे Accessible होते है.

एक Module को AngularJS द्वारा किसी Application को Bootstrap के लिए उपयोग मे लाया जा सकता है. Ng Application Instructions के लिए Module Name Pass करके हम इस Module को Application के मुख्य Entry Point के रूप मे Load करने के लिए AngularJS को Inform कर सकते है.

Module को अलग .js Files और Names के रूप मे module.js File मे Defined किया जाता है.


var mainApp = angular.module("mainApp", []); 

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Angular Modules Example</title>
      <script src = 
         "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
      </script>
   </head>
   <body>
      <div ng-app="myApp" ng-controller="myCtrl">
         {{ firstName + " " + lastName }}
      </div>
      <script>
         var app = angular.module("myApp", []);
         app.controller("myCtrl", function($scope) {
            $scope.firstName = "Magic";
            $scope.lastName = "Idea";
         });
      </script>
   </body>
</html>

Output

Magic Idea

Angularjs in Hindi Events

Angularjs मे Event Instructions का एक Set है जिसका उपयोग Custom Behavior Set करने के लिए किया जाता है. AngularJS मे ऐसी Performance को जोड़ने की क्षमता होती है जो हर तरह के Events को Control रख सकता है.

आम तौर पर जब Developing Applications मे हम Various Types के HTML DOM Events जैसे Mouse Click, Key Press, Change Event आदि का उपयोग करते है. इसी प्रकार Angularjs मे Dome Interaction के लिए स्वयं के Event Instructions होते है.

AngularJS उन Event की संख्या को प्रदान करता है जो HTML Control से संबंधित होता है.

ng-blur, ng-change, ng-click, ng-copy, ng-cut, ng-dbl-click,
ng-keydown, ng-mouseover, ng-mousemove, ng-mouseleave, ng-mouseenter,
ng-mouseup, ng-mousedown, ng-keypress, ng-keyup.

Web पर आधारित Application बनाते समय आपको Application को DOM Events जैसे Mouse Click, Move, Keyboard Press, Event आदि को बदलना होता है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Angular Events Example</title>
      <script src = 
        "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
      </script>
   </head>
   <body>
      <div ng-app="myApp" ng-controller="myCtrl">
         <h1 ng-mousemove="count = count + 1">Mouse Clicke Over Me!</h1>
         <h2>{{ count }}</h2>
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('myCtrl', function($scope) {
            $scope.count = 0;
         });
     </script> 
   </body>
</html>

Angularjs in Hindi Forms

AngularJS मे Form Data Binding और Input को Control करने की मान्यता को Provide करता है. Angularjs Form Control Verification Services देते है जिससे User को एक Form को Submit करने से पहले Invalid Input के बारे मे Inform किया जा सके.

AngularJS Directive Attribute का एक Set Provide करता है. जिसे Regular HTML Form Elements जैसे Input, Selection और Form के Place पर उपयोग किया जा सकता है.

यह Directive Attribute Terms के तहत उपलब्ध है जब Input Elements का Type Specialty नही होता है.

एक Form Related Controls को एकत्रित करने के उद्देश्य के लिए Control करने का एक Group होता है. यह Input Control का एक Collection होता है. Input जैसे Selection, Choose, यह User के Data को Enter करने के कई तरीके हो सकते है.

जब आप Web App पर काम करते है तो आप इनको थोड़ा सा Control कर सकते है. और यदि ऐसा है तो आपको नौकरी के लिए सही Tool का उपयोग करने के लिए अच्छी तरह से Equipped होना चाहिए. AngularJS के साथ उन Tools मे Form, Input और Verification के लिए Widespread Support शामिल होना चाहिए.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Angular Forms Example</title>
      <script src = 
         "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
      </script>
   </head>
   <body>
      <div ng-app="myApp" ng-controller="formCtrl"> 
         <form> 
            First Name: <input type="text" ng-model="firstname"> 
         </form> 
      </div> 
      <script> 
         var app = angular.module('myApp', []);  
         app.controller('formCtrl', function($scope) {  
            $scope.firstname = "Magic";  
         });  
      </script> 
   </body>
</html>

Output

First Name:

Angularjs in Hindi Application

Web Applications की दुनिया मे Front End Programming Language New नहीं है. यदि आपने कुछ समय Web Development मे काम किया है तो आपने शायद आपने Project मे Javascript Framework का उपयोग किया होगा हो. AngularJS का उपयोग करने से पहले हम को पता होना चाहिए कि AngularJS क्या है और इसका उपयोग हम क्यो करते है.

Angularjs एक Javascript Framework Library है और MVC या Model-view-control Named एक बहुत ही Popular Software Architecture पर Based है वर्ष 2009 मे Google Engineers द्वारा Developed, Framework को धीरे-धीरे Popularity प्राप्त हुई और आज यह सामान्य रूप से उपयोग किए जाने वाले Javascript Framework मे से एक है.

सभी Programming Language मे हम जिस Application को सीखते है वह “Hello World” Application होती है. इससे पहले कि हम अपना पहला Angularjs Application बनाना शुरू करे हमको Angularjs Application के Real Parts को जानने की जरूरत होती है. सभी Application मे तीन महत्वपूर्ण Component होते है.

  • ng-app − यह एक Instructions है जो HTML पर AngularJS Application को Defined करता है और Link करता है.
  • ng-model − AngularJS Application मे Data की Values को इसके Instructions द्वारा HTML Input Controls से Bind किया जा सकता है.
  • ng-bind − AngularJS Application Data मे HTML Tags की Binding इस के Instructions द्वारा होती है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Angular Application Example</title>
      <script src = 
         "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
      </script>
   </head>
   <body">
      <h1>Sample Application</h1>
      <div ng-app = "">
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
      </div>
   </body>
</html>

Angularjs in Hindi Scope

Angularjs मे Scope एक ऐसा Object होता है जो View और Controllers के बीच Share Context के रूप मे काम करता है और Scope Application Model से Related Information को आदान-प्रदान करने के लिए दो Layers को Capable बनाता है.

Angularjs मे Scope योजना के साथ Controllers मे शामिल होने के Role को निभाता है. यह View और Controllers के लिए Available होता है.

AngularJS मे $scope एक Built-in Object है जिसमे Application Data के और तरीके शामिल होते है. इसमे आप एक Controller Function के अंदर $scope Object मे Properties को बना सकते है और इसके लिए एक Value या Function को Specified कर सकते है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Angular Scope Example</title>
      <script src = 
         "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
      </script>
   </head>
   <body ng-app="myNgApp">
      <h1>AngularJS Scope</h1>
      <div ng-controller="myController">
        This is Message <br />
        <br />
        <span ng-bind="message"></span> <br />
        <input type="text" ng-model="message" /> 
      </div>
      <script>
        var ngApp = angular.module('myNgApp', []);

        ngApp.controller('myController', function ($scope) {
            $scope.message = "Hello MagicIdea!";        
        });
      </script>
   </body>
</html>

AngularJS Application मे प्रत्येक Controller के लिए एक अलग $scope Object बनता है और Inject करता है. इसलिए एक Controller के अंदर $scope के साथ जुड़े Data और Methods को दूसरे Controller मे नही पहुंचाया जा सकता है.

Angularjs in Hindi Filters

Angularjs मे Filter का उपयोग Data को Improved करने के लिए करते है. एक Pipe वर्ण का उपयोग करते हुए Expressions और निर्देशों मे Filter को जोड़ सकते है. Angularjs मे Filter भी Parameters का भी उपयोग किया जा सकता है.

एक Filter User को प्रदर्शित करने के लिए Expression की Value को Formatted करता है. उदाहरण के लिए यदि आप अपने String को Lowercase या सभी को Uppercase मे करना चाहते है तो आप इसमे Filter का उपयोग कर सकते है.

Filter को View Template, Controller, Services मे उपयोग किया जा सकता है. Angularjs मे Built-in Filter एक Collection के साथ आता है.

Types of Filter

  • Uppercase Filter
  • Lowercase Filter
  • Currency Filter
  • Filter
  • Orderby

Uppercase Filter

Uppercase Filter का उपयोग String के Characters को Uppercase मे बदलने के लिए किया जाता है. यह एक Input के रूप मे String के एक टुकड़ा को लेता है और इसे Uppercase String मे Convert करता है.

Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}

Lowercase Filter

Lowercase Filter को String के Characters को Lowercase मे बदलने के लिए उपयोग मे लाया जाता है. यह एक Input के रूप मे String के एक टुकड़ा को लेता है और इसे Lowercase String मे Convert करता है.

Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Lower Case: {{student.fullName() | lowercase}}

Currency Filter

Currency Filter का उपयोग Currency मे Numbers को Format करने के लिए किया जाता है.

Enter fees: <input type = "text" ng-model = "student.fees">
fees: {{student.fees | currency}}

AngularJS Filter

AngularJS Filter मे Filter का उपयोग किसी दिए गए Array से Items का Subset चुनने के लिए किया जाता है और फिर एक नया स्वरूपित Array Return होता है.

Enter subject: <input type = "text" ng-model = "subjectName">
Subject:
<ul>
  <li ng-repeat = "subject in student.subjects | filter: subjectName">
     {{ subject.name + ', marks:' + subject.marks }}
  </li>
</ul>

Orderby

AngularJS Filter OrderBy द्वारा प्रदान की गई Predicate Expression के आधार पर एक Array का उपयोग किया जाता है.

Filter का Sign Order Sets करता है (+ is ascending) while (- is descending).

Subject:
<ul>
   <li ng-repeat = "subject in student.subjects | orderBy:'marks'"gt;
     {{ subject.name + ', marks:' + subject.marks }}
   </ligt;
</ul>

For Example

<!DOCTYPE html>
<html>
  <head>
      <title>Angular JS Filters Example</title>
      <script src = 
        "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp" ng-controller = "studentController">
         <table border = "0">
            <tr>
               <td>Enter First Name:</td>
               <td><input type = "text" ng-model = "student.firstName"></td>
            </tr>
            
            <tr>
               <td>Enter Last Name: </td>
               <td><input type = "text" ng-model = "student.lastName"></td>
            </tr>
            
            <tr>
               <td>Enter Fees: </td>
               <td><input type = "text" ng-model = "student.fees"></td>
            </tr>
            
            <tr>
               <td>Enter Subject: </td>
               <td><input type = "text" ng-model = "subjectName"></td>
            </tr>
         </table>
         <br/>
         
         <table border = "0">
            <tr>
               <td>Name in Upper Case: </td>
               <td>{{student.fullName() | uppercase}}</td>
            </tr>
         
            <tr>
               <td>Name in Lower Case: </td>
               <td>{{student.fullName() | lowercase}}</td>
            </tr>
         
            <tr>
               <td>Fees: </td><td>{{student.fees | currency}}
               </td>
            </tr>
				
            <tr>
               <td>Subject:</td>

               <td>
                  <ul>
                     <li ng-repeat = "subject in student.subjects | 
                        filter: subjectName |orderBy:'marks'">
                        {{ subject.name + ', marks:' + subject.marks }}
                     </li>
                  </ul>
               </td>
            </tr>
         </table>
         
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Imran",
               lastName: "Khan",
               fees:500,
               
               subjects:[
                  {name:'Physics',marks:70},
                  {name:'Chemistry',marks:80},
                  {name:'Math',marks:85}
               ],
               
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
      
   </body>
</html>

Angularjs in Hindi Directives

Angularjs मे Directives का उपयोग HTML की Working Capacity की Detailed को बड़ा देता है. AngularJs मे आप बहुत सारी Directive का उपयोग कर सकते है. इनका उपयोग आप अपनी जरूरत के हिसाब से अपने Project मे कर सकते है. दोस्तों अगर आप चाहे तो अपनी जरूरत के अनुसार अपनी Directive भी बना सकते है.

AngularJS मे Directives एक New Attributes है जिसका उपयोग HTML का विस्तार करने के लिए किए जाता है. Angularjs मे Built-in Instructions का एक Set है जो आपके Applications की कार्यक्षमता को प्रदान करता है. इसके अलावा यह आपको अपने खुद के Instructions को भी Define करने देता है.

AngularJS Web Developers के लिए एक Attractive Frame है यह वास्तव मे Applications के निर्माण का एक बिल्कुल अलग तरीका है.

ng-app Directive

यह Directive Root Element को Define करके एक AngularJS Applications को शुरू करता है और Web Page जिसमे Applications शामिल होते है Load होने पर यह Automatic रूप से AngularJS Applications को प्रारंभ या Bootstrap करता है. इसके अलावा इस Instructions का उपयोग करके विभिन्न AngularJS Module को भी Load किया जा सकता है.

<div ng-app="" ng-init="firstName='Rahul'">
 <p>Name:  <input type="text" ng-model="firstName"></p>
 <p>You wrote: {{ firstName }} </p>
 </div>

ng-init Directive

AngularJS Applications Data के प्रारंभ मे यह Instructions बहुत महत्वपूर्ण होता है. यह उपयोग किए जाने वाले विभिन्न Variable की Values को असाइन करने के लिए उपयोग होता है.

<div ng-app = "" ng-init = "countries = [{locale:'en-JP',name:'Japan'}, 
{locale:'en-PAK',name:'Pakistan'}, {locale:'en-AF',name:'Afghanistan'}]">  
   ...  
</div> 

ng-model Directive

यह AngularJS Application Data की Values को HTML Input Controls से जोड़ता है.

<div ng-app = "">
   ...
   <p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div> 

ng-repeat Directive

ng-repeat Directive Collection मे प्रत्येक Item के लिए HTML Elements को दोहराता है

<div ng-app = "">
   ...
   <p>List of Countries with locale:</p>
   
   <ol>
      <li ng-repeat = "country in countries">
         {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
      </li>
   </ol>
   
</div> 

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>AngularJS Directives Example</title>
      <script src = 
        "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
   </head> 
   <body>
      <h1>Sample Application</h1>
      <div ng-app = "" ng-init = "countries = 
         [{locale:'en-US',name:'United States'},
         {locale:'en-GB',name:'United Kingdom'},
         {locale:'en-FR',name:'France'}]"> 
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
         <p>List of Countries with locale:</p>
         <ol>
            <li ng-repeat = "country in countries">
               {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
            </li>
         </ol>
      </div>   
   </body>
</html>

Angularjs in Hindi Controller

AngularJS Controllers AngularJS Applications के Data को नियंत्रित करता है. एक Controller AngularJS Application का सबसे उपयोगी हिस्सा होता है. यह Javascript Functions के बहुसंख्यक संबंधित और UI संबंधित कार्य करता है.

Application मे Data के Flow को नियंत्रित करने के लिए AngularJS Controller को Ng-Controller Instructions के साथ परिभाषित किया गया है. AngularJS Controller एक Javascript Object होता है जिसमे Attributes और Function शामिल होते है.

सभी प्रकार की Website को Angularjs Controller से Add करने के लिए Ng-Controller Directive का उपयोग किया जाता है. AngularJs के उपयोग से बनने वाली Website की सबसे अच्छी बात यह होती है यह Angularjs Controller पर आधारित होती है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Angular JS Controller Example</title>
      <script src = 
        "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
   </head>
   <body>
      <h2>This is AngularJS Application</h2> 
      <div ng-app = "mainApp" ng-controller = "studentController">
         Enter first name: <input type = "text" ng-model = "student.firstName">
         <br><br>
         Enter last name: <input type = "text" ng-model = "student.lastName">
         <br><br>
         You are entering: {{student.fullName()}}
      </div> 
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Imran",
               lastName: "Khan",
               
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>    
   </body>
</html>

Application Explained

  • AngularJS Application <div> को Ng-app Mypad द्वारा परिभाषित किया जाता है.
  • AngularJS मे Scope Application Object होता है.
  • Ng Model Directives Input Field को Controlling Property मे Bind करता है.

Angularjs in Hindi Table

AngularJS मे Tables को आकर्षित करने के लिए Ng-repeat की Directive का उपयोग किया जाता है. AngularJS Ng-repeat Directive हमे AngularJS मे Tables को बनाने की अनुमति देता है. Ng-repeat Instructions HTML Element को दोहराता है जिसमें इसे जोड़ जाता है जब तक कि Array मे सभी Objects को Beyond नही किया जाता है.

AngularJS Ng-repeat के Directive का उपयोग JSON Data से Bind HTML Table मे किया जाता है. सबसे पहले JSON Data उत्पन्न होता है और फिर इसमे AngularJS Ng-repeat के Directive का उपयोग करके Bind HTML Table का उपयोग किया जाता है.

Angularjs के Applications मे Ng-table Module का उपयोग करके हम कार्य Systems को प्राप्त कर सकते है जैसे Table Format, Sorting, Filtering और Pageing मे Data को बहुत Code लिखे बिना भी दिखा सकते है.

AngularJS Table मे हम Repeatable Data को दिखा सकते है और इसमे Ng-repeat के Directive का उपयोग करके हम Table को आसानी से Atractice बना सकते है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Angular JS Table Example</title>
      <script src = 
        "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      <style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }
         
         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }
         
         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>
   </head>
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp" ng-controller = "studentController">  
         <table border = "0">
            <tr>
               <td>Enter first name:</td>
               <td><input type = "text" ng-model = "student.firstName"></td>
            </tr>
            <tr>
               <td>Enter last name: </td>
               <td>
                  <input type = "text" ng-model = "student.lastName">
               </td>
            </tr>
            <tr>
               <td>Name: </td>
               <td>{{student.fullName()}}</td>
            </tr>
            <tr>
               <td>Subject:</td>
               <td>
                  <table>
                     <tr>
                        <th>Name</th>.
                        <th>Marks</th>
                     </tr>
                     <tr ng-repeat = "subject in student.subjects">
                        <td>{{ subject.name }}</td>
                        <td>{{ subject.marks }}</td>
                     </tr>	
                  </table>
               </td>	
            </tr>
         </table>      
      </div>   
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Imran",
               lastName: "Khan",
               fees:100,
               
               subjects:[
                  {name:'Physics',marks:65},
                  {name:'Chemistry',marks:75},
                  {name:'Math',marks:60},
                  {name:'English',marks:62},
                  {name:'Hindi',marks:75}
               ],
               
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
   </body>
</html>

Angularjs in Hindi Data Binding

AngularJS मे Data Binding Model और View Components के बीच Data के Automatic Synchronization होते है. Data Binding को Software के Development और Technologies के लिए उपयोग मे लाया जाता है. Data Binding एक बहुत ही उपयोगी सुविधा है यह Application के Visual Business और Argument के बीच एक Bridge के रूप मे कार्य करता है.

अधिकांश Templates केवल एक दिशा मे Data Bind करते है. यह एक View मे Template और Model Components को एक साथ Merge करते है Merge होने के बाद यह Model या View के संबंधित Section मे Change होता है और वह View मे स्वत दिखाई नही देते है.

यह Model मे Reflected नही होते है. इसका मतलब यह है कि Developer को Code लिखना पड़ता है जो View के साथ View और Model के साथ View को लगातार समन्वयित करता है.

Types of Data Binding

Data Binding दो प्रकार के होते है

  • One-Way Data Binding
  • Two-way Data Binding

One-Way Data Binding

One-Way Data Binding मे View Automatic रूप से Updates नही होता है और Data Model बदल जाता है. हमको हर बार Update करने के लिए Custom Code लिखना पड़ता है . यह एक Synchronization Procedures नही है और यह एक ही तरह से Data को Processed करेगा.

Two-way Data Binding

Two-Way Data Binding मे Data Model बदलते समय View Automatic रूप से Update होता है. Ng-model Directive का उपयोग करते हुए हम Two-Way Data Binding को प्राप्त कर सकते है. यदि हम HTML नियंत्रण मे Ng-model Directive का उपयोग करते है तो यह Input Automatic रूप से Update हो जाता है और Data Input नियंत्रण मे बदल जाता है.

For Example

<!DOCTYPE html>  
<html>  
   <head>  
      <script src = 
         "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
      </script>  
   </head>  
   <body>  
      <div ng-app="" ng-init="firstName='Ali'">  
         <p>Input something in the input box:</p>  
         <p>Name: <input type="text" ng-model="firstName"></p>  
         <p>You wrote: {{ firstName }}</p>  
      </div>  
   </body>  
</html>  

Output

उपर्युक्त उदाहरण मे {{firstName}} Expression एक AngularJS Data Binding Expression है. AngularJS मे Data Binding AngularJS Data के साथ AngularJS Expressions का Binding है.

{{ firstName }} is bound with ng-model=”firstName”

आइए एक और उदाहरण देखते है जहां दो Text Field दो Ng-model Instructions के साथ एक साथ बंधे है.

For Example

<!DOCTYPE html>  
<html>  
   <head>  
      <script src = 
         "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
      </script>  
   </head>  
   <body>  
      <div data-ng-app="" data-ng-init="quantity=1;price=20">  
         <h2>Cost Calculator</h2>  
         Quantity: <input type="number" ng-model="quantity">  
         Price: <input type="number" ng-model="price">  
         <p><b>Total in rupees:</b> {{quantity * price}}</p>  
      </div>    
   </body>  
</html>  

Angularjs in Hindi HTTP

Server से Data को प्राप्त करने के लिए हम $HTTP Shortcut Method का उपयोग करते है. यह Method Browser के XMLHttpRequest या JSONP के उपयोग से Data को Send या Receive करने के लिए उपयोग होती है.

Angularjs मे Infinite Server से Data को Received करने के लिए आप $HTTP Service का उपयोग कर सकते है दोस्तों अगर आप Server पर किसी भी तरह के Request को SNED करना चाहते है तो इसके आधार पर $HTTP Service मे कई Shortcut मेथड्स दिए गए है.

$HTTP मे आप Web Server पर AJAX को Call कर सकते है याद रखे कि AJAX Call को Domain से एक अलग Domain पर नही भेजा जा सकता है. उदाहरण के लिए यदि HTML Page को हमने magicidea.in से Load किया गया है तो हम उस HTML Page को केवल magicidea.in Domain के भीतर URL पर वापस AJAX को Call कर सकते है.

Properties

  • Data – Server पर जब कोई भी Response आता है तो यह उसको String या Object मे वापस भेज देता है.
  • Headers – यह Header की जानकारी को प्राप्त करने के लिए उपयोग मे आने वाला एक Function है.
  • Status – यह HTTP की स्थिति को Defined करने वाला एक Number है.
  • Config – इस का उपयोग Object Request को उत्पन्न करने के लिए किया जाता है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <script src = 
        "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">
      </script>
   </head>
   <body ng-app ="myApp">
      <h1>Hello AngularJS $http Demo:</h1>
      <div>
        <div ng-controller="myController">
           Response Data:<br />
           Error: 
        </div>
      </div>
      <script>
         var myApp = angular.module('myApp', []);

         myApp.controller("myController", function ($scope, $http) {
       
            var onSuccess = function (data, status, headers, config) {
                $scope.data = data;
            };

            var onError = function (data, status, headers, config) {
                $scope.error = status;
            }
        
            var promise = $http.get("/demo/getdata");
                
            promise.success(onSuccess);
            promise.error(onError);
         
         });
      </script>
   </body>
</html>

Angularjs in Hindi HTML DOM

AngularJS मे HTML DOM Elements के गुणों के लिए Binding Application Data के निर्देश है. DOM Document Object Model के लिए स्थिर है AngularJS Directives को HTML DOM Elements की विशेषताओ के लिए Application Data को Bind करने के लिए उपयोग मे लाया जाता है.

AngularJS मे सभी निर्देशों का उपयोग HTML DOM Elements के गुणों मे Application Data को Bind करने के लिए किया जाता है. Angularjs मे चार प्रकार के Directive का उपयोग Application Data को Bind करने के लिए किया जाता है.

  • ng-disabled Directive
  • ng-show Directive
  • ng-click Directive
  • ng-hide Directive

ng-disabled Directive

यह Directive AngularJS Application Data को HTML Elements के Disabled विशेषता मे बांधने के लिए उपयोग होती है.

<input type = "checkbox" ng-model = "enableDisableButton">Disable Button
<button ng-disabled = "enableDisableButton">Click Me!</button>

ng-show Directive

इस Directive का उपयोग AngularJS मे एक HTML Elements को दिखाने या छुपाने मे किया जाता है.

<input type = "checkbox" ng-model = "showHide1">Show Button
<button ng-show = "showHide1">Click Me!</button>

ng-click Directive

यह Directive एक AngularJS Click Event को Represent करता है और कुल Click को HTML Element मानता है.

<input type = "checkbox" ng-model = "showHide2">Hide Button
<button ng-hide = "showHide2">Click Me!</button>

ng-hide Directive

यह Directive एक HTML Element को छुपाता है या फिर दिखाता है.

<p>Total click: {{ clickCounter }}</p>
<button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>

For Example

<!DOCTYPE html>
<html>
<head>
<title>AngularJS HTML DOM</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "">
<table border = "0">
<tr>
<td>
<input type = "checkbox" ng-model = "enableDisableButton">Disable Button</td>
<td>
<button ng-disabled = "enableDisableButton">Click Me!</button>
</td>
</tr>
<tr>
<td>
<input type = "checkbox" ng-model = "showHide1">Show Button</td>
<td>
<button ng-show = "showHide1">Click Me!</button>
</td>
</tr>
<tr>
<td>
<input type = "checkbox" ng-model = "showHide2">Hide Button</td>
<td>
<button ng-hide = "showHide2">Click Me!</button>
</td>
</tr>
<tr>
<td>
<p>Total click: {{ clickCounter }}</p>
</td>
<td>
<button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>
</td>
</tr>
</table>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</body>
</html>

यहाँ भी जरूर पढ़े:-

Keyword: AngularJS क्या है?, AngularJS Kya Hai, What is AngularJS in Hindi, JavaScript और AngularJS में क्या अंतर है?, what is angularjs in hindi, angular 7 tutorial in hindi, angular 8 tutorial in hindi, angular 6 in hindi, learn angular 6 in hindi, angular 2 tutorial in hindi, angular 6 tutorial for beginners step by step in hindi, angular 5 tutorial in hindi

Leave a Reply

Your email address will not be published. Required fields are marked *