एंगुलरजेएस रूटिंग
ngRouteमॉड्यूल आपके एप्लिकेशन को सिंगल पेज एप्लिकेशन बनने में मदद करता है ।
AngularJS में रूटिंग क्या है?
यदि आप अपने एप्लिकेशन में विभिन्न पृष्ठों पर नेविगेट करना चाहते हैं, लेकिन आप यह भी चाहते हैं कि एप्लिकेशन एक एसपीए (सिंगल पेज एप्लिकेशन) हो, बिना पेज रीलोडिंग के, आप ngRouteमॉड्यूल का उपयोग कर सकते हैं।
ngRouteमॉड्यूल आपके एप्लिकेशन को संपूर्ण एप्लिकेशन को पुनः लोड किए बिना विभिन्न पृष्ठों पर रूट करता है।
उदाहरण:
"Red.htm", "green.htm", और "blue.htm" पर नेविगेट करें:
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">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 रूट मॉड्यूल को शामिल करना होगा:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/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"
});
});
वह कहाँ गया?
रूटिंग द्वारा प्रदान की गई सामग्री को रखने के लिए आपके एप्लिकेशन को एक कंटेनर की आवश्यकता है।
यह कंटेनर ng-viewनिर्देश है।
ng-viewआपके आवेदन में निर्देश शामिल करने के तीन अलग-अलग तरीके हैं :
उदाहरण:
<div ng-view></div>
उदाहरण:
<ng-view></ng-view>
उदाहरण:
<div
class="ng-view"></div>
एप्लिकेशन में केवल एक ng-viewनिर्देश हो सकता है, और यह मार्ग द्वारा प्रदान किए गए सभी दृश्यों के लिए प्लेसहोल्डर होगा।
$मार्गप्रदाता
जब कोई उपयोगकर्ता किसी लिंक पर क्लिक करता है तो $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"
});
});
अपने आवेदन की विधि का $routeProviderउपयोग परिभाषित करें । आवेदन लोड होने पर विधि configमें पंजीकृत कार्य किया जाएगा।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 = "I love London";
});
app.controller("parisCtrl", function
($scope) {
$scope.msg = "I love Paris";
});
"London.htm" और "paris.htm" सामान्य HTML फ़ाइलें हैं, जिन्हें आप अपने AngularJS एप्लिकेशन के किसी भी अन्य HTML अनुभागों की तरह AngularJS एक्सप्रेशन जोड़ सकते हैं।
फ़ाइलें इस तरह दिखती हैं:
<h1>London</h1>
<h3>London is the capital city of England.</h3>
<p>It
is the most populous city in the United Kingdom, with a metropolitan area of
over 13 million inhabitants.</p>
<p>{{msg}}</p>
<h1>Paris</h1>
<h3>Paris is the capital city of France.</h3>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
<p>{{msg}}</p>
टेम्पलेट
पिछले उदाहरणों में हमने विधि templateUrlमें गुण का
उपयोग किया है।$routeProvider.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", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
});
});
अन्यथा विधि
पिछले उदाहरणों में हमने whenविधि का उपयोग किया है $routeProvider।
आप otherwiseविधि का उपयोग भी कर सकते हैं, जो कि डिफ़ॉल्ट मार्ग है जब अन्य में से किसी को भी मेल नहीं मिलता है।
उदाहरण:
यदि न तो "केला" और न ही "टमाटर" लिंक पर क्लिक किया गया है, तो उन्हें बताएं:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
})
.otherwise({
template : "<h1>None</h1><p>Nothing
has been selected</p>"
});
});