把我的Angular代码转换成TypeScript

Convert my Angular code to TypeScript

本文关键字：TypeScript 转换 代码 我的 Angular      更新时间：2023-09-26

我写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;
});

模块的注册基本相同

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"; 
        }
    }
}

虽然我更喜欢使用控制器，并访问控制器类的属性(我想这将导致以后更容易迁移到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"; 
        }
    }
}

那么你可以注册这个控制器为always

angular.module('yourModule').controller('ctrl',controllers.yourController);
相关文章：