एंजुलरजेएस रूटिंग
- पिछला पृष्ठ एंजुलरजेएस एनीमेशन
- अगला पृष्ठ एंजुलरजेएस एप्लीकेशन
ngRoute मॉड्यूल आपके अनुप्रयोग को सिंगल पेज एप्लिकेशन बनाते हैं。
AngularJS में रूटिंग क्या है?
अगर आप अनुप्रयोग के अलग-अलग पृष्ठों पर नेविगेट करना चाहते हैं और चाहते हैं कि अनुप्रयोग SPA (सिंगल पेज एप्लिकेशन) बने और पृष्ठों का पुनर्लोड न हो, तो आप ngRoute मॉड्यूल。
ngRoute मॉड्यूल आपके अनुप्रयोग को अलग-अलग पृष्ठों पर रूट करते हैं और पूरे अनुप्रयोग को फिर से लोड करने के लिए आवश्यक नहीं है।
उदाहरण
"रेड.हेम", "ग्रीन.हेम" और "ब्लू.हेम" पर नेविगेट करें:
<body ng-app="myApp">
<p><a href="#/!">घर पृष्ठ</a></p>
<a href="#!red">रेड</a>
<a href="#!green">ग्रीन</a>
<a href="#!blue">ब्लू</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
});
.when("/red", {
templateUrl : "red.htm"
});
.when("/green", {
templateUrl : "green.htm"
});
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
</body>
मैं क्या चाहता हूँ?
अपने अनुप्रयोग को रूट के लिए तैयार करने के लिए AngularJS Route मॉड्यूल को शामिल करना होगा:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script>
तब, आपको ngRoute अनुप्रयोग मॉड्यूल में निर्भरता जोड़ें:
var app = angular.module("myApp", ["ngRoute"]);
अब आपका अनुप्रयोग उपलब्ध कराने वाले रूटों को एक्सेस कर सकता है。 $routeProvider रूट मॉड्यूल का उपयोग करें。
कृपया $routeProvider अनुप्रयोग में विभिन्न रूटों को कॉन्फ़िगर करें:
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
});
.when("/red", {
templateUrl : "red.htm"
});
.when("/green", {
templateUrl : "green.htm"
});
.when("/blue", {
templateUrl : "blue.htm"
});
});
यह कहाँ है?
आपका अनुप्रयोग रूट प्रदान करने वाले सामग्री को रखने के लिए एक कंटेनर की जरूरत है。
यह कंटेनर यह रूट प्रदान करने वाले सभी दृश्यों का प्लेसहोल्डर होगा。 डिरेक्टिव。
अनुप्रयोग में डिरेक्टिव को तीन अलग-अलग तरीकों से शामिल किया जा सकता है。 यह रूट प्रदान करने वाले सभी दृश्यों का प्लेसहोल्डर होगा。 डिरेक्टिव:
उदाहरण
<div ng-view></div>
उदाहरण
<ng-view></ng-view>
उदाहरण
<div class="ng-view"></div>
अनुप्रयोग केवल एक यह रूट प्रदान करने वाले सभी दृश्यों का प्लेसहोल्डर होगा。 डिरेक्टिव
$routeProvider
इस्तेमाल $routeProvider، आप लिंक पर क्लिक करने पर दिखाने वाले पृष्ठ को परिभाषित कर सकते हैं。
उदाहरण
परिभाषित करें $routeProvider：
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
});
.when("/london", {
templateUrl : "london.htm"
});
.when("/paris", {
templateUrl : "paris.htm"
});
});
अनुप्रयोग के config मेथड डिफाइन करने में $routeProvider। अनुप्रयोग लोड होते समय config तरीके में रजिस्टर की गई कार्य
कंट्रोलर
इस्तेमाल $routeProviderआप दर्शक (व्यू) के लिए एक कंट्रोलर भी परिभाषित कर सकते हैं。
उदाहरण
कंट्रोलर जोड़ें:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
});
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
});
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
$scope.msg = "मैं लंदन प्यार करता हूँ";
});
app.controller("parisCtrl", function ($scope) {}}
$scope.msg = "I love Paris";
});
"london.htm" और "paris.htm" सामान्य HTML फ़ाइल हैं, जिनमें आप AngularJS एक्सप्रेशन जैसे AngularJS अनुप्रयोग के अन्य HTML भागों में जैसे जैसे जोड़ सकते हैं。
ये फ़ाइलें इस तरह दिखती हैं:
london.htm
<h1>लंदन</h1>
<h3>लंदन इंग्लैंड की राजधानी है。</h3>
<p>यह ब्रिटेन का सबसे अधिक जनसंख्या वाला शहर है, जिसका महानगरीय क्षेत्र 13 मिलियन से अधिक निवासी हैं。</p>
<p>{{msg}}</p>
paris.htm
<h1>दीपारिस</h1>
<h3>दीपारिस फ्रांस की राजधानी है。</h3>
<p>दीपारिस क्षेत्र यूरोप में सबसे बड़े जनसंख्या केंद्रों में से एक है, जिसमें 12 मिलियन से अधिक निवासी हैं。</p>
<p>{{msg}}</p>
टैम्पलेट
पहले के उदाहरण में, हमने $routeProvider.when विधि में इसका उपयोग किया गया है templateUrl गुण
आप इसके when विधि का उपयोग कर सकते हैं。 template गुण, जो आपको प्रत्यक्ष रूप से गुण मान में HTML लिखने की अनुमति देता है, न कि पृष्ठ को उदाहरण में रेफ़रेंस करने की।
उदाहरण
टैम्पलेट लिखें:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click on the links to change this content</p>"
});
.when("/banana", {
टेम्पलेट : "<h1>बैनाना</h1><p>बैनाना में लगभग 75% पानी है。</p>"
});
.when("/tomato", {
टेम्पलेट : "<h1>टोमाटो</h1><p>टोमाटो में लगभग 95% पानी है。</p>"
});
});
otherwise विधि का उपयोग किया है
पहले के उदाहरण में, हमने $routeProvider जब इसके when विधि का उपयोग किया गया है
आप इसके when विधि का उपयोग कर सकते हैं。 otherwise विधि, जब अन्य सभी रूट अनुरूप नहीं होते हैं, तो यह डिफ़ॉल्ट रूट बन जाएगी。
उदाहरण
यदि न तो "Banana" लिंक पर क्लिक नहीं किया गया है और न ही "Tomato" लिंक पर क्लिक किया गया है, तो उन्हें बताइए:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/banana", {
टेम्पलेट : "<h1>बैनाना</h1><p>बैनाना में लगभग 75% पानी है。</p>"
});
.when("/tomato", {
टेम्पलेट : "<h1>टोमाटो</h1><p>टोमाटो में लगभग 95% पानी है。</p>"
});
.otherwise({
टेम्पलेट : "<h1>खाली</h1><p>कोई चयन नहीं किया गया है</p>"
});
});
- पिछला पृष्ठ एंजुलरजेएस एनीमेशन
- अगला पृष्ठ एंजुलरजेएस एप्लीकेशन
