Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I have a simple application using Typescript and angular JS. I use the app.js to register my controller and some route parameters:

/// <reference path="../scripts/typings/angularjs/angular.d.ts" />
/// <reference path="secondController.ts" />
/// <reference path="../scripts/typings/angularjs/angular-route.d.ts" />
module myApp {
export class Config {
  constructor($routeProvider: ng.route.IRouteProvider) {
     $routeProvider.when("/add", { templateUrl: "test.html", controller: "CategoryCtrl" })
        .when("/add2", { templateUrl: "test.html", controller: "secondController" })
        .otherwise({ redirectTo: '/list' });
  }
}
Config.$inject = ['$routeProvider'];
export class CategoryCtrl {
  constructor($window) {
     $window.alert("Hi from CategoryCtrl");
  }
}
CategoryCtrl.$inject = ['$window'];
var app = angular.module("myApp", ['ngRoute']);
app.config(Config);
app.controller('CategoryCtrl', CategoryCtrl);
app.controller('secondController', secondController);
}

This works fine. Here some snipped, how I use the code:

div class="container" style="margin-top:10px;">
     <div class="col-md-3" ng-controller="CategoryCtrl">
        <a href="#/add" style="color:blue; font-weight:bold;">Add New Video</a><br />
        <a href="#/add2" style="color:blue; font-weight:bold;">Add New Video2</a>
     </div>

So far, so good. I have another file, called "secondController.ts", which looks like:

module myApp {
export class secondController {
  constructor($window) {
     $window.alert("Second Controller");
  }
}
secondController.$inject = ['$window'];
}

As You can see, I already registered this controller in my app.js (app.ts), but if I change the "ng-controller='CategoryCtrl'" to "ng-controller='secondController'" this doesn't work. If I just copy the code from the secondController.ts-file to my app.ts, there is no problem.... I don't see the error and I would be grateful for any help.

share|improve this question

2 Answers 2

up vote 2 down vote accepted

In order to make it work, you need to make the following changes:

/// <reference path="../scripts/typings/angularjs/angular.d.ts" />
/// <reference path="secondController.ts" />
/// <reference path="../scripts/typings/angularjs/angular-route.d.ts" />
module myApp {
export class Config {
  constructor($routeProvider: ng.route.IRouteProvider) {
     $routeProvider.when("/add", { templateUrl: "test.html", controller: "CategoryCtrl" })
        .when("/add2", { templateUrl: "test.html", controller: "secondController" })
        .otherwise({ redirectTo: '/list' });
  }
}
Config.$inject = ['$routeProvider'];
export class CategoryCtrl {
  constructor($window) {
     $window.alert("Hi from CategoryCtrl");
  }
}
CategoryCtrl.$inject = ['$window'];
export var app = angular.module("myApp", ['ngRoute']);
app.config(Config);
app.controller('CategoryCtrl', CategoryCtrl);

}

As you can see, I have removed the following line

app.controller('secondController', secondController);

I have also added this line

export var app = angular.module("myApp", ['ngRoute']);

This means that, the variable app will be accessible outside the module.

Now in the other file, where you have the secondController, you need to add the following line at

myApp.app.controller('secondController', secondController);

This is how your secondController file should look like

module myApp {
    export class secondController {
      constructor($window) {
         $window.alert("Second Controller");
      }
    }

secondController.$inject = ['$window'];
myApp.app.controller('secondController', secondController);
}

In the code that you wrote previously, app.ts file contains "secondController", but it does not know what this variable is, as the SecondController.ts file has not been loaded yet.

Now what I did is, I have made the the variable app, public.

So now we can register the new controller after it has been defined.

To make your life easier, I would suggest you to do the same thing with CategoryCtrl as well. Take its definition out of the app.ts file, and into its own file. Then register it with angular just like I did in secondController.

In doing so, you can easily add multiple files and register them.

share|improve this answer
    
Hi, thank Your for the answer. I am going to check this on Monday morning! –  user2252775 Jul 18 '14 at 11:03
    
Thank You very much!!!!... I did not recognize the problem, but now the testproject works :-) And of course I am going to do the same stuff with the other controller ;-) –  user2252775 Jul 21 '14 at 8:15
    
Glad that I could help. –  adib.mosharrof Jul 22 '14 at 7:12

Try putting them in the same file:

/// <reference path="../scripts/typings/angularjs/angular.d.ts" />
/// <reference path="secondController.ts" />
/// <reference path="../scripts/typings/angularjs/angular-route.d.ts" />
module myApp {

export class Config {
  constructor($routeProvider: ng.route.IRouteProvider) {
     $routeProvider.when("/add", { templateUrl: "test.html", controller: "CategoryCtrl" })
        .when("/add2", { templateUrl: "test.html", controller: "secondController" })
        .otherwise({ redirectTo: '/list' });
  }
}
Config.$inject = ['$routeProvider'];

export class CategoryCtrl {
  constructor($window) {
     $window.alert("Hi from CategoryCtrl");
  }
}
CategoryCtrl.$inject = ['$window'];

export class secondController {
  constructor($window) {
     $window.alert("Second Controller");
  }
}
secondController.$inject = ['$window'];

var app = angular.module("myApp", ['ngRoute']);
app.config(Config);
app.controller('CategoryCtrl', CategoryCtrl);
app.controller('secondController', secondController);
}

Reason

Make sure the script tags are ordered correctly. i.e. the controller is defined before you register it with angular.

share|improve this answer
    
Yeah, this works, but the task was to split the definition within multiple files ;-). –  user2252775 Jul 21 '14 at 8:16

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.