Как определить мой контроллер с помощью TypeScript?
Как определить мой контроллер с помощью TypeScript. Как сейчас, в angular js, но я хочу изменить это для типа script. Так что данные можно быстро восстановить.
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");
});
}
}
Ответы
Ответ 1
Я решил добавить еще один ответ с рабочим примером. Это очень упрощенная версия, но должна показать все основные, как нам 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="[email protected]*"
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) scope, 3) контроллера. Все это может быть в одном файле (см. здесь). Пусть наблюдаются все три части этого файла CustomerSearch.dirc.js (это CustomerSearch.dirc. ts.., но для plunker я выполнил это)
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);
}
Обратите внимание, что все в здесь >
Ответ 2
Есть два разных способа решения этой проблемы:
- все еще использует $scope
- using 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 информацию о том, какие зависимости вводить в ваш контроллер во время выполнения, даже когда код был уменьшен (строки не получают minified)
Ответ 3
Было бы лучше улучшить (например, не $scope.search, а Ctrl.search), но одним из способов может быть:
Сначала мы создаем наш модуль 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);
}
Теперь наш контроллер можно использовать, будет делать то же самое, что и оригинал. Но можно было бы использовать и объявлять публичные действия вместо $scope.methods()
Ответ 4
Теперь мы увидим базовый пример, в котором мы должны создать один модуль и контроллер одним способом. Для начала с 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>
Установите Typescript по следующей ссылке, если нет в визуальной студии
https://www.microsoft.com/en-us/download/details.aspx?id=48593
Как только закончите загрузку вышеуказанного файла ввода, добавьте это в свой проект.
/// <reference path="../scripts/typings/angularjs/angular.d.ts" />
/// <reference path="../scripts/typings/angularjs/angular-route.d.ts" />
Теперь создайте app_ts файла Typescript и добавьте вышеприведенную ссылку в первых двух строках, чтобы получить intellisense во время кодирования.
Подробнее см. ссылку ниже
https://angular2js.blogspot.in/2016/06/create-sample-application-in-angular-js.html
