TypeScriptを使用してコントローラーを定義するにはどうすればよいですか？
TypeScriptを使用してコントローラーを定義する方法。現時点ではangular jsですが、スクリプトをタイプするためにこれを変更したいので、データをすばやく取得できます。
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サーバーの役割を果たす。
{
"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）コントローラーの宣言が表示されます。これはすべて1つのファイルに含めることができます（チェックしてください こちら ）。そのファイルの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で宣言され、すぐにモジュールに挿入されました
次に、コントローラーで厳密に型指定されたオブジェクトとして使用されるスコープを宣言します。
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);
}
action here のすべてに注意してください
これに取り組むには2つの異なる方法があります。
- まだ$ 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からcontrollerAsに切り替えると、ビューは次のように変わります。
<div ng-controller="CustomCtrl">
<span>{{customer}}</span>
</div>
に：
<div ng-controller="CustomCtrl as custom">
<span>{{custom.customer}}</span>
</div>
customはコントローラの表現であるため、マークアップでバインドする対象を明示的に指定します。
注 $ injectは、コードが縮小された場合でも、実行時にコントローラーに挿入する依存関係に関する情報をangularに提供する方法です（文字列は縮小されます）
改善することはもっとあります（たとえば、$ scope.searchではなく、Ctrl.search）、しかし、方法の1つは：
まず、モジュール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を使用します
_ 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);
}
_これでコントローラーを使用できるようになり、オリジナルと同じようになります。しかし、パブリックアクションを使用して宣言できますinstead of $scope.methods()
これで、1つのメソッドでモジュールとコントローラーを作成する必要がある基本的なサンプルが表示されます。 TypeScriptを開始するには、プロジェクトに次のファイルを追加する必要があります。参照パスを考慮せずに、リストからファイル名を見つけてください。
<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に存在しない場合は、次のリンクからTypeScriptをインストールします https://www.Microsoft.com/en-us/download/details.aspx?id=4859
上記の入力ファイルのダウンロードが完了したら、プロジェクトに追加します。
/// <reference path="../scripts/typings/angularjs/angular.d.ts" />
/// <reference path="../scripts/typings/angularjs/angular-route.d.ts" />
TypeScriptファイルapp.tsを作成し、最初の2行に上記の参照を追加して、コーディング中にインテリセンスを取得します。
詳細については、以下のリンクを参照してください
https://angular2js.blogspot.in/2016/06/create-sample-application-in-angular-js.html