AngularJS Kya Hai

First Page
Next Page

AngularJS को Single Page Applications बनाने के लिए उपयोग मे लाया जाता है. AngularJS Web Applications या Websites के लिए एक Open Source Javascript MVC Framework है. यह HTML के विस्तार को और गतिशील बनाता है.

Single Page Applications मे हम Databace से Data को Page पर दिखाते है और Page को Refresh करने की जरूरत भी नही होती है. यह एक ऐसा Application है जिसमे हम एक Page से दूसरे Page पर जा सकते है.

AngularJS को अपने Web Page मे जोड़ने के लिए हम उसी प्रकार <script> Tag का उपयोग करते है जैसे कि Javascript के Code को अपने Web Page मे जोड़ने के लिए करते है. Single Page Applications के लिए AngularJS Framework वास्तविक समय अनुभव के लिए Unique Interactive Features को भी बनाता है.

एक Web Developer के रूप मे आपको नियमित आधार पर नए Frameworks का उपयोग करने का तरीका जानने की आवश्यकता होगी AngularJS एक पूर्ण विशेषताओं वाला Frameworks है जो Developer के बीच Unreliable रूप से लोकप्रिय है.

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

For Example

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

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

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 Introduction

AngularJS Dynamic Web Application के लिए एक Structural Framework है. यह आपको अपनी Template मे HTML Language का उपयोग करने की अनुमति देता है. Angularjs एक Open Source JavaScript Framework है. AngularJS का उपयोग दुनिया भर के सभी Developers General रूप से करते है. इसे किसी भी व्यक्ति द्वारा स्वतंत्र रूप से उपयोग, बदला और shared किया जा सकता है. AngularJS को Google द्वारा Developed किया गया है.

AngularJS को नये Characteristics के साथ HTML को Expansion करने के लिए उपयोग में लाया जाता है. AngularJS एक Web Application Page को बनाने के लिए सबसे Suitable है.

MVC Architecture

AngularJS MVC Architecture को Follows करता है. MVC Web Applications के लिए Developer द्वारा उपयोग किए जाने वाले सबसे General Designing Patterns होता है.

AngularJS के फायदे

  • AngularJS Google द्वारा Supported है.

  • AngularJS Dependency Injection का उपयोग करता है.

  • AngularJS Single Page Application को Support करता है.

  • AngularJS MVC Design Pattern का उपयोग करके चिंताओं को अलग करने का समर्थन करता है.

  • AngularJS Data और Model को Expression के साथ सीधे सीधे Add करने मे सहायता करता है.

  • यह बहुत तेजी से काम करता है क्योंकि यह Ajax के साथ काम करता है और यह केवल Required Content को ही Load करता है.

  • यह एक Open source Framework है इसलिए आप इसका उपयोग करते समय कम से कम Errors और Problems की संख्या की उम्मीद कर सकते है.

  • AngularJS Modules नामक Different Parts मे Code और Efficiency को तोड़ता है यह एक Capable तरीके से Code को Managed और उपयोग करने मे सहायता करता है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Angularjs Expressions Example</title>
   </head>
   <body>
      <div ng-app="">
         <p>Angularjs Example</p>
         <p>Name:<input type="text" ng-model="name" 
            placeholder="Enter Name Here">
         </p>
         <h1>Hello {{name}}</h1>
      </div>
   </body>
</html>

Output

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: {{ 5 + 5 }}</p>
      </div>
   </body>
</html>

Output

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=6;cost=6">
         <p>Total in dollar: {{ quantity * cost }}</p>
      </div>
   </body>
</html>

Output

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 = "Ali";
            $scope.lastName = "Khan";
         });
      </script>
   </body>
</html>

Output

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>

Output

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 = "Ammu";  
         });  
      </script> 
   </body>
</html>

Output

Angularjs in Hindi Routing

Routing आपको अपने Application को Logical विचारो मे Divide करने और Controller के लिए अलग-अलग View को Bind करने मे मदद करता है.

AngularJS मे Routing हमे Multiple SPA Single Page Applications को लागू करने मे Capable बनाती है. एक Multiple Application मे एक से अधिक View शामिल होते है.

HTML Templates मे जहा पर प्रत्येक Template एक Specific Route के साथ जुड़ा होता है और जो User के Action के Result को गतिशील रूप से Load करता है. Link पर Click करना और Browser मे Specific URL Type करना ये सब Routing का उपयोग से ही समभाव हुआ है.

AngularJS Application अलग-अलग Material को दिखा सकता है जिस पर Way चुना गया है. Roots मूल रूप से Bookmark Enabled url के Specific Ingredients Angular JS Application के लिए है. Routing आपको अपने Application को Logical Views मे Divided करने मे मदद करता है और Controllers के लिए अलग-अलग View को भी Bind करता है.

AngularJS मे Routing कई मुख्य सुविधा मे से एक है. AngularJS Routing Examples मे हम कई तरह के छोटे से Single Page का निर्माण करेंगे जो आपको दिखाएगा कि कैसे AngularJS मे Routing काम करता है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Angular Routing Example</title>
      <script src = 
         "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
      </script>
      <script src = 
       "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js">
      </script>
   </head>
   <body ng-app="myApp">
      <p><a href="#/!">Main</a></p>
      <a href="#!maroon">Maroon</a>
      <a href="#!navy">Navy</a>
      <a href="#!purple">Purple</a>
      <div ng-view></div>
      <script>
         var app = angular.module("myApp", ["ngRoute"]);
         app.config(function($routeProvider) {
            $routeProvider
            .when("/", {
               templateUrl : "main.htm"
            })
            .when("/red", {
               templateUrl : "maroon.htm"
            })
            .when("/green", {
               templateUrl : "navy.htm"
            })
            .when("/blue", {
               templateUrl : "purple.htm"
            });
         });
      </script>
      <p>Plz Click on the links</p>
   </body>
</html>

Output

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>

Output

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 Tutorialsroot!";        
        });
      </script>
   </body>
</html>

Output

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: "Ali",
               lastName: "Khan",
               fees:500,
               
               subjects:[
                  {name:'Physics',marks:60},
                  {name:'Chemistry',marks:70},
                  {name:'Math',marks:55}
               ],
               
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
      
   </body>
</html>

Output

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>

Output

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: "Ali",
               lastName: "Khan",
               
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>    
   </body>
</html>

Output

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: "Ali",
               lastName: "Khan",
               fees:500,
               
               subjects:[
                  {name:'Physics',marks:70},
                  {name:'Chemistry',marks:80},
                  {name:'Math',marks:65},
                  {name:'English',marks:75},
                  {name:'Hindi',marks:67}
               ],
               
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
   </body>
</html>

Output

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>

Output

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 को हमने tutorialsroot.com से Load किया गया है तो हम उस HTML Page को केवल tutorialsroot.com 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>

Output

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>

Output

Angularjs in Hindi Animations

AngularJS मे हम CSS की मदद से Animated Transition को बनाते है. CSS उन HTML Elements को बदल देते है जो आपके प्रस्ताव को Misconception कर देते है.

AngularJS सामान्य Directive जैसे ngRepeat, ngSwitch, और ngView के साथ-साथ $ Animate Service के माध्यम से Custom Directive के लिए Animation Hook को प्रदान करता है. इन Animation Hook को अलग-अलग Directive के Life Cycle के दौरान Animation को Trigger करने के लिए Set किया जाता है.

AngularJS Animation सुविधा User को DOM के भीतर सामग्री Changes को Animate करने के लिए विशिष्ट CSS Style Class को Attachment करने मे सक्षम बनाता है जो Application के भीतर Directive का उपयोग कर रहा है. AngularJS मे Animation विशिष्ट घटनाओं को Animate करने के लिए CSS Transition का उपयोग करते है.

AngularJS मे Animation 1.1.5 बीटा Supported थे AngularJS 1.2 में सुविधा के एक स्थिर संस्करण के Release होने से पहले इसमे कई बदलाव हुए है. AngularJS Application मे Animation समर्थन को जोड़ा जा सकता है या बहुत आसानी से हटाया भी जा सकता है.

Library दोनो CSS पर आधारित है और Javascript पर आधारित Animation के लिए बहुत अच्छे समर्थन को लाता है. हालांकि Animation को Javascript में लिखा जा सकता है. लेकिन CSS Animation का उपयोग करने की सिफारिश की गई है. इसका कारण यह है कि CSS Animation का उपयोग ब्राउजर द्वारा कम प्राथमिकता के साथ किया जाता है.

For Example

<!DOCTYPE html>  
<html>  
   <style>  
      div {  
         transition: all linear 0.5s;  
         background: #3b58e4 !important;  
         height: 100px;  
         width: 100%;  
         position: relative;  
         top: 0;  
         left: 0;  
      }  
      .ng-hide {  
         height: 0;  
         width: 0;  
         background-color: transparent;  
         top:-200px;  
         left: 200px;  
      }  
   </style>    
      <script src = 
         "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
      </script>  
      <script src = 
      "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js">
      </script>  
      <body ng-app="ngAnimate">  
         <h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>  
         <div ng-hide="myCheck"></div>  
      </body>  
</html>

Output

First Page
Next Page