ਐੱਂਜੁਲਰਜੇਐੱਸ ਰੂਟਿੰਗ
- ਪਿਛਲਾ ਪੰਨਾ ਐੱਂਜੁਲਰਜੇਐੱਸ ਐਨੀਮੇਸ਼ਨ
- ਅਗਲਾ ਪੰਨਾ ਐੱਂਜੁਲਰਜੇਐੱਸ ਐਪਲੀਕੇਸ਼ਨ
ngRoute ਮੋਡੀਊਲ ਤੁਹਾਡੇ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ Single Page Application ਬਣਾਉਣ ਮਦਦ ਕਰਦਾ ਹੈ。
AngularJS ਵਿੱਚ ਰੂਟਿੰਗ ਕੀ ਹੈ?
ਅਗਰ ਤੁਸੀਂ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਪੰਨਿਆਂ 'ਤੇ ਨਾਵੀਗੇਟ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਪਰ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ SPA (Single Page Application) ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ ਅਤੇ ਪੰਨਿਆਂ ਦਾ ਮੁੜ-ਲੋਡ ਨਹੀਂ ਹੋਵੇ, ਤਾਂ ਤੁਸੀਂ ngRoute ਮੋਡੀਊਲ。
ngRoute ਮੋਡੀਊਲ ਆਪਣੇ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਵੱਖ-ਵੱਖ ਪੰਨਿਆਂ 'ਤੇ ਰੂਟ ਕਰਦਾ ਹੈ ਅਤੇ ਪੂਰੇ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਮੁੜ-ਲੋਡ ਨਹੀਂ ਕਰਦਾ。
مثال
ਇਹਨਾਂ ਵਿੱਚ ਨਾਵੀਗੇਟ ਕਰੋ "red.htm"、"green.htm" ਅਤੇ "blue.htm":
<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
تمپلیٹ لکھیئے:
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
تمپلیٹ لکھیئے:
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
تمپلیٹ لکھیئے:
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
تمپلیٹ لکھیئے:
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) {
app.controller("parisCtrl", function ($scope) {}}
});
$scope.msg = "I love Paris";
"london.htm" اور "paris.htm" عام HTML فائل ہیں، ان میں آپ میں بھی AngularJS ایکسپریشن اضافہ کرسکتے ہیں، جیسا کہ AngularJS ایپلی کیشن کے دیگر HTML حصوں میں.
این فائل این طرح دیکھیں:
london.htm <h1>London</h1> <h3>London is the capital city of England.</h3> <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
paris.htm <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>
تمپلیٹ پچھلے مثال میں، ہم نے $routeProvider.when متد میں استعمال کیا گیا تھا templateUrl
آپ اور اس کا when متد استعمال کرسکتے ہیں。 پارٹی. template
مثال
پارٹی، جو آپ کو یقین دہانی دیتا ہے کہ آپ کی ترجیحی پارٹی کا استعمال کیا جائیگا، اگر نہ تو آپ کی ترجیحی پارٹی نہیں ماتختیار ہوئی ہو اور نہ تو کسی دوسری پارٹی نے ماتختیار کیا ہو。
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
تمپلیٹ لکھیئے:
.when("/", {
})
.when("/banana", {
ਟੈਮਪਲੇਟ : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
})
.when("/tomato", {
ਟੈਮਪਲੇਟ : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
});
});
template : "<h1>Main</h1><p>Click on the links to change this content</p>"
otherwise متد استعمال کیا تھا $routeProvider پچھلے مثال میں، ہم نے
آپ اور اس کا when متد استعمال کرسکتے ہیں。 otherwise مетод، جب دیگر تمام روٹس نہیں ماتختیار ہوئی ہو، وہ اس وقت دفعاتی روٹ بن جائیگا。
مثال
اگر نہیں کلک کیا گیا ہے "Banana" لنک یا "Tomato" لنک، ان کو بتائیئے:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/banana", {
ਟੈਮਪਲੇਟ : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
})
.when("/tomato", {
ਟੈਮਪਲੇਟ : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
})
.otherwise({
ਟੈਮਪਲੇਟ : "<h1>None</h1><p>Nothing has been selected</p>"
});
});
- ਪਿਛਲਾ ਪੰਨਾ ਐੱਂਜੁਲਰਜੇਐੱਸ ਐਨੀਮੇਸ਼ਨ
- ਅਗਲਾ ਪੰਨਾ ਐੱਂਜੁਲਰਜੇਐੱਸ ਐਪਲੀਕੇਸ਼ਨ
