Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Anglar

    Cargado por

    Bryan Alfredo Namoc Portilla
    14 vistas2 páginas
    Angular2

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    TXT, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Angular2

    Copyright:

    © All Rights Reserved
    Descargue como TXT, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    14 vistas2 páginas

    Anglar

    Cargado por

    Bryan Alfredo Namoc Portilla
    Angular2

    Copyright:

    © All Rights Reserved
    Descargue como TXT, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 2

    Lo que es angular 2?

    Angular es un marco de cdigo abierto para la creacin de aplicaciones (web). El mar


    co se ocupa de cosas como la navegacin, el enlace de datos, la inyeccin de depende
    ncia y mucho ms, por lo que no tiene que aplicar por s mismo.
    La primera versin del angular se cre en 2009 y se hizo muy popular, pero en los lti
    mos aos nuevos marcos apareci que ofreca un mejor rendimiento. En 2014 el Equipo an
    gular decidi reescribir por completo el marco basado en las lecciones aprendidas
    y que se convirti angular 2. En el momento de escribir este post, angular 2 se en
    cuentra en fase beta, as que espero que no deberamos estar viendo los cambios que
    se rompen en otros lanzamientos.
    La documentacin en la pgina web 2 angular es muy buena, as que asegrese de ir a http
    ://angular.io y hacer el 5 Minuto de inicio rpido y Tutorial.
    No voy a ser capaz de cubrir todos los conceptos en Angular 2 en este post, pero
    la ms importante es comenzar con el angular de 2 componentes.
    componentes
    Un componente en angular implementa una vista o parte de una vista en la aplicac
    in. Contiene todo el cdigo para la visualizacin de la vista y su gestin.
    Siempre es ms fcil de explicar con un ejemplo, as que vamos a echar un vistazo a un
    componente simple que muestra la hora actual.
    {} la importacin de componentes de 'angular2 / ncleo';
    @Componente({
    Selector: 'de tiempo actual ",
    Plantilla: '<h1> Tiempo: {{time}} </ h1>'
    })
    CurrentTime clase {exportacin
    hora Fecha;
    constructor () {
    this.time = new Date ();
    setInterval (() => this.time = new Date (), 1000);
    }
    }
    La aplicacin de la CurrentTime clase es muy sencillo, tiene un tiempo de propieda
    d que se actualiza cada segundo. Como se puede ver esta clase no tiene ningn cdigo
    especfico Angular 2 en ella. La parte interesante es el cdigo de la derecha por e
    ncima de la clase que comienza con el decorador @Component.

    decoradores
    Decoradores son un nuevo concepto a mquina de escribir (y ES7 / ES2016) que se pu
    ede utilizar para agregar funcionalidad a una clase. Es especialmente til para lo
    s desarrolladores de bibliotecas y los marcos, como Angular 2, y se puede poner
    en prctica sus propios decoradores si es necesario.
    El decorador @Component se lleva a cabo dentro del marco angular 2. Cuando se ag
    rega el decorador @Component a sus clases, que se ocupa de cosas como el acoplam
    iento de la clase a una plantilla de vista, el enlace de datos, la inyeccin de de
    pendencia, etc.
    En nuestro ejemplo, vemos que el selector de este componente se establece en los
    tiempos actuales, por lo que dentro de nuestra aplicacin angular tendremos una pg
    ina index.html, que podra contener el siguiente cdigo HTML:

    <Body>
    <De tiempo actual> Cargando ... </ de tiempo actual>
    </ Body>
    Cuando esta pgina se carga en el navegador, angular sabr que cuando se encuentra c
    on <de tiempo actual>, que necesita para reemplazar eso con el cdigo HTML en la p
    lantilla del componente.
    El enlace de datos
    La plantilla para nuestro componente contiene el cdigo HTML siguiente:
    <H1> Tiempo: {{hora}} </ h1>
    El tiempo {{}} parte es una anotacin de enlace de datos en angular, que significa
    que en lugar de mostrar {{hora}} en el navegador, se mostrar el valor de la prop
    iedad de tiempo en el objeto CurrentTime. As que cada vez que el valor del tiempo
    se cambia la etiqueta <h1> se actualizar automticamente para mostrar el nuevo val
    or.
    En este ejemplo, slo he utilizado unin de un alojamiento a la vista de datos, pero
    es evidente que se puede utilizar el enlace de al revs, as, para obtener los dato
    s de entrada del usuario.
    Vamos a estar cubriendo estos enlaces cuando estamos construyendo nuestra aplica
    cin jnico 2 en las prximas partes de este tutorial, pero si quieres una visin genera
    l de todos los posibles atascamientos, echar un vistazo a la angular 2 Cheatshee
    t.
    mdulos
    Ahora, estoy seguro de que no se ha perdido la primera lnea en el ejemplo:
    {} la importacin de componentes de 'angular2 / ncleo';
    La declaracin anterior significa simplemente que el compilador mecanografiado deb
    e buscar el guin angular2 / ncleo en el proyecto e importar el mdulo de componentes
    de la misma. Esto tambin significa que no es necesario escribir <script> en el cd
    igo HTML ms, porque las secuencias de comandos se cargarn automticamente.
    Angular 2 se divide en muchos mdulos para que pueda elegir el que la funcionalida
    d que desea incluir en su aplicacin.
    Los mdulos son compatibles con mecanografiado y ES6 y usted puede utilizar con Co
    mmonJS, AMD y otros sistemas de mdulos existentes. Su proyecto angular 2 tendr un
    archivo tsconfig.json donde puede configurar las opciones del mdulo para el compi
    lador de texto mecanografiado.
    Tenga en cuenta que nuestra propia declaracin de la clase CurrentTime est precedid
    o por la palabra clave de exportacin, esto significa que puede ser importado como
    un mdulo en otros archivos de script.

    Ultimas palabras
    Esta fue una muy breve introduccin a Angular 2, y como he mencionado antes, asegre
    se de hacer el inicio rpido de 5 minutos y tutorial para ayudar a entender mejor
    angular 2 y ver ejemplos de trabajo de aplicaciones angular 2.
    Para hacer una aplicacin angular 2, que tendr que incluir un par de archivos de la
    aplicacin y de iniciarla, pero no vamos a hacerlo ahora. Vamos a cubrir todas es
    tas cosas cuando empezamos con Ionic 2 en la parte 5 y construimos una aplicacin
    mvil de trabajo.

    También podría gustarte