پیاده سازی کنترلرهای Angular با استفاده از Typescript
اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب: دو دقیقه

پیشتر با ویژگی ها  و نحوه کد نویسی این زبان آشنا شدید. از طرفی دیگر، نحوه تعریف کنترلرها در Angular نیز آموزش داده شد. در این پست قصد دارم طی یک مثال ساده با استفاده از زبان Typescript یک کنترلر Angular را ایجاد  و سپس از آن در یک پروژه Asp.Net MVC استفاده نمایم. از آن جا که به صورت پیش فرض در VS.Net امکانات TypeScript نصب نشده است، برای شروع ابتدا TypeScript را از اینجا دانلود نمایید. بعد از نصب یک پروژه Asp.Net MVC ایجاد نمایید و سپس با استفاده از nuget فایل‌های مربوط به AngularJs  را نصب نمایید. در این پست به تفصیل این مورد بررسی شده است (عملیات BundleConfig فایل‌های مورد نیاز به عهده خودتان). در پوشه scripts یک فولدر به نام app ساخته، سپس یک فایل TypeScript به نام ProductController.ts ایجاد کنید. (بعد از نصب TypeScript گزینه TypeScript File مشاهده خواهد شد)
 

در فایل ProductController.ts کد‌های زیر را کپی نمایید: 

module Product {
    export interface Scope {
        message: string;
    }

    export class Controller {
        constructor($scope: Scope) {
            $scope.message = "Hello from Masoud";
        }
    }
}
توضیح کد‌ها بالا :

ابتدا یک ماژول به نام Product ایجاد می‌کنیم. سپس یک اینترفیس برای پیاده سازی آبجکت Scope که جهت مقید سازی عناصر DOM به آبجکت‌های کنترلر مورد استفاده قرار می‌گیرد، ایجاد می‌کنیم. در داخل این اینترفیس متغیری به نام message از نوع string داریم. قصد داریم این متغیر را به یک  عنصر مقید کنیم. حال یک کلاس به نام کنترلر ایجاد می‌کنیم که در تابع سازنده آن تزریق وابستگی برای scope$ از نوع اینترفیس Scope تعیین شده است. در نتیجه در بدنه سازنده می‌توانیم به متغیر message مقدار مورد نظر را نسبت دهیم .

کلمه کلیدی export برای تعریف عمومی کلاس استفاده شده است .
یک View ایجاد و کد‌های زیر را در آن کپی کنید :

<script type="text/javascript" src="~/scripts/app/ProductController.js"></script>
<div ng-app>
    <div ng-controller="Product.Controller">
        <p>{{message}}</p>
    </div>
</div>

اولین نکته در تگ script است که فراخوانی فایل TypeScript باید با پسوند   js. انجام گیرد. به دلیل اینکه فایل‌های TypeScript بعد از کامپایل تبدیل به فایل‌های JavaScript خواهند شد؛ در نتیجه پسوند آن نیز js. است. دومین نکته در فراخوانی کنترلر مورد نظر است که  از ترکیب نام ماژول و نام کلاس است. بعد از اجرای پروژه خروجی به صورت زیر خواهد بود :

 

  • #
    ‫۱۰ سال و ۸ ماه قبل، چهارشنبه ۲۵ دی ۱۳۹۲، ساعت ۱۸:۵۶
    با سلام.
    در کنترلر ، چگونه $watch مربوط به شی $scope را بوسیله TypeScript میتوان فراخوانی کرد؟
    • #
      ‫۱۰ سال و ۸ ماه قبل، جمعه ۲۷ دی ۱۳۹۲، ساعت ۱۶:۳۷
      ابتدا کنترلر خود را به صورت زیر تعریف کنید:
         class MyController {
              thescope: any;
              static $inject = ['$scope'];

       constructor($scope) { this.thescope = $scope; this.thescope.$watch('watchtext', function(newValue, oldValue) { this.thescope.counter = scope.counter + 1; this.thescope.lastvalue = oldValue; this.thescope.currentvalue = newValue;});   } }
      حال برای استفاده از کنترلر بالا به صورت زیر عمل نمایید:

      module myApp.ctrl {
          myApp.controller("MyController", function($scope) {
              return new MyController($scope);
          }
      }
  • #
    ‫۹ سال و ۵ ماه قبل، شنبه ۲۹ فروردین ۱۳۹۴، ساعت ۰۵:۵۲
    من از ورژن 1.3.15 angular  استفاده میکنم و در صفحه یک چنین اروری میده Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=Product.Controller&p1=not%20a%20function%2C%20got%20undefined 
    مثل اینکه نوع تعریف controller در این ورژن متفاوت با قبله.چطور میشه  کد  typescript  رو اصلاح کرد تا مشکل حل بشه؟