AngularJS Hello World Application: su primer programa de ejemplo

La mejor manera de ver el poder de una aplicación AngularJS es crear su primer programa básico “Hello World” aplicación en Angular.js.

Hay muchos entornos de desarrollo integrados que puede usar para el desarrollo de AngularJS, algunos de los más populares se mencionan a continuación. En nuestro ejemplo, estamos usando Webstorm como nuestro IDE.

1. Tormenta web
2. Texto Sublime
3. AngularJS Eclipse
4. Estudio visual

Hola mundo, AngularJS

El siguiente ejemplo muestra la forma más fácil de crear su primera aplicación “Hello world” en AngularJS.

 

Explicación del código:

  1. La palabra clave “ng-app” se utiliza para denotar que esta aplicación debe considerarse como una aplicación js angular. Cualquier nombre se puede dar a esta aplicación.
  2. El controlador es lo que se utiliza para mantener la lógica empresarial. En la etiqueta h1, queremos acceder al controlador, que tendrá la lógica para mostrar “HelloWorld”, por lo que podemos decir, en esta etiqueta queremos acceder al controlador llamado “HelloWorldCtrl”.
  3. Estamos utilizando una variable miembro llamada “message” que no es más que un marcador de posición para mostrar el mensaje “Hello World”.
  4. La “etiqueta de script” se utiliza para hacer referencia al script angular.js que tiene toda la funcionalidad necesaria para js angular. Sin esta referencia, si tratamos de usar cualquier función AngularJS, no funcionarán.
  5. “Controller” es el lugar donde realmente estamos creando nuestra lógica de negocio, que es nuestro controlador. Los detalles de cada palabra clave se explicarán en los capítulos siguientes. Lo que es importante tener en cuenta que estamos definiendo un método de controlador llamado ‘HelloWorldCtrl’ al que se hace referencia en el paso 2.
  6. Estamos creando una “función” que se llamará cuando nuestro código llame a este controlador. El objeto $scope es un objeto especial en AngularJS que es un objeto global utilizado dentro de Angular.js. El objeto $scope se utiliza para administrar los datos entre el controlador y la vista.
  7. Estamos creando una variable miembro llamada “message”, asignándole el valor de “HelloWorld” y adjuntando la variable miembro al objeto scope.

NOTA: La directiva ng-controller es una palabra clave definida en AngularJS (paso #2) y se utiliza para definir controladores en su aplicación. Aquí en nuestra aplicación, hemos utilizado la palabra clave ng-controller para definir un controlador llamado ‘HelloWorldCtrl’. La lógica real para el controlador se creará en (paso #5).

Si el comando se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute el código en el navegador.

Salida:

Aparecerá el mensaje “Hola Mundo”.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *