Angularjs 如何使用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");
            });
    }
}

函数CustomerCtrl（$scope、$http、$templateCache）{
$scope.search=函数（搜索）
{
调试器；
变量搜索={
AccountId:search.AccountId，
checkActiveOnly:search.checkActiveOnly，
checkParentsOnly:search.checkParentsOnly，
listCustomerType:search.listCustomerType
};
$scope.customer=[]；
$scope.ticket=[]；
$scope.services=[]；
$http.put（“”，搜索）。
成功（函数（数据、状态、标题、配置）{
调试器；
$scope.cust_File=数据[0]。客户；
$scope.ticket\u文件=数据[0]。tickets；
$scope.service_file=数据[0]。服务；
}).
错误（功能（数据、状态）
{
console.log（“请求失败”）；
});
}
}

解决这个问题有两种不同的方法：

• 仍在使用$scope
• 使用Controllera（推荐使用）

使用$scope

classcustomCtrl{
静态$inject=['$scope'，'$http'，'$templateCache']；
建造师(
私人$scope，
私人$http，
私有$templateCache
){
$scope.search=this.search；
}
私人搜索（搜索）{
调试器；
变量搜索={
AccountId:search.AccountId，
checkActiveOnly:search.checkActiveOnly，
checkParentsOnly:search.checkParentsOnly，
listCustomerType:search.listCustomerType
};
这是。$scope.customer=[]；
此.$scope.ticket=[]；
这是。$scope.services=[]；
这是.$http.put（''，搜索）。
成功（（数据、状态、标题、配置）=>{
调试器；
此.scope.cust_文件=数据[0]。客户；
此.scope.ticket\u文件=数据[0]。tickets；
此.scope.service\u文件=数据[0]。服务；
}).
错误（（数据、状态）=>{
console.log（“请求失败”）；
});
}
}

使用控制器

classcustomCtrl{
公众客户；
公众票；
公共服务；
公共客户档案；
公众票证档案；
公共服务档案；
静态$inject=['$scope'，'$http'，'$templateCache']；
建造师(
私人$http，
私有$templateCache
){}
私人搜索（搜索）{
调试器；
变量搜索={
AccountId:search.AccountId，
checkActiveOnly:search.checkActiveOnly，
checkParentsOnly:search.checkParentsOnly，
listCustomerType:search.listCustomerType
};
this.customer=[]；
这张票是[]；
这是服务=[]；
这是.$http.put（''，搜索）。
成功（（数据、状态、标题、配置）=>{
调试器；
this.cust_文件=数据[0]。客户；
this.ticket\u文件=数据[0]。tickets；
this.service_文件=数据[0]。服务；
}).
错误（（数据、状态）=>{
console.log（“请求失败”）；
});
}
}

如果您从$scope切换到controllerAs，您的视图将从：

<div ng-controller="CustomCtrl">
  <span>{{customer}}</span>
</div>

{{客户}}

致：

{{custom.customer}}

其中，

custom

是控制器的一种表示形式，因此您可以在标记中显式地告诉您要绑定到什么

注意

---

$inject是一种提供有关在运行时将哪些依赖项注入控制器的信息的方法，即使代码已缩小（字符串未缩小）

还有更多需要改进的地方（例如，不要$scope.search，而是Ctrl.search），但其中一种方法可以是：

首先，我们创建模块MyModule并定义一个新的$scope-the

iccustomer 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[];
    }

接下来是控制器，稍后将注入角度模块。它确实使用了上面定义的

icCustomerScope

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

---

现在我们的控制器可以使用了，将和原来的一样。但是可以使用并声明公共行动，而不是

$scope.methods（）

我决定添加另一个答案，并提供一个工作示例。它是一个非常简化的版本，但应该向我们展示所有基本的如何使用

类型脚本
和
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>

该指令在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);
}

导出类CustomerSearchCtrl
{
静态$inject=[“$scope”，“$http”]；
构造函数（受保护的$scope:CustomerSearch.icCustomerSearchScope，
受保护的$http:ng.IHttpService）
{
//待办事项
}
公共搜索（）：void
{
这是$http
.get（“data.json”）
现在，我们将看到一个基本的示例，我们必须用一种方法来创建一个模块和一个控制器。从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
<!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>

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

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

<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>

/// <reference path="../scripts/typings/angularjs/angular.d.ts" />
/// <reference path="../scripts/typings/angularjs/angular-route.d.ts" />