Пересматривая AngularJS с TypeScript

Многие из моих недавних постов и презентаций в блоге были посвящены чистому JavaScript. Я считаю, что TypeScript — невероятно полезный инструмент, особенно при разработке тяжелых клиентских приложений большими группами. Я не использую его в большинстве примеров, поэтому они остаются актуальными для разработчиков, которые не приняли его. TypeScript — сильный актив для приложений AngularJS. Недавно меня спросили о структуре моего приложения Angular с использованием TypeScript, поэтому я разработал небольшой пример.

В моем недавнем выступлении о Advanced AngularJS Tips and Tricks я привел довольно интерактивный пример с использованием списка картинок с выбором. Цель состояла в том, чтобы продемонстрировать контроллер как синтаксис и показать, что вы можете выполнить то, что необходимо, без зависимости от явных наблюдателей. Вы можете просмотреть источник ; контроллеры и т. д. находятся под подпапками «01».

Первый шаг к разработке приложений в TypeScript — это выбор любых связанных файлов определений. Я использую репозиторий, который называется « Типизированный» . Существуют определения для большинства общих библиотек, в том числе Angular. Более того, вы также можете установить его в свои проекты Visual Studio с помощью NuGet .

После того, как у меня есть определения типов в моем проекте, я определяю модуль приложения. Модуль инкапсулирует функциональность и предотвращает конфликты имен. Я должен дать вам предупреждение, согласно рекомендациям Google, вы всегда должны ссылаться на свои модули, вызывая angular.module с именем модуля (после того, как вы определили модуль путем передачи зависимостей), а не пытаться захватить глобальную ссылку. Лично у меня нет проблемы с сохранением ссылки, когда я уже создаю область модуля для приложения, поэтому я решил использовать ее.

declare var angular: ng.IAngularStatic;

module Application {
    "use strict";

    export var angularApp: ng.IModule =
        angular.module("angularApp", ["ngAnimate"]);
}

var Application;
(function (Application) {
    "use strict";

    Application.angularApp = angular.module(
        "angularApp", ["ngAnimate"]);
})(Application || (Application = {}));

module Application {

    "use strict";

    export interface ISunsetData {
        image: string;
        location: string;
        title: string;
    }

    function initData(): void {
        var data: ISunsetData[] = [
            {
                image: "backyard.jpg",
                location: "Woodstock, GA",
                title: "Sunset in Woods"
            }
        ];
        angularApp.value("sunsets", data);
    };


    initData();
}

module Application {

    "use strict";

    export interface ISunsetService {
        sunsets: ISunsetData[];
        selected: ISunsetData;
        filter: string;
        select: (sunset: ISunsetData) => void;
    }

    class SunsetService implements ISunsetService {
        constructor(
            public sunsets: ISunsetData[],
            public $log: ng.ILogService) {

            $log.log("Sunsets service created.");
        }

        public selected: ISunsetData;

        public filter: string;

        public select(sunset: ISunsetData): void {
            this.$log.log("Selected sunset "
                + sunset.title);
            this.selected = sunset;
        }

    }

    angularApp.service("sunsetSvc", [
        "sunsets", "$log", SunsetService]);
} 

module Application {

    "use strict";

    class SearchController {

        private _filter:string;

        constructor(
            public $log: ng.ILogService,
            public sunsetSvc: ISunsetService) {
            this._filter = "";
            $log.log("Search controller created.");
        }

        public get filter(): string {
            return this._filter;
        }

        public set filter(val: string) {
            this.sunsetSvc.filter = val;
            this._filter = val;
        }

    }

    angularApp.controller("searchCtrl", ["$log", "sunsetSvc", SearchController]);
} 

Object.defineProperty(SearchController.prototype,
    "filter", {
    get: function () {
        return this._filter;
    },
    set: function (val) {
        this.sunsetSvc.filter = val;
        this._filter = val;
    },
    enumerable: true,
    configurable: true
});