component angularjs typescript




Como posso definir meu controlador usando o TypeScript? (3)

Agora veremos uma amostra básica na qual temos que criar um módulo e um controlador com um método. Para começar com o Typecript, precisamos que os seguintes arquivos sejam adicionados ao nosso projeto. Não considere o caminho de referência, basta encontrar o nome do arquivo na lista.

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

Instale o Texto datilografado no link a seguir, se não estiver presente no visual studio https://www.microsoft.com/en-us/download/details.aspx?id=48593

Depois de concluir o download do arquivo de digitação acima, adicione-o ao seu projeto.

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

Agora crie um arquivo de texto datilografado app.ts e adicione a referência acima nas duas primeiras linhas para obter o intellisense durante a codificação.

Consulte o link abaixo para obter mais informações detalhadas

https://angular2js.blogspot.in/2016/06/create-sample-application-in-angular-js.html

Como definir meu controlador usando o TypeScript. Como agora está em js angulares, mas eu quero alterar isso para o script de tipo. Para que os dados possam ser recuperados rapidamente.

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

Decidi adicionar outra resposta, com um exemplo de trabalho. É uma versão muito simplificada, mas deve mostrar todo o básico sobre como TypeScript o TypeScript e o angularJS .

Existe um desentupidor em funcionamento

Este seria o nosso data.json desempenhando um papel de servidor.

{
  "a": "Customer AAA",
  "b": "Customer BBB",
  "c": "Customer DDD",
  "d": "Customer DDD",
  "Default": "Not found"
}

Este seria o nosso módulo inicial MainApp.js :

var app = angular.module('MainApp', [
  'CustomerSearch'
  ]);

angular.module('CustomerSearch',[])

Então, mais tarde, podemos usar o módulo CustomerSearch . Este seria o nosso 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>

Agora, veríamos a declaração de 1) diretiva, 2) escopo, 3) controlador. Tudo isso pode estar em um arquivo (verifique aqui ). Vamos observar todas as três partes desse arquivo CustomerSearch.dirc.js (é CustomerSearch.dirc. Ts .. mas, para o plunker, eu o cumpri)

1) obtenha referência ao módulo 'CustomerSearch' declarado acima e declare a 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()]);

A diretiva foi declarada em TypeScript e imediatamente injetada no nosso módulo

Agora, declaramos um escopo a ser usado como um objeto fortemente tipado no Controller:

    export interface ICustomerSearchScope  extends ng.IScope
    {
        SearchedValue: string;
        FoundResult: string;
        Ctrl: CustomerSearchCtrl;
    }

E agora podemos declarar um controlador simples

    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 que tudo em ação aqui


Haveria mais a melhorar (por exemplo, não $ scope.search, mas Ctrl.search) , mas uma das maneiras poderia ser:

Primeiro, criamos nosso módulo MyModule e definimos um novo escopo $ - o 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[];
    }

Em seguida é o controlador, que seria injetado no módulo angular posteriormente. ele usa o ICustomerScope definido acima

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

Agora continuamos - obtemos referência ao módulo e registramos o controlador: CustomerCtrl .

    var app = angular.module("MyControllerModule");    

    app.controller("CustomerCtrl", MyModule.CustomerCtrl);
}

Agora, nosso controlador pode ser usado, fará o mesmo que o original. Mas poderia ser usado e declarar ações públicas em vez de $scope.methods()





typescript