AngularJS Routing and Views

روترها بشما کمک می کنند تا برنامه ی خود را به ویو های مختلف تقسیم کرده و آنها را به کنترلر های مختلف متصل نمایید

 در شکل بالا ما دو Route url به نام های /ShowOrders و /AddNewOrder ایجاد کردیم. هر کدام از این نقاط مربوط به ویو های خاصی سات و بوسیله ی کنترلر خود مدیریت میشوند. 
۱- معرفی $routeProviderامکانات بسیار کاربردی انگولار در سرویسی بنام $routeProvider مهیا شده است. استفاده از این سرویس استفاده تنگاتنگ کنترلر ، ویو ، تمپلیت و مدیریت URL را بهینه نموده است. استفاده از این امکان نیز برای مرورگر بهینه شده است تا با استفاده از دکمه back  or forward مدیریت نرم افزار به هم نخورد.نحوه ی ایجاد روتینگدر نمونه سورس پایین اشاره ای به نحوه ی نگاشت روتینگ شده است. در مثال زیر .when() and .otherwise() برای شرح روتینگ در نظر گرفته شده است.

var sampleApp = angular.module('phonecatApp', []);
 
sampleApp .config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/addOrder', {
        templateUrl: 'templates/add-order.html',
        controller: 'AddOrderController'
      }).
      when('/showOrders', {
        templateUrl: 'templates/show-orders.html',
        controller: 'ShowOrdersController'
      }).
      otherwise({
        redirectTo: '/addOrder'
      });
  }]);

در نمونه کد بالا ما دو url داریم /addorder and /showOrder و آنها را به ویو های templates/add-order.html and template/show-orders.html اتصال داده ایم. هر گاه  http://app/#addOrder را در مرورگر باز کنیم، انگولار بصورت خودکار این آدرس را با روت های انگولار چک کرده و add-order.html را فراخوانی می کند و سپس AddOrderController را به ویو اضافه می نماید.

۱.۱- اولین پروژه با AngularJS + Routing

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>AngularJS Routing example</title>
  </head>

  <body ng-app="sampleApp">

    <div class="container">
		<div class="row">
		<div class="col-md-3">
			<ul class="nav">
				<li><a href="#AddNewOrder"> Add New Order </a></li>
				<li><a href="#ShowOrders"> Show Order </a></li>
			</ul>
		</div>
		<div class="col-md-9">
		  	<div ng-view></div>
		</div>
		</div>
    </div>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
	<script src="app.js"></script>
  </body>
</html>

همانطور که مشاهده می کنید دو دکمه وجود دارد با لینک های #AddNewOrder  و #ShowOrders که هر کدام یک تمپلیت قرار است لود کنند.

ng-view

این تگ مشخص کننده محل لود شدن تمپلیت است و در اصل نوعی placeholder‌ است.

ng-view را می توان به یکی از صورت های زیر در تمپلیت اصلی تعرف نمود

<div ng-view></div>
..
<ng-view></ng-view>
..
<div class="ng-view"></div>

۱.۲- اضافه سازی Routing  در AngularJS

app.js :

//Define an angular module for our app
var sampleApp = angular.module('sampleApp', []);

//Define Routing for app
//Uri /AddNewOrder -> template add_order.html and Controller AddOrderController
//Uri /ShowOrders -> template show_orders.html and Controller AddOrderController
sampleApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/AddNewOrder', {
		templateUrl: 'templates/add_order.html',
		controller: 'AddOrderController'
	}).
      when('/ShowOrders', {
		templateUrl: 'templates/show_orders.html',
		controller: 'ShowOrdersController'
      }).
      otherwise({
		redirectTo: '/AddNewOrder'
      });
}]);


sampleApp.controller('AddOrderController', function($scope) {
	
	$scope.message = 'This is Add new order screen';
	
});


sampleApp.controller('ShowOrdersController', function($scope) {

	$scope.message = 'This is Show orders screen';

});

با توجه به syntax بالا ، با دانش کمی از زبان انگلیسی می توان فهمید که روتینگ قراره چه فعالیت هایی رو انجام میده ، این فوق العادست و همینطور ساده

۱.۳- اضافه کرده HTML Template files

با توجه به فایل app.js نیاز است دو فایل در تمپلیت داشته باشیم و این فایل ها می بایست partial بوده و بعنوان مثال بصورت زیر باشند ، البته مثال زیر بعنوان محتوای فایل templates/add_order.html در نظر گرفته شده است

templates/add_order.html

<h2>Add New Order</h2>

{{ message }}

templates/show_orders.html

<h2>Show Orders</h2>

{{ message }}

دموی آنلاین :

Demo link: Plnkr.co

۲- نحوه ارسال پارامترها در Route Urls

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

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

when('/ShowOrder/:orderId', {
      templateUrl: 'templates/show_order.html',
      controller: 'ShowOrderController'
});

:orderId همان محل قرار گیری کد است رو روتر می فهمد قرار است در اینجا چیزی نوشته شود که آنرا تحویل کنترلر دهد

حالا طبق مثال زیر کنترلر این ورودی را از روتر تحویل میگیرد :

...
$scope.order_id = $routeParams.orderId;
...

حالا با دقت به مثال دموی آنلاین توجه نمایید :

Demo link: Plnkr.co

۳- نحوه فراخوانی ویوهای محلی همراه تگ اسکریپت !!

قرار نیست همیشه تمپلیت شما از فایل های مختلفی تشکیل شود و Url شما فقط از یک سری partial files استفاده نماید ، می توان به در مواقعی که urlrouting‌ شما قرار است کد کوچکی را فراخوانی نماید که شما دیگر نیاز نبینید که در یک فایل جداگانه آنرا قرار دهید می توانید آنرا در بدنه صفحه ی اصلی خود بکار ببندید و از همان صفحه فراخوانی را انجام دهید

۳.۱- ng-template directive

<script type="text/ng-template" id="add_order.html">
	<h2> Add Order </h2>
	{{message}}
</script>

سورس بالا یک نمونه تمپلیت توکار است.

و حالا یک دموی آنلاین برای نمایش بهتر این امکان :

Demo link: Plnkr.co
۴- اضافه کردن داده به RouteProvider

همانطور که اشاره کردم $routePovider متدهای when and otherwise رو برای پیاده سازی url ها بکار میبره. در مواقعی نیاز هست که ما می خواهیم بجز url query داده های دیگری را به controller‌از طریق روت برسونیم. مثلا شاید شما از یک کنترلر برای چند قسمت مختلف می خواهید استفاده کنید.

به مثال زیر توجه کنید :

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);
	
});

در مثال بالا foodata بعدا بوسیله ی controller قابل دریافت خواهد بود. و کنترلر نیز بوسیله $route.current.foodata به آن خواهد رسید.

دیدگاهتان را بنویسید