CODEWITHSUNDEEP
angularjstypescript
user517406
user517406

Reputation: 13773

Passing parameters to AngularJS controller in Typescript

I am trying to do something along the lines of this post Can you pass parameters to an AngularJS controller on creation? but developing in typescript rather than javascript.

So if I have in my view a reference to a controller like this :

<div class="row" id="divTeam" ng-app="app" ng-controller="teamsController as vm" ng-cloak>

And my typescript controller has a constructor like this :

constructor(private dataAccessService: app.common.DataAccessService, $http: ng.IHttpService, $scope: app.domain.TeamScope,
            $location: ng.ILocationService, $translate: angular.translate.ITranslateService, $window: ng.IWindowService,
            $localStorage: app.domain.GlobalsScope) {

            this.httpService = $http;
            this.scope = $scope;
...

And here is TeamScope :

export interface TeamScope extends ng.IScope {
        selectedTeam: app.domain.Team;

        isBusy: Boolean;
        errorMessage: string;

        language: string;
    }

What would be the correct way to pass a parameter from the view into the controller? Through ng-init or by passing a parameter directly into the constructor?

EDIT : Here is the attempted solution I came up with, but it seems like the constructor is called before init :

View:

<div class="container page-content" ng-app="app" ng-controller="teamController as vm" ng-init="vm.init('Arizona')" ng-cloak>

team object:

export interface TeamScope extends ng.IScope {
        t: string;
        isBusy: Boolean;
        errorMessage: string;

        language: string;

        init(selectedTeam: string);
    }

Controller:

module app.controllers {

    class TeamController implements app.domain.Team {

        //properties
        teamId: number;
        teamName: string;
        coach: app.domain.Coach;
        division: app.domain.Division;
        cheerleaderImage: string;
        coachImage: string;
        headerImage: string;
        logoImage: string;

        httpService: ng.IHttpService;
        scope: app.domain.TeamScope;
        translate: angular.translate.ITranslateService;
        location: ng.ILocationService;
        window: ng.IWindowService;
        localStorage: app.domain.GlobalsScope;

        static $inject = ['dataAccessService', '$http', '$scope', '$location', '$translate', '$window',
            '$localStorage'];

        //constructor
        constructor(private dataAccessService: app.common.DataAccessService, $http: ng.IHttpService, $scope: app.domain.TeamScope,
            $location: ng.ILocationService, $translate: angular.translate.ITranslateService, $window: ng.IWindowService,
            $localStorage: app.domain.GlobalsScope) {

            this.httpService = $http;
            this.scope = $scope;

            alert(this.scope.t);
        }

        //methods
        init(teamName: string): void {
            this.scope.t = teamName;
        } 
    }

    angular.module("app")
        .controller("teamController", ['dataAccessService', '$http', '$scope', '$location', '$translate', '$window',
            '$localStorage', TeamController]);

}

Upvotes: 1

Views: 3021

Answers (1)

micah
micah

Reputation: 8096

Here is the method I use. I do it in the state resolve. I assume you're using ui-router and not the angular default router.

module.config(function($stateProvider) {
    $stateProvider.state('app.team', {
      url: '/team/{name}',
      controller: 'TeamController as TeamVM',
      resolve: {
        team: function($stateParams) {
          return new Team($stateParams.name);
        }
      }
    });
  });

  ...

  class TeamController {
    constructor(public team: Team) {

    }
  }

It's clear, keeps your Controllers slim, and is very testable. This is my recommended solution.

Upvotes: 1

Related Questions