مسعود پاکدل مسعود پاکدل
نظرات مطالب
ساختار پروژه های Angular
زمانی که تعداد فایل‌ها و دایرکتوری‌ها در پروژه زیاد می‌شود(البته این جزء جدانشدنی پروژه‌های مقیاس بزرگ است) برای جلوگیری از لود یک باره کنترلرها و دایرکتیوها، بهتر از lazy loading برای لود فایل‌های مورد نیاز استفاده شود.  متاسفانه Angular به صورت رسمی از lazy loading پشتیبانی نمی‌کند اما با کمی تغییر در ساختار و استفاده از کتابخانه‌های جانبی مثل requireJs یا ScriptJs می‌توان به این مهم دست یافت.
(با عنوان این مطلب که قصد داشتم این مورد را طی یک پست جداگانه بررسی کنم)
برای مثال:
ابتدا ماژول app خود را به این شکل تنظیم کنید:
(function()
{
    var app = angular.module('app', []);

    app.config(function($routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide)
    {
        app.controllerProvider = $controllerProvider;
        app.compileProvider    = $compileProvider;
        app.routeProvider      = $routeProvider;
        app.filterProvider     = $filterProvider;
        app.provide            = $provide;

    });
})();

با استفاده از سرویس controllerProvider$ می‌توان چرخه ساخت کنترلر را به دست گرفت. هم چنین سرویس compileProvider$ برای نمونه سازی دایرکتیو‌ها و filterProvider$ برای فیلتر‌ها استفاده می‌شوند.
ساخت کنترلر‌ها و دایرکتیو‌ها نیز به صورت زیر انجام خواهد شد:
angular.module('app').controllerProvider.resgister('SomeLazyController', function($scope)
{
    $scope.key = '...';
});
و هم چنین یک نمونه از ساخت directive
$compileProvider.directive('SomeLazyDirective', function()
{
    return {
        restrict: 'A',
        templateUrl: 'templates/some-lazy-directive.html'
    }
})

فقط کافیست در هنگام پیاده سازی routing (که در این مقاله شرح داده شده است) نوع بارگذاری کنترلرها و دایرکتیو و ... را به صورت lazy انجام دهید :
$routeProvider.when('/about', {templateUrl:'views/about.html', resolve:{deps:function($q, $rootScope)
{
    var deferred = $q.defer();
    var dependencies =
    [
        'controllers/AboutViewController.js',
        'directives/some-directive.js'
    ];
 
    //*نکته اول 
    $script(dependencies, function()
    {
        // *نکته دوم
        $rootScope.$apply(function()
        {
            deferred.resolve();
        });
    });
 
    return deferred.promise;
}}})
*نکته اول: تمام وابستگی‌ها توسط scriptJs مدیریت می‌شوند.
*نکته دوم: تمام وابستگی‌ها مروبط به این scope بعد از فراخوانی تابع deffered.resolved بارگذاری خواهند شد.
نقطه شروع برنامه نیز به صورت زیر است:
$script(['appModule.js'], function()
{
    angular.bootstrap(document, ['app'])
});
angular.bootstrap
‫۱۰ سال و ۸ ماه قبل، یکشنبه ۲۷ بهمن ۱۳۹۲، ساعت ۱۴:۲۴
سیروان عفیفی سیروان عفیفی
مطالب
زیرنویس فارسی ویدئوهای مقدمات AngularJS - قسمت ششم (قسمت آخر)
زیرنویس‌های فارسی قسمت ششم را می‌توانید از اینجا دانلود کنید.
لیست سرفصل‌های این قسمت به شرح زیر است:
01. Introduction
02. Installing Karma
03. Karma with Webstorm
04. Testing Controllers
05. Testing Simple Services
06. Testing Services with Dependencies
07. Testing AJAX Services
08. Testing Filters
09. Testing Directives - Overview
10. Setting up Karma for Testing Directives
11. Testing Directives
12. End to End Testing - Overview
13. Setting up Karma for End to End Testing
14. End to End Testing - Part 1
15. End to End Testing - Part 2
16. Troubleshooting End to End Tests
17. Summary
در این قسمت به نحوه نوشتن تست برای کدهای انگولار پرداخته می‌شود. در برنامه‌های انگولار از  Karma برای نوشتن تست‌ها استفاده می‌کنیم اگرچه می‌توان با ابزارهای دیگری نیز اینکار را انجام داد، اما برای تست کردن برنامه‌های انگولار Karma بهترین گزینه است. در این بخش همچنین با نحوه‌ی تست کردن کنترلرها، سرویس‌ها، فیلترها و دایرکتیوها آشنا خواهید شد. در نهایت آزمون‌های  End-to-End  نیز با بررسی مثال‌های متنوع بررسی خواهد شد.
‫۹ سال و ۱۰ ماه قبل، یکشنبه ۳۰ آذر ۱۳۹۳، ساعت ۱۵:۴۵