Question

我已经为Angular编写了大约一年的时间，我取得了很大的进步。现在，每个人都在大喊大叫TypeScript。关于这个主题有很多教程和博客，但似乎没有任何一致性。这个app.js文件应该如何在TypeScript中查找？

angular.module('angular10App', [
'ngCookies',
'ngResource',
'ngSanitize',
'ui.router',
'ui.bootstrap',
'ngStorage',
'cfp.loadingBar',
'ngAnimate'
])
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {

$urlRouterProvider
        .otherwise('/');

    $locationProvider.html5Mode(true);
});

这个控制器应该怎么样？我宁愿保留范围，所以假设我在路由配置中有'Controller as vm'。

angular.module('angular10App')
.controller('ResultsCtrl', function ($scope, $stateParams, results) {

    $scope.flightType = $stateParams.flightType;
    $scope.selectedAirportDep = $stateParams.from;
    $scope.selectedAirportRet = $stateParams.to;
    $scope.depDate = $stateParams.depDate;
    $scope.arrDate = $stateParams.arrDate;
    $scope.class = $stateParams.class;
    $scope.adults = $stateParams.adults;
    $scope.children = $stateParams.children;

    $scope.results = results;
});

Answer 1

模块注册基本相同

angular.module('angular10App', [
'ngCookies',
'ngResource',
'ngSanitize',
'ui.router',
'ui.bootstrap',
'ngStorage',
'cfp.loadingBar',
'ngAnimate'
])
.config($stateProvider: ng.ui.IStateProvider,
            $urlRouterProvider: ng.ui.IUrlRouterProvider,
            $locationProvider: ng.ILocationProvider) {
     $urlRouterProvider.otherwise('/');
     $locationProvider.html5Mode(true);
}

对于控制器，它应该被定义为一个类

module controllers {
    export interface IYourScope extends ng.IScope {
        someField: boolean;
        someOtherField: string;
    }

    export class yourController {
        constructor(private $scope: IYourScope) {
           $scope.someField = true;
           $scope.someOtherField = "something"; 
        }
    }
}

尽管我更喜欢使用controllerAs并访问控制器类的属性（我想这将导致以后更容易迁移到Angular 2.0），有些类似于：

module controllers {    
    export class yourController {

        public someField: boolean;
        public someOtherField: string;

        constructor(private $scope: ng.IScope)
           this.someField = true;
           this.someOtherField = "something"; 
        }
    }
}

然后你可以一如既往地注册这个控制器

angular.module('yourModule').controller('ctrl',controllers.yourController);

将我的Angular代码转换为TypeScript

1 个答案: