آموزش گام به گام AngularJS قسمت نهم : آشنایی با ngRoute و ng-view

بازدید کنندگان : 1175 دسته بندی برنامه نویسی , برنامه نویسی سمت کلاینت , شروع کار با AngularJS
در مقاله هفتم دیدید که با استفاده از ng-include و ng-template میتوانید کدهارا از صفحات دیگر در یک صفحه لود کنیم در این مقاله به کمک ngRout و ng-view عملیات درج ، ویرایش و نمایش اطلاعات را در صفحات جداگانه انجام میدهیم .
یکی از مزایای ngRoute نسبت به روش قبلی SEO-Friendly بودن آن است ، در این روش هر کدام از صفحات یک آدرس جداگانه خواهند داشت .
 
قبل از هرچیز کتابخانه ngRoute را به صفحه اضافه می کنیم :
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
سپس از طریق app.config مسیر ها را از طریق routeProvider و با کمک دستور when تنظیم مینماییم :
app.config(function ($routeProvider) { 
 
    $routeProvider.when('/display', { 
            templateUrl: 'Models/Grid.html', 
            controller: 'gridCtrl' 
        }) 
        .when('/add', { 
            templateUrl: 'Models/Form.html', 
            controller: 'formCtrl' 
        }) 
        .when('/edit/:id', { 
            templateUrl: 'Models/Edit.html', 
            controller: 'editCtrl' 
        }) 
        .otherwise({ 
            redirectTo: '/display' 
        }); 
 
});

موارد فوق در فایل Application انجام میشود چرا که مربوط به کل پروژه بوده و به کنترلر خاصی مرتبط نیست . 
همانطور که از کدها مشخص است ما برای هر کدام از عملیات یک مسیر ایجاد کردیم و آدرس فایل اصلی را در templateUrl معرفی و بعد 
از آن controller مربوط به آن مشخص شده است ، بدین ترتیب دیگر نیازی نیست که درفایل های html ایجاد شده ng-controller معرفی گردد 
به عنوان مثال  صفحه Form.Html به شکل زیر خواهد بود :
    <fieldset> 
        <legend>Add/Edit</legend> 
 
        <p>Name : <input type="text" ng-model="newName" /></p> 
        <p>Family : <input type="text" ng-model="newFamily" /></p> 
 
        <input type="button" value="Add" ng-click="add()" /> 
 
    </fieldset> 
که با مقایسه کد های فوق با جلسه قبل متوجه می شوید که <div ng-controller="formCtrl"> حذف شده است 
حالا که برای درج و ویرایش و نمایش صفحات جداگانه داریم کافیست برای نمایش هر صفحه از ng-view استفاده کنیم :
<body ng-app="myApp">

    <ul>

        <li><a href="#">Home</a></li>

        <li><a href="#add"> Add</a></li>

    </ul>

    <div id="main">

        <div ng-view></div>

    </div>

</body>
 
ng-view به صورت خودکار از طریق route تعریف شده در config صفحه مورد نظر را نمایش خواهد داد . 
همانطور که میبینید یک لینک از طریق تگ a تعریف شده و مقدار href برابر add# ست شده  
 و از آنجایی که ما مسیر add/ را به Form.Html تنظیم نمودیم
 بنابراین با کلیک بر روی این لینک صفحه Form.Html با کنترل fotmCtrl لود خواهد شد 
 
نکته دیگر در مورد editController و مسیر مربوط به edit/ میباشد ، 
از آنجایی که در صفحه edit ما نیاز به id یا index سطر مربوط داریم این مقدار باید به این صفحه پاس شود 
برای این منظور مسیر این صفحه به صورت '/edit/:id' تنظیم شده و
 در editCtrl برای بدست آوردن مقدار پاس شده از routeParams استفاده میکنیم : 
 
app.controller('editCtrl', function ($scope, $rootScope, $location, $routeParams, UserServices) { 
 
    var olData = $rootScope.myData[$routeParams.id]; 
    $scope.name = olData.name; 
    $scope.family = olData.family; 
 
 
    $scope.cancel = function () { 
        $location.path('/display'); 
    } 
 
    $scope.update = function () { 
 
        UserServices.UpdateUser($rootScope.myData); 
        $rootScope.myData[$routeParams.id].name = $scope.name; 
        $rootScope.myData[$routeParams.id].family = $scope.family; 
 
        $location.path('/display'); 
    } 
 
همچنین برای انتقال به صفحات دیگر میتوانید از location.path به شکل فوق استفاده نمایید  
واضح است که این دو سرویس باید در ورودی تابع اصلی کنترلر تعریف شوند . 
 
نکته حائز اهمیت دیگر کد مربوط به واکشی اطلاعات است :
 UserServices.Fetch().then(function (response) { 
        $rootScope.myData = response.data; 
    }); 
به خاطر دارید که این کد در gridCtrl نوشته شده بود ،
اشکالی که در این حالت وجود دارد این است که با هر بار Route شدن به آدرس display این متد فراخوانی شده و دیتا به حالت اولیه باز میگردد 
برای حل این مشکل ما این متد را به Application و داخل app.run منتقل می کنیم ، کد نهایی فایل Application به شکل زیر خواهد بود :
var app = angular.module('myApp', ['ngRoute']); 
 
app.run(function ($rootScope, UserServices) { 
    $rootScope.myData; 
    UserServices.Fetch().then(function (response) { 
        $rootScope.myData = response.data; 
    }); 
}); 
 
 
app.config(function ($routeProvider) { 
 
    $routeProvider.when('/display', { 
            templateUrl: 'Models/Grid.html', 
            controller: 'gridCtrl' 
        }) 
        .when('/add', { 
            templateUrl: 'Models/Form.html', 
            controller: 'formCtrl' 
        }) 
        .when('/edit/:id', { 
            templateUrl: 'Models/Edit.html', 
            controller: 'editCtrl' 
        }) 
        .otherwise({ 
            redirectTo: '/display' 
        }); 
 
}); 



در مقالعه بعد با Login و Validation آشنا خواهید شد.

فایل پروژه را دانلود و معرفی نمایید


منابع :

نظرات کاربران

کیوان نصر ۱۳۹۵/۲/۲۸ ۱۵:۳۳

این کامنت می باشد

ali ۱۳۹۵/۵/۶ ۰۰:۵۱

با عرض سلام و خسته نباشید اولا خیلی ممنون بابت این اموزشتون ئاقعا دستتون درد نکنه فقط من تو این قسمت نهم جدولم لود نمیشه درخواست های اچ تی تی پی حتما باید رو سرور اجرا بشه یا سمت کلاینت هم اجرا میشه