Tutorial de AngularJS: Tema 5 – Hola Mundo

[et_pb_section bb_built=»1″ admin_label=»Header» custom_padding_last_edited=»on|desktop» next_background_color=»#ffffff» _builder_version=»3.15″ use_background_color_gradient=»on» background_color_gradient_start=»#8624E1″ background_color_gradient_end=»#3607A6″ background_color_gradient_direction=»130deg» background_color_gradient_start_position=»25%» background_image=»http://equisde.com/blog/wp-content/uploads/2018/10/marketing-bg6.png» parallax=»on» custom_padding=»7vw||10vw||false|false» custom_padding_tablet=»100px||100px||true» custom_padding_phone=»||||true» bottom_divider_style=»ramp2″ bottom_divider_height=»250px» bottom_divider_flip=»horizontal» bottom_divider_height_tablet=»150px» bottom_divider_height_phone=»110px» bottom_divider_height_last_edited=»on|phone» saved_tabs=»all»][et_pb_row _builder_version=»3.2.1″][et_pb_column type=»4_4″][et_pb_post_title _builder_version=»3.15″ title_text_align=»center» meta_text_align=»center» text_color=»light» title_font=»Roboto||||||||» text_orientation=»center» meta_font=»Roboto||||||||» meta_font_size=»16″ title_font_size=»68px» title_font_size_tablet=»41px» title_font_size_phone=»35px» title_font_size_last_edited=»on|phone» /][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section bb_built=»1″ admin_label=»Get Started» _builder_version=»3.15″ custom_padding=»0px||||false|false» saved_tabs=»all» prev_background_color=»#000000″ next_background_color=»#000000″][et_pb_row custom_width_px=»1700px» use_custom_gutter=»on» gutter_width=»2″ custom_padding=»0px|||» custom_margin=»|||» padding_top_2=»30px» _builder_version=»3.15″ make_fullwidth=»on»][et_pb_column type=»4_4″][et_pb_image src=»http://equisde.com/blog/wp-content/uploads/2015/04/AngularJS-large.png» align=»center» _builder_version=»3.15″ max_width=»1100px» module_alignment=»center» custom_margin=»-8vw|||» custom_margin_tablet=»0vw|||» custom_margin_last_edited=»on|tablet» animation_style=»roll» animation_direction=»left» animation_intensity_roll=»1%» /][et_pb_text _builder_version=»3.15″ text_font_size=»16px» text_line_height=»2em» header_2_font=»Roboto|700|||||||» header_2_font_size=»45px» header_2_font_size_tablet=»35px» header_2_font_size_phone=»28px» header_2_font_size_last_edited=»on|desktop» header_2_line_height=»1.2em» max_width=»800px» max_width_last_edited=»off|desktop» module_alignment=»center» custom_margin=»|||» custom_padding=»|||»]

Después de unos días de inactividad volvemos a la carga con nuestros tutoriales de AngularJS.

Hoy vamos a programar nuestra primera web-app en AngularJS, nuestro primer Hola Mundo!Por ahora vamos a dejar de lado la estructura de carpetas y los ficheros javascript separados por tipo (directivas, controladores, etc.), ya que el código que vamos a hacer en estos primeros temas va a ser muy sencillito.

Partimos de la base de que todos tenéis conocimientos de html, así que vamos al turrón.

Primero de todo, para que Angularjs haga su magia deberemos cargarlo previamente en el html:

[code lang=»html»]
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
[/code]

Esta línea se puede añadir al header o al final del body de la página. Nosotros solemos añadirla al final porque mientras se cargan los javascripts el navegador pinta el resto de componentes del html.

Ahora vamos a ver el código del ejemplo y desgranarlo:

[code lang=»html»]
<html class="ng-scope" ng-app>
<head>
<title>Hola Mundo! – AngularJS – eXpert Designs -</title>
</head>
<body>
Escribe en el textbox:
<input ng-model="saludo" type="text">

<h2>Hola {{saludo}}!</h2>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</body>
</html>
[/code]

Lo primero que observamos es la etiqueta ng-app. Esta etiqueta es una directiva de Angularjs que indica cuál es el elemento raiz de donde colgará la aplicación. Normalmente se suele poner en la etiqueta body o html. Más adelante os daremos más información de cómo utilizarla.

[code lang=»html»]
<html ng-app>
[/code]

Lo siguiente que vemos es cómo pintar el resultado de lo que se escribe en el input con Angularjs, haciendo uso del Data Binding. Para ello, usaremos la directiva ng-model cuya propiedad identificará el campo y valor de la variable saludo del scope:

[code lang=»html»]
<input ng-model="saludo" type="text">
<h2>Hola {{saludo}}!</h2>
[/code]

El resultado lo tenéis aquí delante:

Y eso es todo por hoy. Como veis, Angularjs simplifica mucho la programación ya que consigue que con un par de líneas y unos atributos que implementan las etiquetas html se consigan resultados rápidamente.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section bb_built=»1″ fullwidth=»off» specialty=»off» prev_background_color=»#000000″ next_background_color=»#000000″][et_pb_row][et_pb_column type=»4_4″][et_pb_comments _builder_version=»3.15″ /][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section bb_built=»1″ admin_label=»Call to action» custom_padding_last_edited=»on|desktop» prev_background_color=»#ffffff» _builder_version=»3.15″ use_background_color_gradient=»on» background_color_gradient_start=»#8624E1″ background_color_gradient_end=»#3607A6″ background_color_gradient_direction=»130deg» background_color_gradient_start_position=»25%» background_image=»http://equisde.com/blog/wp-content/uploads/2018/10/marketing-bg6.png» parallax=»on» custom_padding=»16vw||7vw||false|false» custom_padding_tablet=»100px||100px||true» custom_padding_phone=»||||true» top_divider_style=»ramp2″ top_divider_height=»250px» top_divider_flip=»vertical» top_divider_height_tablet=»150px» top_divider_height_phone=»110px» top_divider_height_last_edited=»on|phone» saved_tabs=»all»][et_pb_row make_fullwidth=»on» custom_padding=»|||» _builder_version=»3.15″ custom_margin_phone=»|||» custom_margin_last_edited=»off|desktop»][et_pb_column type=»4_4″][et_pb_text _builder_version=»3.15″ text_font_size_last_edited=»off|desktop» header_2_font=»Roboto|700|||||||» header_2_font_size=»50px» header_2_font_size_tablet=»40px» header_2_font_size_phone=»32px» header_2_font_size_last_edited=»on|desktop» header_2_line_height=»1.4em» header_3_font=»Roboto|700||on|||||» header_3_text_align=»center» header_3_text_color=»#ffffff» header_3_font_size=»24px» header_3_font_size_tablet=»16px» header_3_font_size_phone=»14px» header_3_font_size_last_edited=»on|phone» header_3_letter_spacing=»5px» header_3_line_height=»2em» text_orientation=»center» background_layout=»dark» max_width=»850px» module_alignment=»center» custom_margin=»|||» custom_padding=»|||»]

¿Estáis preparados?

¡Construyamos esta comunidad juntos!

[/et_pb_text][et_pb_button button_text=»Ir al Blog» button_alignment=»center» _builder_version=»3.15″ custom_button=»on» button_text_size=»14px» button_bg_use_color_gradient=»on» button_bg_color_gradient_start=»#f92c8b» button_bg_color_gradient_end=»#b02cd6″ button_bg_color_gradient_direction=»90deg» button_border_width=»0px» button_border_color=»rgba(0,0,0,0)» button_border_radius=»4px» button_letter_spacing=»5px» button_font=»Roboto|700||on|||||» button_letter_spacing_hover=»5.5px» box_shadow_style=»preset3″ box_shadow_vertical=»20px» box_shadow_blur=»30px» box_shadow_spread=»-10px» box_shadow_color=»rgba(249,44,139,0.4)» background_layout=»dark» custom_margin=»|||» custom_padding=»18px|34px|18px|34px|true|true» button_url=»http://equisde.com/blog/» /][/et_pb_column][/et_pb_row][/et_pb_section]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *