AngularJS
रूटिंग का उपयोग करते हुए रूटिंग

टिप्पणियों

मूल उदाहरण

यह उदाहरण 3 मार्गों के साथ एक छोटा एप्लिकेशन सेट करना दिखाता है, जिनमें से प्रत्येक का अपना दृश्य और नियंत्रक है, controllerAs सिंटैक्स का उपयोग करता controllerAs ।

हम अपने राउटर को कोणीय .config फ़ंक्शन पर कॉन्फ़िगर करते हैं

1. हम $routeProvider को .config में $routeProvider करते .config
2. हम एक रूट डेफिनेशन ऑब्जेक्ट के साथ .when मेथड पर अपने रूट के नाम को परिभाषित करते हैं।
3. हम अपने template या templateUrl , controller और controllerAs निर्दिष्ट करने वाली किसी वस्तु के साथ .when विधि की आपूर्ति करते हैं

app.js

angular.module('myApp', ['ngRoute'])
  .controller('controllerOne', function() {
    this.message = 'Hello world from Controller One!';
  })
  .controller('controllerTwo', function() {
    this.message = 'Hello world from Controller Two!';
  })
  .controller('controllerThree', function() {
    this.message = 'Hello world from Controller Three!';
  })
  .config(function($routeProvider) {
    $routeProvider
    .when('/one', {
      templateUrl: 'view-one.html',
      controller: 'controllerOne',
      controllerAs: 'ctrlOne'
    })
    .when('/two', {
      templateUrl: 'view-two.html',
      controller: 'controllerTwo',
      controllerAs: 'ctrlTwo'
    })
    .when('/three', {
      templateUrl: 'view-three.html',
      controller: 'controllerThree',
      controllerAs: 'ctrlThree'
    })
    // redirect to here if no other routes match
    .otherwise({
      redirectTo: '/one'
    });
  });

तो फिर हमारे HTML में हम अपने मार्गदर्शक का उपयोग कर परिभाषित <a> साथ तत्व href का एक मार्ग के नाम के लिए, helloRoute हम करेंगे मार्ग के रूप में <a href="#/helloRoute">My route</a>

हम अपने मार्गों को इंजेक्ट करने के लिए एक कंटेनर और निर्देशक ng-view साथ अपना दृष्टिकोण भी प्रदान करते हैं।

index.html

<div ng-app="myApp">
  <nav>
    <!-- links to switch routes -->
    <a href="#/one">View One</a>
    <a href="#/two">View Two</a>
    <a href="#/three">View Three</a>
  </nav>
  <!-- views will be injected here -->
  <div ng-view></div>
  <!-- templates can live in normal html files -->
  <script type="text/ng-template" id="view-one.html">
    <h1>{{ctrlOne.message}}</h1>
  </script>

  <script type="text/ng-template" id="view-two.html">
    <h1>{{ctrlTwo.message}}</h1>
  </script>

  <script type="text/ng-template" id="view-three.html">
    <h1>{{ctrlThree.message}}</h1>
  </script>
</div>

मार्ग पैरामीटर उदाहरण

यह उदाहरण नियंत्रक में उनका उपयोग करने के लिए मार्ग में मूल उदाहरण पासिंग मापदंडों का विस्तार करता है

ऐसा करने के लिए हमें निम्न करने की आवश्यकता है:

1. मार्ग नाम में पैरामीटर स्थिति और नाम कॉन्फ़िगर करें
2. हमारे नियंत्रक में $routeParams सेवा को इंजेक्ट करें

app.js

angular.module('myApp', ['ngRoute'])
  .controller('controllerOne', function() {
    this.message = 'Hello world from Controller One!';
  })
  .controller('controllerTwo', function() {
    this.message = 'Hello world from Controller Two!';
  })
  .controller('controllerThree', ['$routeParams', function($routeParams) {
    var routeParam = $routeParams.paramName

    if ($routeParams.message) {
        // If a param called 'message' exists, we show it's value as the message
        this.message = $routeParams.message;
    } else {
        // If it doesn't exist, we show a default message
        this.message = 'Hello world from Controller Three!';
    }
  }])
  .config(function($routeProvider) {
    $routeProvider
    .when('/one', {
      templateUrl: 'view-one.html',
      controller: 'controllerOne',
      controllerAs: 'ctrlOne'
    })
    .when('/two', {
      templateUrl: 'view-two.html',
      controller: 'controllerTwo',
      controllerAs: 'ctrlTwo'
    })
    .when('/three', {
      templateUrl: 'view-three.html',
      controller: 'controllerThree',
      controllerAs: 'ctrlThree'
    })
    .when('/three/:message', { // We will pass a param called 'message' with this route
      templateUrl: 'view-three.html',
      controller: 'controllerThree',
      controllerAs: 'ctrlThree'
    })
    // redirect to here if no other routes match
    .otherwise({
      redirectTo: '/one'
    });
  });

फिर, हमारे टेम्प्लेट में कोई भी बदलाव करने के साथ, केवल कस्टम संदेश के साथ एक नई लिंक जोड़कर, हम अपने दृश्य में नए कस्टम संदेश देख सकते हैं।

index.html

<div ng-app="myApp">
  <nav>
    <!-- links to switch routes -->
    <a href="#/one">View One</a>
    <a href="#/two">View Two</a>
    <a href="#/three">View Three</a>
    <!-- New link with custom message -->
    <a href="#/three/This-is-a-message">View Three with "This-is-a-message" custom message</a>
  </nav>
  <!-- views will be injected here -->
  <div ng-view></div>
  <!-- templates can live in normal html files -->
  <script type="text/ng-template" id="view-one.html">
    <h1>{{ctrlOne.message}}</h1>
  </script>

  <script type="text/ng-template" id="view-two.html">
    <h1>{{ctrlTwo.message}}</h1>
  </script>

  <script type="text/ng-template" id="view-three.html">
    <h1>{{ctrlThree.message}}</h1>
  </script>
</div>

व्यक्तिगत मार्गों के लिए कस्टम व्यवहार को परिभाषित करना

व्यक्तिगत मार्गों के लिए कस्टम व्यवहार को परिभाषित करने का सबसे सरल तरीका काफी आसान होगा।

इस उदाहरण में हम इसका उपयोग किसी उपयोगकर्ता को प्रमाणित करने के लिए करते हैं:

1) routes.js : किसी भी वांछित मार्ग के लिए एक नई संपत्ति (जैसे requireAuth )

angular.module('yourApp').config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/home', {
            templateUrl: 'templates/home.html',
            requireAuth: true
        })
        .when('/login', {
            templateUrl: 'templates/login.html',
        })
        .otherwise({
            redirectTo: '/home'
        });
}])

2) एक टॉप-टियर कंट्रोलर में जो ng-view अंदर एक तत्व के लिए बाध्य नहीं है (कोणीय $routeProvider साथ संघर्ष से बचने के लिए), जांचें कि क्या newUrl पास requireAuth संपत्ति है और तदनुसार कार्य करें

angular.module('YourApp').controller('YourController', ['$scope', 'session', '$location',
    function($scope, session, $location) {

        $scope.$on('$routeChangeStart', function(angularEvent, newUrl) {
            
            if (newUrl.requireAuth && !session.user) {
                // User isn’t authenticated
                $location.path("/login");
            }
            
        });
    }
]);