مسیریابی در AngularJs #بخش دوم
نویسنده: ناصر طاهری
تاریخ: ۱۳۹۲/۰۹/۲۳ ۲۳:۵
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
when('/showOrderDetails/:orderId', {
templateUrl: 'templates/show_order.html',
controller: 'ShowOrderController'
}); myFirstRoute .controller('ShowOrderController', function($scope, $routeParams) {
$scope.order_id = $routeParams.orderId;
}); <body ng-app="myFirstRoute" style="
<div>
<div>
<div>
<table dir="rtl">
<thead>
<tr>
<th>#</th><th>˜کد</th><th>نام محصول</th><th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>1234</td><td>15" Samsung Laptop</td>
<td><a href="#showOrderDetails/1234">جزئیات محصول</a></td>
</tr>
<tr>
<td>2</td><td>5412</td><td>2TB Seagate Hard drive</td>
<td><a href="#showOrderDetails/5412">جزئیات محصول</a></td>
</tr>
<tr>
<td>3</td><td>9874</td><td>D-link router</td>
<td><a href="#showOrderDetails/9874">جزئیات محصول</a></td>
</tr>
</tbody>
</table>
<div ng-view></div>
</div>
</div>
</div>
<script src="js/bootstrap.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="app.js"></script>
</body> <h2>سفارش شماره #{{order_id}}</h2>
محل قرار گیری جزئیات سفارش شماره : <b>#{{order_id}}</b>. <script type="text/ng-template" id="add_order.html">
<h2> ثبت سفارش </h2>
{{message}}
</script> when('/AddNewOrder', {
templateUrl: 'add_order.html',
controller: 'AddOrderController'
}).
when('/ShowOrders', {
templateUrl: 'show_orders.html',
controller: 'ShowOrdersController'
}); myFirstRoute.controller('AddOrderController', function($scope) {
$scope.message = 'صفحه نمایش ثبت سفارش جدید';
});
myFirstRoute.controller('ShowOrdersController', function($scope) {
$scope.message = 'صفحه نمایش لیست سفارشات';
}); <body ng-app="myFirstRoute" style="
<div>
<div>
<div>
<ul>
<li><a href="#AddNewOrder"> ثبت سفارش جدید </a></li>
<li><a href="#ShowOrders"> نمایش شفارشات </a></li>
</ul>
</div>
<div>
<div ng-view></div>
</div>
</div>
</div>
<script type="text/ng-template" id="add_order.html">
<h2> ثبت سفارش </h2>
{{message}}
</script>
<script type="text/ng-template" id="show_orders.html">
<h2> نمایش سفارشات </h2>
{{message}}
</script>
<script src="js/bootstrap.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="app.js"></script>
</body> when('/AddNewOrder', {
templateUrl: 'templates/add_order.html',
controller: 'CommonController',
foodata: 'addorder'
}).
when('/ShowOrders', {
templateUrl: 'templates/show_orders.html',
controller: 'CommonController',
foodata: 'showorders'
});
sampleApp.controller('CommonController', function($scope, $route) {
//access the foodata property using $route.current
var foo = $route.current.foodata;
alert(foo);
}); $route.current.foodata
var myFirstRoute = angular.module('myFirstRoute', ['ngRoute']); myFirstRoute.controller('ShowPage1Controller', function ($route) {
this.message = 'Content of page-one.html';
//access the foodata property using $route.current
var foo = $route.current.foodata;
alert(foo);
}); myFirstRoute.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/pageOne', {
templateUrl: 'templates/page_one.html',
controller: 'ShowPage1Controller',
controllerAs: 'tCtrlOne',
foodata: 'valueOne'
}).
when('/pageTwo', {
templateUrl: 'templates/page_two.html',
controller: 'ShowPage2Controller',
controllerAs: 'tCtrlTwo',
foodata: 'valueTwo'
}).
otherwise({
redirectTo: '/pageOne'
});
}]);