CODEWITHSUNDEEP
angularjstypescript
Thomas.Benz
Thomas.Benz

Reputation: 8599

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

Upvotes: 0

Views: 552

Answers (1)

Kunso Solutions
Kunso Solutions

Reputation: 7630

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.

Upvotes: 1

Related Questions