مسیرهای AngularJS
- صفحه قبلی انیمیشن‌های AngularJS
- صفحه بعدی نرم‌افزارهای AngularJS
ngRoute مодуل به برنامه شما کمک می‌کند تا به یک برنامه SPA تبدیل شود.
رouted در AngularJS چیست؟
اگر می‌خواهید به صفحات مختلف برنامه هدایت شوید و همچنین می‌خواهید برنامه شما SPA (برنامه یک صفحه‌ای) باشد و بارگذاری صفحه‌ها نباشد، می‌توانید از 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
.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"
});
});
کجا رفت؟
یک برنامه نیاز به یک قالب دارد تا محتوای ارائه شده توسط مسیر را قرار دهد.
این قالب ng-view .
دستورالعمل می‌تواند به سه روش مختلف در برنامه شامل شود ng-view دستورالعمل:
مثال
<div ng-view></div>
مثال
<ng-view></ng-view>
مثال
<div class="ng-view"></div>
یک برنامه فقط یک ng-view دستورالعمل، این یک جایگزین برای تمام مناظر ارائه شده توسط مسیر است.
$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.
این فایل‌ها به این شکل به نظر می‌رسند:
london.htm
<h1>لندن</h1>
<h3>لندن پایتخت انگلستان است.</h3>
<p>این بزرگترین شهر پر جمعیت در بریتانیا است، با منطقه شهری بیش از ۱۳ میلیون ساکن.</p>
<p>{{msg}}</p>
paris.htm
<h1>پاریس</h1>
<h3>پاریس پایتخت فرانسه است.</h3>
<p>منطقه پاریس یکی از بزرگترین مراکز جمعیت در اروپا است، با بیش از ۱۲ میلیون ساکن.</p>
<p>{{msg}}</p>
مدل
در مثال قبلی، ما در $routeProvider.when در روش templateUrl ویژگی.
شما همچنین می‌توانید از ویژگی template ویژگی، که به شما اجازه می‌دهد مستقیماً HTML را در ارزش ویژگی بنویسید، نه اینکه به صفحه مراجعه کنید.
مثال
مدل بنویسید:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>برای تغییر این محتوا روی لینک‌ها کلیک کنید</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>موزها حدود 75% آب دارند.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>گوجه‌فرنگی‌ها حدود 95% آب دارند.</p>"
});
});
روش otherwise استفاده کردیم
در مثال قبلی، ما از $routeProvider روش when استفاده کنید.
شما همچنین می‌توانید از otherwise وقتی که هیچ یک از مسیرهای دیگر با هیچ یک از مسیرهای دیگر مطابقت ندارد، این مسیر به عنوان مسیر پیش‌فرض خواهد بود.
مثال
اگر نه لینک "Banana" را کلیک نکرده‌اند و نه لینک "Tomato" را کلیک کرده‌اند، به آنها بگویید:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>موزها حدود 75% آب دارند.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>گوجه‌فرنگی‌ها حدود 95% آب دارند.</p>"
})
.otherwise({
template : "<h1>None</h1><p>هیچ چیزی انتخاب نشده است</p>"
});
});
- صفحه قبلی انیمیشن‌های AngularJS
- صفحه بعدی نرم‌افزارهای AngularJS
