Question

我有一个名为“BaseCtrl”的控制器类。此控制器类负责默认/根HTML页面“index.html”的全局函数。由于我对TypeScript的理解（我是TypeScript新手），要将控制器用于某些HTML视图，有3件事要做：

1）在HTML视图中，我不需要显式调用控制器。那就是我不需要使用ng-controller属性。

2）为了1）工作，在我的应用程序的路由类中，我需要使用像“controllerAs”这样的特殊属性来指定控制器的别名（例如controllerAs：“bc”。

例如，

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

3）因为没有使用$ scope，要访问控制器类的所有东西（方法，属性），我必须使用控制器的别名，如2）中的“bc”。例如，ng-model =“bc.FirstName”等。

我的问题：我有如上所述的控制器“BaseCtrl”。但是这个控制器并没有与我的应用程序路由类中的任何路由绑定（请参阅我的下面的路由类代码）。这意味着我没有该控制器的别名。那么，我怎样才能在默认/ root“index.html”上调用或访问控制器的东西？我是否必须在控制器类中使用“$ scope”代码与传统的非TypeScript代码相同，这样我就不用担心在视图中使用控制器的别名了？我正在使用TypeScript作为Angular代码。

感谢您的帮助。

index.html代码：

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

路线类代码：

/// <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类代码：

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 1

将控制器与部分链接有两种方法：

使用route，您可以在路由对象中定义controllerAs属性。
通过在某个元素上定义ng-controller指令。在这种情况下，您仍然可以定义别名。示例：<div ng-controller="BaseCtrl as vm">{{vm.name}}</div>所以vm这里有别名。

当然，案例1是更好的做法，特别是在TypeScript使用的情况下。但请选择哪种更适合您的应用。

index.html页面的控制器别名

1 个答案: