Thomas.Benz Thomas.Benz - 2 months ago 16
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,

$routeProvider
.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>
<html>
<head>
<title>AngularJS With TypeScript In Visual Studio</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 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>


</head>
<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>
</div>

<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>

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

</div>
</nav>

<div>
<div ng-view></div>
</div>
</div>
</div>
</div>
</body>
</html>


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) {


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


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




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

$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}


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

angular.module("angularWithTs").config(routes);
}


BaseCtrl class codes:

module angularWithTs {
"use strict";

export class BaseCtrl {
static $inject = ["$location", "SessionSrvc"];
_sessionSrvc: SessionSrvc;
_$location: ng.ILocationService; // http://notebookheavy.com/2013/05/22/angularjs-and-typescript/


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

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">{{vm.name}}</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.