AngularJS và Typescript với app.js

Tôi có một ứng dụng đơn giản sử dụng Typescript và AngularJS. Tôi sử dụng app.js để đăng ký controller của mình và một số tham số route:

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

Điều này hoạt động tốt. Đây là một số đoạn mã, cách tôi sử dụng code:

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>

Cho đến nay, mọi thứ đều tốt. Tôi có một tập tin khác, gọi là "secondController.ts", nhìn như sau:

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

Như bạn có thể thấy, tôi đã đăng ký controller này trong app.js (app.ts) của mình, nhưng nếu tôi thay đổi "ng-controller='CategoryCtrl'" thành "ng-controller='secondController'" thì điều này không hoạt động. Nếu tôi chỉ sao chép mã từ file secondController.ts vào app.ts của mình, thì không có vấn đề gì.... Tôi không thấy lỗi và tôi sẽ rất biết ơn bất kỳ sự giúp đỡ nào.

Câu trả lời #1

Để nó hoạt động, bạn cần thực hiện những thay đổi sau:

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

}

Như bạn có thể thấy, tôi đã gỡ bỏ dòng sau

app.controller('secondController', secondController);

Tôi cũng đã thêm dòng này

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

Điều này có nghĩa là, biến app sẽ có thể truy cập được bên ngoài mô-đun.

Bây giờ trong tệp khác, nơi bạn có secondController, bạn cần thêm dòng sau tại

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

Đây là cách tập tin secondController của bạn nên trông như thế nào

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

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

Trong mã mà bạn đã viết trước đó, tệp app.ts chứa "secondController", nhưng nó không biết biến này là gì, vì tệp SecondController.ts chưa được tải.

Bây giờ những gì tôi đã làm là, tôi đã làm biến app thành công khai.

Vậy bây giờ chúng ta có thể đăng ký bộ điều khiển mới sau khi nó đã được định nghĩa.

Để làm cho cuộc sống của bạn dễ dàng hơn, tôi đề nghị bạn cũng làm điều tương tự với CategoryCtrl. Lấy định nghĩa của nó ra khỏi file app.ts và đưa vào một file riêng. Sau đó đăng ký nó với Angular giống như cách tôi đã làm với secondController.

Bằng cách đó, bạn có thể dễ dàng thêm nhiều tệp và đăng ký chúng.

Câu trả lời #2

Hãy thử đặt chúng vào cùng một tệp:

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

Lý do

Hãy chắc chắn rằng các thẻ script được sắp xếp đúng thứ tự. Tức là, controller được định nghĩa trước khi bạn đăng ký nó với Angular.