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