AngularJS 和 Typescript 与 app.js

Question

我有一个使用 Typescript 和 Angular JS 的简单应用程序。我使用 app.js 注册我的 Controller 和一些路由参数:

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

这很好用。这里有一些片段，我如何使用代码:

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>

到目前为止，还不错。我有另一个名为“secondController.ts”的文件，它看起来像:

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

如您所见，我已经在我的 app.js (app.ts) 中注册了这个 Controller ，但是如果我将“ng-controller='CategoryCtrl'”更改为“ng-controller='secondController'”，这不会工作。如果我只是将代码从 secondController.ts 文件复制到我的 app.ts，就没有问题....我没有看到错误，如果有任何帮助，我将不胜感激。

Answer 1

为了使其正常工作，您需要进行以下更改:

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

}

如你所见，我已经删除了下面这行

app.controller('secondController', secondController);

我也添加了这一行

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

这意味着变量 app 可以在模块外访问。

现在在另一个文件中，您有 secondController，您需要在以下位置添加以下行

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

这是你的 secondController 文件的样子

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

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

在您之前编写的代码中，app.ts 文件包含“secondController”，但它不知道这个变量是什么，因为尚未加载 SecondController.ts 文件。

现在我所做的是，我已将变量 app 公开。

所以现在我们可以在定义新 Controller 后注册它。

为了让您的生活更轻松，我建议您也对 CategoryCtrl 做同样的事情。将它的定义从 app.ts 文件中取出，并放入它自己的文件中。然后用 Angular 注册它就像我在 secondController 中所做的那样。

这样做，您可以轻松添加多个文件并注册它们。