我如何使用打字稿定义我的控制？ [英] How can I define my controller using TypeScript?
问题描述
如何使用打字稿定义我的控制器。由于现在它的角JS，但我想改变这种类型script.So的数据，可快速检索。
函数CustomerCtrl（$范围，$ HTTP，$ templateCache）{ $ scope.search =功能（搜索）
{
调试器;
变种搜索= {
ACCOUNTID：search.AccountId，
checkActiveOnly：search.checkActiveOnly，
checkParentsOnly：search.checkParentsOnly，
listCustomerType：search.listCustomerType
};
$ scope.customer = [];
$ scope.ticket = [];
$ scope.services = [];
$ http.put（'＆LT;％= RESOLVEURL（API /搜索/ PutDoSearch）％＆GT;'，搜索）。
成功（功能（数据，状态，头，配置）{
调试器;
$ scope.cust_File =数据[0] .customers;
$ scope.ticket_file =数据[0] .tickets;
$ scope.service_file =数据[0] .services;
}）。
错误（功能（数据，状态）
{
的console.log（请求失败）;
}）;
}
}
我决定增加另一个答案，用工作的例子。这是非常简单的版本，但应该显示所有的基本如何向我们的 打字稿 和 angularJS 。
这将是我们 data.json 扮演服务器的角色。
{
一：客户AAA，
B：客户BBB，
C：客户DDD
D：客户DDD
默认值：未找到
}
这是我们的出发模块 MainApp.js ：
VAR应用= angular.module（'MainApp'，[
CustomerSearch
]）;angular.module（'CustomerSearch'，[]）
所以后来我们就可以使用模块 CustomerSearch 。这将是我们的index.html
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=MainAppNG-严格二＆GT; ＆LT; HEAD＆GT;
＆LT;标题＆gt;我的应用程序＆LT; /标题＆GT;
＆LT;脚本数据需要=angular.js@*
SRC =https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0-rc.1/angular.js
＆GT;＆LT; / SCRIPT＆GT; ＆所述; SCRIPT SRC =MainApp.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =CustomerSearch.dirc.js＆GT;＆下; /脚本＆GT;
＆LT; /头＆GT; ＆LT;身体GT;
＆LT;用户搜索＆GT;＆LT; /客户搜索＆GT; //我们的指令
＆LT; /身体GT;＆LT; / HTML＆GT;
现在，我们将看到1）指令，2）适用范围; 3）控制器的声明。这一切都可以在一个文件中（请在这里 ）。让我们观察到文件的所有三个部分 CustomerSearch.dirc.js 的（这是CustomerSearch.dirc。 TS ..但我plunker编译过的）的
1）获得参考模块CustomerSearch上述声明，并声明指令
///＆lt;参考路径=../脚本/ angularjs / angular.d.ts/＆GT;
模块CustomerSearch
{
VAR应用= angular.module（'CustomerSearch'）; 出口类CustomerSearchDirective实现ng.IDirective
{
公共限制：字符串=E;
公共取代：布尔= TRUE;
公共模板：字符串=＆LT; DIV＆gt;中+
＆LT;输入NG模型= \\SearchedValue \\/＆gt;中+
＆LT;按钮NG点击= \\Ctrl.Search（）\\＆GT;搜索和LT; /按钮＆gt;中+
＆LT; P＆gt;作为搜索值LT; B＆GT; {{SearchedValue}}＆LT; / B＆gt;中+
我们发现：其中，I＆GT; {{FoundResult}}＆LT; / I＆GT;＆LT; / P＆gt;中+
＆LT; / DIV＆gt;中;
公共控制器：字符串='CustomerSearchCtrl';
公共controllerAs：字符串='Ctrl'键;
公开范围= {};
} app.directive（customerSearch[（）=＆gt;新建CustomerSearch.CustomerSearchDirective（）]）;
该指令在打字稿宣布，并立即注入到我们的模块
现在，我们声明一个范围被用作在控制器强类型对象
导出接口ICustomerSearchScope扩展ng.IScope
{
SearchedValue：字符串;
FoundResult：字符串;
按Ctrl：CustomerSearchCtrl;
}
现在我们可以宣布简单的控制器
出口类CustomerSearchCtrl
{
静态$注射=$范围，$ HTTP];
构造函数（$保护范围：CustomerSearch.ICustomerSearchScope，
保护$ HTTP：ng.IHttpService）
{
// 去做
}
公共搜索（）：无效
{
这一点。$ HTTP
获得（data.json）
。然后（（响应：ng.IHttpPromiseCallbackArg＆LT;＆任何GT）=＆GT;
{
VAR数据= response.data;
这一点。$ scope.FoundResult =数据[本。$ scope.SearchedValue]
||数据[默认];
}）;
}
}
app.controller（'CustomerSearchCtrl'，CustomerSearch.CustomerSearchCtrl）;
}
观察到所有行动这里
How to define my controller using TypeScript. As right now it's in angular js but i want to change this for type script.So that the data can be retrieved quickly.
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");
});
}
}
I decided to add another answer, with working example. It is very simplified version, but should show all the basic how to us TypeScript and angularJS.
There is a working plunker
This would be our data.json playing role of a server.
{
"a": "Customer AAA",
"b": "Customer BBB",
"c": "Customer DDD",
"d": "Customer DDD",
"Default": "Not found"
}
This would be our starting module MainApp.js:
var app = angular.module('MainApp', [
'CustomerSearch'
]);
angular.module('CustomerSearch',[])
So later we can use module CustomerSearch. This would be our 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>
Now, we would see the declaration of 1) directive, 2) scope, 3) controller. This all could be in one file (check it here). Let's observe all three parts of that file CustomerSearch.dirc.js (it is CustomerSearch.dirc.ts .. but for plunker I complied that)
1) get reference to module 'CustomerSearch' declared above and declare 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()]);
The directive was declared in TypeScript and immediately injected into the our module
Now, we declare a scope to be used as a strongly typed object in Controller:
export interface ICustomerSearchScope extends ng.IScope
{
SearchedValue: string;
FoundResult: string;
Ctrl: CustomerSearchCtrl;
}
And now we can declare simple controller
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);
}
Observe that all in action here
这篇关于我如何使用打字稿定义我的控制？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
