AngularJS in Hindi

First Page
Next Page

Angularjs in Hindi Introduction

AngularJS गतिशील web application के लिए एक structural रूप रेखा है यह आपको अपनी template language के रूप मे HTML का उपयोग करने की अनुमति देता है . Angularjs एक Open source software है जिस का use दुनिया भर के सभी developers general रूप से करते है. AngularJS web applications के लिए एक Java script framework है जो Single Page Applications के development के लिए उपयोग होता है.

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

MVC Architecture

AngularJS MVC Architecture को follows करता है. MVC Web applications के लिए Developer द्वारा उपयोग किए जाने वाले सबसे General designing patterns होता है .

AngularJS Advantages

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

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

  • AngularJS Data और model को expression के साथ सीधे सीधे Add करने मे help करता है .

  • AngularJS modules नामक Different parts मे code और efficiency को तोड़ता है यह एक capable तरीके से code को Managed और उपयोग करने मे सहायता करता है.

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

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

  • AngularJS Single Page Application का समर्थन करता है .

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

<!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 को एक साथ समूह कर सकते है .

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

एक module को AngularJS द्वारा किसी Application को bootstrap करने के लिए use मे लाया जा सकता है. 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 का एक सेट है जिसका उपयोग Custom behavior set करने के लिए किया जाता है. AngularJS मे ऐसी performance को जोड़ने की क्षमता होती है जो हर तरह के Events को Control रख सकता है.

Generally जबकि 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 करता है. 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 करना चाहते है और यदि ऐसा है तो आपको naukari के लिए सही 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 हमे multiviz SPA Single Page Applications को लागू करने में capable बनाती है. एक multiviz 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 work करता है .

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 मे Work किया है तो आपने शायद आपने 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">
      <script>
         var app = angular.module("myShoppingList", []); 
         app.controller("myCtrl", function($scope) {
            $scope.products = ["Ali", "Khan", "Ammu"];
         });
      </script>
      <div ng-app="myShoppingList" ng-controller="myCtrl">
         <ul>
            <li ng-repeat="x in products">{{x}}</li>
         </ul>
      </div>
      <p>Angularjs Application List</p>
   </body>
</html>

Output

Angularjs in Hindi Scope

Angularjs मे Scope एक ऐसा object होता है जो View और Controllers के बीच Share context के रूप मे Work करता है और 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 में नहीं पहुंचाया जा सकता है.

First Page
Next Page