دوره آموزشی AngularJS به زبان فارسی - بخش هفدهم
بسم الله الرحمن الرحیم
این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و Angular.js " مراجعه کنید.
مشاهده تمامی آموزش های دوره AngularJS
آموزش AngularJS
بخش هفدهم
AngularJS Views
AngularJS از قابلیت طراحی برنامه های تک صفحه (Single Page Application) با قابلیت استفاده از چندین View در یک صفحه پشتیبانی می کند. برای استفاده از این ویژگی AngularJS رهنمودهای ng-view و ng-templateرا به همراه سرویس routeProvider$ فراهم کرده است.
ng-view
تگ ng-view به سادگی یک place holder ایجاد می کند که بر اساس تنظیمات صورت گرفته View مورد نظر (html یا ng-template view) می تواند درون place holder ما قرار گیرد.
روش استفاده
یک Div با ng-view درون ماژول اصلی تعریف می کند.
بسم الله الرحمن الرحیم
این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و Angular.js " مراجعه کنید.
مشاهده تمامی آموزش های دوره AngularJS
آموزش AngularJS
بخش هفدهم
AngularJS Views
AngularJS از قابلیت طراحی برنامه های تک صفحه (Single Page Application) با قابلیت استفاده از چندین View در یک صفحه پشتیبانی می کند. برای استفاده از این ویژگی AngularJS رهنمودهای ng-view و ng-templateرا به همراه سرویس routeProvider$ فراهم کرده است.
ng-view
تگ ng-view به سادگی یک place holder ایجاد می کند که بر اساس تنظیمات صورت گرفته View مورد نظر (html یا ng-template view) می تواند درون place holder ما قرار گیرد.
روش استفاده
یک Div با ng-view درون ماژول اصلی تعریف می کند.
<div ng-app="mainApp">
...
<div ng-view></div>
</div>
ng-template
رهنمود ng-template برای ایجاد یک html view با استفاده از تگ Script مورد استفاده قرار می گیرد. این html view شامل یک تگ “id” است که برای نگاشت (Map) یک View به Controller توسط سرویس routeProvider$ مورد استفاده قرار می گیرد.
روش استفاده
یک بلاک Script درون ماژول اصلی با نوع ng-template تعریف کنید.
<div ng-app="mainApp">
...
<script type="text/ng-template" id="addStudent.htm">
<h2> Add Student </h2>
{{message}}
</script>
</div>
routeProvider$
routeProvider$ سرویس اصلی است که تنظیمات و پیکربندی آدرس ها و نگاشت (url و map) صفحات HTML یا ng-template ها را انجام می دهد و کنترلر متناسب را به صفحه ما پیوند می زند.
روش استفاده
یک بلاک Script با ماژول اصلی با مقداردهی تنظیمات routing ایجاد کنید.
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
چندین نکته بسیار مهم در موارد گفته شده بالا وجود دارد:
1- routeProvider$ همانند یک تابع در بخشconfig ماژول اصلی تعریف شده است و با دستور کلیدی routeProvider$ مشخص شده است.
2- دستور $routeProvider.when یک آدرس (url) را مشخص کرده است که به فایل addStudent.htm نگاشت (map) می شود. addStudent.htm باید در همان مسیری که فایل اصلی ما قرار دارد، قرار گیرد. اگر صفحه html تعریف نشده است پس باید از دستور ng-template با "id="addStudent.htm استفاده شود. ما از ng-template استفاده کرده ایم.
3- دستور otherwise برای تعریف view پیش فرض مورد استفاده قرار می گیرد.
4- دستور controller برای تعیین کنترلر مورد نظر ما برای این view مورد استفاده قرار می گیرد.
مثال
تمامی مطالب ذکر شده بالا در این مثال معرفی شده است.
<html>
<head>
<title>Angular JS Views</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp">
<p><a href="#addStudent">Add Student</a></p>
<p><a href="#viewStudents">View Students</a></p>
<div ng-view></div>
<script type="text/ng-template" id="addStudent.htm">
<h2> Add Student </h2>
{{message}}
</script>
<script type="text/ng-template" id="viewStudents.htm">
<h2> View Students </h2>
{{message}}
</script>
</div>
<script>
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
mainApp.controller('AddStudentController', function($scope) {
$scope.message = "This page will be used to display add student form";
});
mainApp.controller('ViewStudentsController', function($scope) {
$scope.message = "This page will be used to display all the students";
});
</script>
</body>
</html>
کد بالا را ذخیره و اجرا کنید.