Thomas.Benz Thomas.Benz - 11 months ago 51
TypeScript Question

controller alias for index.html page

I have a controller class named "BaseCtrl". This controller class takes care of global functions for the default/root HTML page "index.html". As my understanding of TypeScript (I am a TypeScript newbie), to use a controller for some HTML view, there are 3 things to do:

1) On the HTML view, I don't need to call controller explicitly. That is I don't need to use ng-controller attribute.

2) For 1) to be working, in route class of my application, I need to use a special property like "controllerAs" to specify the controller's alias (e.g controllerAs : "bc".

For example,

.when("/login", { controller: "LoginCtrl", templateUrl: "app/views/login.html", controllerAs: "lc" });

3) Because $scope is not used, to access all stuffs (methods, properties) of controller class, I have to use the the controller's alias like "bc" from 2). For example, ng-model="bc.FirstName" etc.

My question: I have controller "BaseCtrl" as mentioned above. But this controller is not tied with any route in my application route class (please see my below route class codes). That means I don't have an alias for that controller. So, how can I call or access the controller's stuffs on the default/root "index.html"? Do I have to use "$scope" in the controller class' codes the same as in traditional non-TypeScript codes so that I do not worry about using controller's alias in view? I am using TypeScript for Angular codes.

Thank you for your help.

index.html codes:

<!DOCTYPE html>
<title>AngularJS With TypeScript In Visual Studio</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>

<script src="app/app.js"></script>
<script src="app/Constants/Constants.js"></script>
<script src="app/routes.js"></script>

<script src="app/models/AuthToken.js"></script>

<script src="app/services/SessionSrvc.js"></script>
<script src="app/controllers/BaseCtrl.js"></script>

<body ng-app="angularWithTs">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Angular URl-Based routing</a>

<ul class="nav navbar-nav">
<li><a href="/login" ng-if="!bc.loggedIn()">Login</a></li>
<li><a href="/register" ng-if="!bc.loggedIn()">Register</a></li>
<li><a href="/presidents">Presidents</a></li>
<li><a href="/contacts">Contacts</a></li>

<li><a href="#" ng-click="bc.OnLogoutButtonClicked()">Logout</a></li>


<ul class="nav navbar-nav pull-right">
<a disabled><span class="label label-success pull-right" ng-if="bc.loggedIn()">Logged In</span> </a>


<div ng-view></div>

route class codes:

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

module angularWithTs {
"use strict";

function routes($routeProvider: ng.route.IRouteProvider, $locationProvider: ng.ILocationProvider) {

.when("/login", { controller: "LoginCtrl", templateUrl: "app/views/login.html", controllerAs: "lc" });

.when("/logout", { controller: "LogoutCtrl", templateUrl: "app/views/logout.html", controllerAs: "loc" });

$routeProvider.otherwise({ redirectTo: "/" });

enabled: true,
requireBase: false

routes.$inject = ["$routeProvider", "$locationProvider"];


BaseCtrl class codes:

module angularWithTs {
"use strict";

export class BaseCtrl {
static $inject = ["$location", "SessionSrvc"];
_sessionSrvc: SessionSrvc;
_$location: ng.ILocationService; //

constructor($location: ng.ILocationService, sessionSrvc: SessionSrvc) {
this._sessionSrvc = sessionSrvc;
this._$location = $location;

loggedIn(): boolean {
return this._sessionSrvc.getToken() != "undefined";

OnLogoutButtonClicked() : void {
// do some stuffs


angular.module("angularWithTs").controller("BaseCtrl", BaseCtrl);

Answer Source

There is two ways to link controller with partial:

  1. Using route, and you can define controllerAs property in the route object.
  2. By defining ng-controller directive on some element. In this case you still can define alias. Example : <div ng-controller="BaseCtrl as vm">{{}}</div> So vm here an alias.

Of course case 1 is better practise, especially in case TypeScript usage. But choose which is better fit for your app.