مسیریابی در AngularJS

چهارشنبه 27 آبان 1394

مسیر یابی یکی از ویژگی های Angular Js می باشد. این ویژگی برای ساختن اپلیکیشن های (single page application)تک صفحه ای با چندین صفحه نمایش کاربرد دارد.

مسیریابی در AngularJS

مسیر یابی یکی از ویژگی های Angular Js  می باشد. این ویژگی برای ساختن اپلیکیشن های تک صفحه ای با چندین صفحه نمایش کاربرد دارد.

ما از این به بعد به اپلیکیشن های تک صفحه ای  به اختصار SPA میگوییم. SPA مخفف کلمه single page application می باشد.

در spa  اپلیکیشن ها  ، view  ها دارای محتوای html  متفاوت هستند. و ما از مسیر یابی برا ی بارگذاری قسمت های مختلف نرم افزار استفاده میکنیم به عبارت دیگر مسیریابی در تقسیم برنامه به View های منطقی و bind کردن انها به کنترلر های مختلف کمک میکند.

در نمودار بالا ما دو url Route ایجاد کردیم و هر نقطه را برای یک view  خاص قرار دادیم.

مقدمه ای بر ماژول ngRoute

این ماژول مسیریابی را در برنامه AngularJS فراهم میکند. و  همچنین ارتباط وسیعی بین دستورات و سرویس ها ایجاد میکند. ما برای این کار نیاز به کتابخانه AngularJS داریم.

کامپوننت ngRoute

چهار جزء اصلی در ماژول ngRoute وجود دارد.

ngView : یک (دامنه)Scope جدید ایجاد میکند. و از ان برای بارگذاری قالب های html  استفاده میکند.

routeProvider $ : برا ی پیکر بندی مسیر ها از ان استفاده می شود.

Route$ : با استفاده از Route$  ارتباط وسیعی  بین View و Controller ایجاد می شود .

routeParams$ : این سرویس Angular به ما امکان بازیابی مجموعه ای از پارامترهای مسیر را میدهد.

routeProvider$ برای پیکر بندی مسیرهای برنامه در AngularJS استفاده می شود. همه مسیر های نرم افزار از طریق routeProvider$ تعریف می شوند .

Routing در AngularJS برای بارگذاری قالب های مختلف در زمان اجرای برنامه است. در زیر مثالی در این مورد بررسی میکنیم.

یک فولدر جدید ایجاد کنید و در ان یک صفحه با نام  Demo.html ایجاد میکنیم و تمام کتابخانه های مورد نیاز AngularJS را به فولدر پروژه اضافه میکنیم.

محتوای Demo.html

<!DOCTYPEhtml>  
<htmldata-ng-apphtmldata-ng-app="AngularApp">  
  
    <head>  
        <metacontentmetacontent="IE=edge, chrome=1" http-equiv="X-UA-Compatible" />  
        <title>AngularJS - Routing</title>  
        <scriptsrcscriptsrc="angular.js">  
            </script>  
            <scriptsrcscriptsrc="angular-route.js">  
                </script>  
                <scriptsrcscriptsrc="app.js">  
                    </script>  
                    <scriptsrcscriptsrc="jquery-1.10.2.min.js">  
                        </script>  
                        <scriptsrcscriptsrc="DemoController.js">  
                            </script>  
                            <scriptsrcscriptsrc="Modules/Page1/Page1Controller.js">  
                                </script>  
                                <scriptsrcscriptsrc="Modules/Page2/Page2Controller.js">  
                                    </script>  
                                    <scriptsrcscriptsrc="bootstrap.min.js">  
                                        </script>  
                                        <linkhreflinkhref="bootstrap.min.css" rel="stylesheet" /> </head>  
  
    <body>  
        <div>  
            <div ng-controller="demoController" class="container">  
                <p><b>Hello World - Routing Example</b></p>  
                <divclassdivclass="row">  
                    <divclassdivclass="col-md-3">  
                        <ulclassulclass="nav">  
                            <li>  
                                <ahrefahref="#/page1"> Page 1 </a>  
                            </li>  
                            <li>  
                                <ahrefahref="#/page2"> Page 2 </a>  
                            </li>  
                            </ul>  
            </div>  
            <divclassdivclass="col-md-9">  
                <divng-view>  
        </div>  
        </div>  
        </div>  
        </div>  
        </div>  
    </body>  
  
</html>  

در اینجا ما صفحه نمایش را به دو قسمت تقسیم کرده ایم. سمت چپ شامل منو و سمت راست الگوی مربوطه است.

مرحله بعدی افزودن مسیریابی است.

demo.html ما شامل فایل app.js است که تعاریف AngularJS در ان نگه داری می شود.

var app = angular.module("AngularApp", ['ngRoute']);  
app.config(['$routeProvider',  
    function ($routeProvider)  
    {  
        $routeProvider.  
        when('/page1',  
            {  
                templateUrl: 'Modules/Page1/page1.html',  
                controller: 'Page1Controller'  
            })  
            .  
        when('/page2',  
            {  
                templateUrl: 'Modules/Page2/page2.html',  
                controller: 'Page2Controller'  
            })  
            .  
        otherwise(  
        {  
            redirectTo: '/page1'  
        });  
    }  
]);  

در کد بالا ما دو route را تعریف کرده ایم.

در مرحله بعد قالب html و کنترلر ها را تعریف میکنیم.

در این مثال دو قالب html تعریف شده است.  Page1.html    و page2.html

همچنین دو کنترلر با نام های page1controller  و page2controller ایجاد کرده ایم

<divng-controller="Page1Controller">  
    <h2>Page 1</h2> Hi, {{myName}} </div> 
app.controller("Page1Controller", ['$scope', function ($scope)  
{  
    $scope.myName = "Tejas Trivedi";  
}]);  
<divng-controller="Page2Controller">  
    <h2>Page 2</h2> Hi, {{myName}} </div>  
app.controller("Page2Controller", ['$scope', function ($scope)  
{  
    $scope.myName = "Jignesh Trivedi";  
}]);  

ارسال پارامتر به مسیر url

ما می توانیم در مسیر url پارامتر هایی را تعریف کنیم .

app.js

.when('/page3/:id',  
{  
    templateUrl: 'Modules/Page3/page3.html',  
    controller: 'Page3Controller'  
})  

ما میتوانیم پارامتر را با routeParams$ مقدار دهی کنیم.

page3Controller.js

app.controller("Page3Controller", ['$scope', '$routeParams', function ($scope, $routeParams)  
{  
    $scope.myName = "Jignesh Trivedi";  
    $scope.id = $routeParams.id;  
}]);

page3.html

<divng-controller="Page2Controller">  
    <h2>Page 3</h2> My Id : {{id}} </div>  

Demo.html

نمایش خروجی

ما می توانیم مقدار پارامتر در کنترلر را با استفاده از routeParams$ بخوانیم.

var app = angular.module("AngularApp", ['ngRoute']);  
app.config(['$routeProvider',  
    function ($routeProvider)  
    {  
        $routeProvider.  
        when('/page4',  
            {  
                templateUrl: 'page4.html',  
                controller: 'Page1Controller'  
            })  
            .  
        when('/page5',  
            {  
                templateUrl: 'page5.html',  
                controller: 'Page2Controller'  
            })  
            .  
        otherwise(  
        {  
            redirectTo: '/page4'  
        });  
    }  
]);
<!DOCTYPE html>  
<html data-ng-app="AngularApp">  
  
    <head>  
        <meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible" />  
        <title>AngularJS - Routing</title>  
        <script src="angular.js"></script>  
        <script src="angular-route.js"></script>  
        <script src="appLocalView.js"></script>  
        <script src="jquery-1.10.2.min.js"></script>  
        <script src="Modules/Page1/Page1Controller.js"></script>  
        <script src="Modules/Page2/Page2Controller.js"></script>  
        <script src="bootstrap.min.js"></script>  
        <link href="bootstrap.min.css" rel="stylesheet" /> </head>  
  
    <body>  
        <div>  
            <div class="container">  
                <p><b>Load local view Example</b></p>  
                <div class="row">  
                    <div class="col-md-3">  
                        <ul class="nav">  
                            <li><a href="#page4"> Page 4 </a></li>  
                            <li><a href="#page5"> Page 5 </a></li>  
                        </ul>  
                    </div>  
                    <div class="col-md-9">  
                        <div ng-view></div>  
                    </div>  
                </div>  
                <script type="text/ng-template" id="page4.html">  
                    <h2> Page 4 </h2> Hi, {{myName}} </script>  
                <script type="text/ng-template" id="page5.html">  
                    <h2> Page 5 </h2> Hi, {{myName}} </script>  
            </div>  
        </div>  
    </body>  
  
</html>

آموزش angular

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید