صفحه اصلی

محصولات و خدمات

راهنمای مشتریان

دانلود

امور نمایندگی

درباره ما

تماس با ما

فیش حقوق اینترنتی

محصولات شرکت

لیست سفارشات من

بوستان نرم افزاری نو با ایده های متفاوت

شرکت میهن رایان ارائه دهنده ی خدمات با کیفیت نرم افزاری در سطح کشور.

سخن مدیر عامل
ثبت نام کاربران

جستجو در سایت

031-52401690
 برای استفاده ی چند نوع نمایش ( View ) برای یک برنامه در AngularJS می توانید از عبارات ng-view ، ng-template و سرویس $routeProvider استفاده کنید.
 
عبارت ng-view : 
 
این عبارت به سادگی یک مکان نگهدارنده برای قرار گرفتن view می سازد. نحوه ی استفاده از آن به صورت زیر می باشد:
 

<div ng-app="mainApp">
...
<div ng-view></div>
</div>

 
عبارت ng-template : 
 
این عبارت برای ساختن view به کمک تگ script در HTML کاربرد دارد. و شامل id نیز می باشد که با استفاده از سرویس  $routerProvider آدرس دهی view را به کمک کنترل کننده انجام می دهد.
 

<div ng-app="mainApp">
...
<script type="text/ng-template" id="addStudent.htm">
<h2> Add Student </h2>
{{message}}
</script>
</div>

 
سرویس routeProvider$ یک سرویس کلیدی برای پیکربندی تنظیمات URLها ، آدرس دهی آنها به صفحات HTML و عبارات  ng-templateمربوطه و اتصال کنترل کننده ها به کار می رود.
 
کاربرد 1 : مشخص کردن یک بلوک script بوسیله آن و از نوع ng-template در داخل ماژول اصلی : 
 

<div ng-app="mainApp">
...
<script type="text/ng-template" id="addStudent.htm">
<h2> Add Student </h2>
{{message}}
</script>
</div>

 
کاربرد 2 : مشخص کردن یک بلوک  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'
});
});
 
 
توضیحات : 
 
            routeProvider$ به عنوان یک تابع در زیر پیکربندی ماژول mainApp مشخص شده است.
           routeProvider.when$، مشخص کننده ی URL "/addStudent" می باشد که به "addStudent.htm" آدرس دهی شده است. addStudent.htm باید در همان مسیر صفحه ی اصلی HTML مان باشد. اگر صفحه ی              HTML مشخص نشده باشد، آنگاه ng-template با id ="addStudent.htm" می آبد. ما در این مورد از ng-template استفاده کردیم.
            ⦁عبارت otherwise برای تنظیم view پیش فرض به کار می رود.
            عبارت 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>
 
 
خروجی مثال بالا : 
 
 
 
 
 

 

تماس با ما

اطلاعات آدرس
ایران - اصفهان- مبارکه- خیابان بسیج شمالی- جنب داروخانه شبانه روزی دکتر کریمیان
031-52401610 ___031-52401690- info@mihanrayan.ir
03191011610 (10 خط همزمان)

این شرکت آماده ارائه خدمات خود در زمینه نصب و استقرار نرم افزارهای فوق و نصب و راه انداری شبکه و کلیه خدمات می باشد جهت خرید و پشتیبانی با ما تماس با ما.