Transform my Angular implementation to TypeScript programming

Question

Transform my Angular implementation to TypeScript programming

After spending a year coding Angular and seeing great progress, the buzz around TypeScript has caught my attention. While there are plenty of tutorials and blogs on the topic, there seems to be inconsistency in the recommendations. How should the app.js file be structured for 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);
});

As for the controller, I aim to remove scope from it by using 'Controller as vm' in the route config. What would be the ideal structure for this controller?

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

javascript angularjs typescript

Answer 1

Answer №1

When it comes to registering a module, the process remains consistent.

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

As for the controller, it should be declared as a class.

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

Although I prefer using the controllerAs syntax and accessing properties of the controller class (which may facilitate migration to Angular 2.0 later on), something like:

module controllers {    
    export class yourController {

        public someField: boolean;
        public someOtherField: string;

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

Then you can register this controller as usual.

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

Answer 2

When it comes to registering a module, the process remains consistent.

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

As for the controller, it should be declared as a class.

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

Although I prefer using the controllerAs syntax and accessing properties of the controller class (which may facilitate migration to Angular 2.0 later on), something like:

module controllers {    
    export class yourController {

        public someField: boolean;
        public someOtherField: string;

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

Then you can register this controller as usual.

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

Transform my Angular implementation to TypeScript programming

Answer №1

Similar questions

Prompt triggered within AJAX request

What is the process for configuring environment variables in a React application?

Issue: The system is unable to locate the "moduleIntro.js" module while executing the "http" command

How to extract the chosen option from a bound list within an Angular application

Is there a way to transfer ngClass logic from the template to the TypeScript file in Angular?

Unable to retrieve location data within the function

Eliminate JavaScript comments with Regex in PHP

What is the best way to connect to the express.js/passport.js API using an Android device as the client

Check if all items in the array exist in Mongodb, then update them; if not, insert

Add a <div> element using jQuery based on the viewport size, and implement Ajax refresh when the browser is

Having difficulty in displaying database values in HTML modal using PHP

Eliminating the 'white-space' surrounding concealed images

It is not possible to access fields in Firestore using Node.js

Calculating the sum of values in a JSON array using a specific parameter in Typescript

What is the best way to call a JavaScript function with multiple arguments from a Silverlight project?

Can tabs be created without the use of javascript?

Place a gap at a specific spot within the boundary line

Tips for transmitting form information in a fetch call

What is the best way to send information to the nested component's inner scope?

JavaScript library for creating animated car movements on a map using JPG images