的原因

Question

我有一个使用Typescript和angular JS的简单应用程序。我使用app.js来注册我的控制器和一些路由参数：

/// <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）中注册了这个控制器，但是如果我将“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可以在模块外部访问。

现在在另一个文件中，你有第二个控制器，你需要在

添加以下行

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文件包含＆＃34; secondController＆＃34;，但它不知道这个变量是什么，因为还没有加载SecondController.ts文件。

现在我做的是，我已经制作了变量app，public。

现在我们可以在定义新控制器之后注册它。

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

这样，您可以轻松添加多个文件并进行注册。

Answer 2

尝试将它们放在同一个文件中：

/// <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 class secondController {
  constructor($window) {
     $window.alert("Second Controller");
  }
}
secondController.$inject = ['$window'];

var app = angular.module("myApp", ['ngRoute']);
app.config(Config);
app.controller('CategoryCtrl', CategoryCtrl);
app.controller('secondController', secondController);
}

的原因

确保正确排序script代码。即在之前定义控制器，用angular注册它。

带有app.js的AngularJS和Typescript

2 个答案:

的原因