angularjs - parametros - formularios en angular 5

¿Cómo puedo definir mi controlador usando TypeScript?

Question

Cómo definir mi controlador usando TypeScript. Como en este momento está en js angular, pero quiero cambiar esto para el script de tipo, para que los datos se puedan recuperar rápidamente.

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

Answer 1

Ahora vamos a ver un ejemplo básico en el que tenemos que crear un módulo y un controlador con un método. Para comenzar con Typecript, necesitamos agregar los siguientes archivos en nuestro proyecto. No tienen en cuenta la trayectoria de referencia, acaba de encontrar el nombre del archivo de la 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 el Script mecanografiado desde el siguiente enlace si no está presente en Visual Studio https://www.microsoft.com/en-us/download/details.aspx?id=48593

Una vez que termine la descarga del archivo tipificación anterior, añadir que en su proyecto.

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

Ahora cree un archivo mecanografiado app.ts y añadir la referencia anterior en las dos primera línea para obtener el IntelliSense mientras que la codificación.

Consulte a continuación enlace para más información detallada

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

Answer 2

Habría más para mejorar (por ejemplo, no $ scope.search, pero Ctrl.search), pero una de las formas podrían ser:

En primer lugar creamos nuestra MyModule módulo y definimos un nuevo ámbito $ - el 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[];
    }

El siguiente es el controlador, que luego se inyectaría en el módulo angular. que hace uso de la ICustomerScope definido anteriormente

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

Ahora continuamos - obtenemos referencia al módulo y registramos el controlador: CustomerCtrl .

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

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

Ahora nuestro controlador puede ser usado, hará lo mismo que el original. Pero se podría utilizar y declarar las acciones públicas en lugar de $scope.methods()

Answer 3

Hay 2 formas diferentes de abordar esto:

• sigo usando $ scope
• utilizando controllerAs (recomendado)

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

    }
}

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

    }
}

Si cambia de $ scope a controller Como su vista cambiaría de:

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

a:

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

donde custom es una representación del controlador por lo que está diciendo explícitamente lo que va a enlazar en su margen de beneficio.

Nota $ inject es una forma de proporcionar información angular sobre qué dependencias inyectar en su controlador en tiempo de ejecución, incluso cuando el código se ha minimizado (las cadenas no se minimizan)

Answer 4

He decidido añadir otra respuesta, con el ejemplo de trabajo. Está muy versión simplificada, pero debe mostrar toda la forma básica que nos TypeScript y angularJS .

No es un trabajo plunker

Este sería nuestro rol de servidor data.json .

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

Esto sería nuestro módulo de partida MainApp.js :

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

angular.module(''CustomerSearch'',[])

Entonces más tarde podemos usar el módulo CustomerSearch . Este sería nuestro 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>

Ahora, veríamos la declaración de 1) directiva, 2) alcance, 3) controlador. Todo esto podría ser en un solo archivo (comprobarlo aquí ). Observemos las tres partes de ese archivo CustomerSearch.dirc.js (es CustomerSearch.dirc. Ts .. pero para plunker cumplí eso)

1) obtener la referencia al módulo ''CustomerSearch'' declarado arriba y declarar la 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()]);

La directiva fue declarada en TypeScript e inmediatamente inyectada en nuestro módulo

Ahora, declaramos un ámbito para ser utilizado como un objeto fuertemente tipado en Controller:

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

Y ahora podemos declarar simple controlador

    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 todo en acción aquí