我怎样才能使用TypeScript定义我的控制器？
如何使用TypeScript定义我的控制器。 现在它是在angularjs，但我想改变这种types的脚本。因此，数据可以快速检索。
function CustomerCtrl($scope, $http, $templateCache){ $scope.search = function(search) { debugger; var Search = { AccountId: search.AccountId, checkActiveOnly: search.checkActiveOnly, checkParentsOnly: search.checkParentsOnly, listCustomerType: search.listCustomerType }; $scope.customer = []; $scope.ticket = []; $scope.services = []; $http.put('<%=ResolveUrl("API/Search/PutDoSearch")%>', Search). success(function(data, status, headers, config) { debugger; $scope.cust_File = data[0].customers; $scope.ticket_file = data[0].tickets; $scope.service_file = data[0].services; }). error(function(data, status) { console.log("Request Failed"); }); } } 我决定添加另一个答案，与工作的例子。 这是非常简化的版本，但应该显示所有基本的TypeScript和angularJS 。
有一个工作的笨蛋
这将是我们的服务器的data.json播放angular色。
{ "a": "Customer AAA", "b": "Customer BBB", "c": "Customer DDD", "d": "Customer DDD", "Default": "Not found" }
这将是我们的启动模块MainApp.js ：
var app = angular.module('MainApp', [ 'CustomerSearch' ]); angular.module('CustomerSearch',[])
所以以后我们可以使用模块CustomerSearch 。 这将是我们的index.html
<!DOCTYPE html> <html ng-app="MainApp" ng-strict-di> <head> <title>my app</title> <script data-require="angular.js@*" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0-rc.1/angular.js" ></script> <script src="MainApp.js"></script> <script src="CustomerSearch.dirc.js"></script> </head> <body> <customer-search></customer-search> // our directive </body> </html>
现在，我们将看到1）指令，2）范围，3）控制器的声明。 这一切都可以在一个文件（ 在这里检查）。 让我们观察该文件的所有三个部分CustomerSearch.dirc.js （这是CustomerSearch.dirc。ts ..但对于蹲下我遵守）
1）获取上面声明的模块“CustomerSearch”的引用并声明directive
/// <reference path="../scripts/angularjs/angular.d.ts" /> module CustomerSearch { var app = angular.module('CustomerSearch'); export class CustomerSearchDirective implements ng.IDirective { public restrict: string = "E"; public replace: boolean = true; public template: string = "<div>" + "<input ng-model=\"SearchedValue\" />" + "<button ng-click=\"Ctrl.Search()\" >Search</button>" + "<p> for searched value <b>{{SearchedValue}}</b> " + " we found: <i>{{FoundResult}}</i></p>" + "</div>"; public controller: string = 'CustomerSearchCtrl'; public controllerAs: string = 'Ctrl'; public scope = {}; } app.directive("customerSearch", [() => new CustomerSearch.CustomerSearchDirective()]);
该指令在TypeScript中声明并立即注入到我们的模块中
现在，我们声明一个在Controller中用作强types对象的作用域：
export interface ICustomerSearchScope extends ng.IScope { SearchedValue: string; FoundResult: string; Ctrl: CustomerSearchCtrl; }
现在我们可以声明简单的控制器
export class CustomerSearchCtrl { static $inject = ["$scope", "$http"]; constructor(protected $scope: CustomerSearch.ICustomerSearchScope, protected $http: ng.IHttpService) { // todo } public Search(): void { this.$http .get("data.json") .then((response: ng.IHttpPromiseCallbackArg<any>) => { var data = response.data; this.$scope.FoundResult = data[this.$scope.SearchedValue] || data["Default"]; }); } } app.controller('CustomerSearchCtrl', CustomerSearch.CustomerSearchCtrl); }
观察这一切行动
有两种不同的方法来解决这个问题：
- 仍然使用$ scope
- 使用controllerAs（ 推荐 ）
使用$ scope
class CustomCtrl{ static $inject = ['$scope', '$http', '$templateCache']; constructor ( private $scope, private $http, private $templateCache ){ $scope.search = this.search; } private search (search) { debugger; var Search = { AccountId: search.AccountId, checkActiveOnly: search.checkActiveOnly, checkParentsOnly: search.checkParentsOnly, listCustomerType: search.listCustomerType }; this.$scope.customer = []; this.$scope.ticket = []; this.$scope.services = []; this.$http.put('<%=ResolveUrl("API/Search/PutDoSearch")%>', Search). success((data, status, headers, config) => { debugger; this.$scope.cust_File = data[0].customers; this.$scope.ticket_file = data[0].tickets; this.$scope.service_file = data[0].services; }). error((data, status) => { console.log("Request Failed"); }); } }
使用controllerAs
class CustomCtrl{ public customer; public ticket; public services; public cust_File; public ticket_file; public service_file; static $inject = ['$scope', '$http', '$templateCache']; constructor ( private $http, private $templateCache ){} private search (search) { debugger; var Search = { AccountId: search.AccountId, checkActiveOnly: search.checkActiveOnly, checkParentsOnly: search.checkParentsOnly, listCustomerType: search.listCustomerType }; this.customer = []; this.ticket = []; this.services = []; this.$http.put('<%=ResolveUrl("API/Search/PutDoSearch")%>', Search). success((data, status, headers, config) => { debugger; this.cust_File = data[0].customers; this.ticket_file = data[0].tickets; this.service_file = data[0].services; }). error((data, status) => { console.log("Request Failed"); }); } }
如果您从$ scope切换到controller，您的视图将从以下位置更改：
<div ng-controller="CustomCtrl"> <span>{{customer}}</span> </div>
至：
<div ng-controller="CustomCtrl as custom"> <span>{{custom.customer}}</span> </div>
custom是控制器的表示，因此您明确地告诉您在标记中绑定了什么。
注意 $ inject是一种提供angular度信息的方法，即使在代码被缩小的情况下（string不会被缩小），在运行时注入到控制器的依赖关系也是如此。
会有更多的改进（例如，不要$ scope.search，但Ctrl.search） ，但其中一种方法可能是：
首先我们创build我们的模块MyModule并定义一个新的$ scope – ICustomer Scope
module MyModule { export interface ICustomerScope extends ng.IScope { search: (search: any) => void; customer: any[]; ticket: any[]; services: any[]; cust_File: any[]; ticket_file: any[]; service_file: any[]; }
接下来是控制器，稍后将被注入angular度模块。 它确实使用了ICustomerScope定义的ICustomerScope
export class CustomerCtrl { static $inject = ['$scope', '$http', '$templateCache']; constructor(protected $scope: ICustomerScope, protected $http: ng.IHttpService, protected $templateCache: ng.ITemplateCacheService) { $scope.search = this.search; } public search = (search: any) => { debugger; var Search = { AccountId: search.AccountId, checkActiveOnly: search.checkActiveOnly, checkParentsOnly: search.checkParentsOnly, listCustomerType: search.listCustomerType }; this.$scope.customer = []; this.$scope.ticket = []; this.$scope.services = []; var url = "someUrl"; // '<%=ResolveUrl("API/Search/PutDoSearch")%>' this.$http.put(url, Search). success((data, status, headers, config) => { debugger; this.$scope.cust_File = data[0].customers; this.$scope.ticket_file = data[0].tickets; this.$scope.service_file = data[0].services; }). error((data, status) => { console.log("Request Failed"); }); } }
现在我们继续 – 我们得到模块的参考，并注册控制器： CustomerCtrl 。
var app = angular.module("MyControllerModule"); app.controller("CustomerCtrl", MyModule.CustomerCtrl); }
现在我们的控制器可以使用，会做到原来的一样。 但可以使用和声明公共行为， 而不是 $scope.methods()
现在我们将看到一个基本的例子，我们必须用一种方法创build一个模块和一个控制器。 为了开始使用Typescript，我们需要在我们的项目中添加以下文件。 不要考虑参考path，只需从列表中find文件名即可。
<script type="text/javascript" src="scripts/angular.js"></script> <script type="text/javascript" src="scripts/angular-route.js"></script> <script type="text/javascript" src="scripts/jquery-1.9.1.js"></script> <script type="text/javascript" src="scripts/bootstrap.js"></script>
如果在Visual Studio中不存在，请从以下链接安装手稿https://www.microsoft.com/zh-cn/download/details.aspx?id=48593
一旦完成上面的input文件的下载，将其添加到您的项目中。
/// <reference path="../scripts/typings/angularjs/angular.d.ts" /> /// <reference path="../scripts/typings/angularjs/angular-route.d.ts" />
现在创build一个打字稿文件app.ts并在前两行添加上面的引用来获得编码时的智能感知。
请参阅下面的链接了解更多详情
https://angular2js.blogspot.in/2016/06/create-sample-application-in-angular-js.html
