Aplicación AngularJS Hello World: su primer programa de ejemplo

Tabla de contenido

La mejor manera de ver el poder de una aplicación AngularJS es crear su primera aplicación "Hello World" de programa básico 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, usamos Webstorm como nuestro IDE.

  1. Webstorm
  2. Texto sublime
  3. Eclipse de AngularJS
  4. Estudio visual

Hola mundo, AngularJS

El siguiente ejemplo muestra la forma más sencilla de crear su primera aplicación "Hola mundo" en AngularJS.

Guru99

{{message}}

Explicación del código:

  1. La palabra clave " ng-app " se usa para indicar que esta aplicación debe considerarse como una aplicación angular js. Se puede dar cualquier nombre 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 usando una variable miembro llamada "mensaje" que no es más que un marcador de posición para mostrar el mensaje "Hola mundo".
  4. La "etiqueta de script" se usa para hacer referencia al script angular.js que tiene toda la funcionalidad necesaria para angular js. Sin esta referencia, si intentamos usar cualquier función de AngularJS, no funcionarán.
  5. "Controlador" es el lugar donde realmente estamos creando nuestra lógica comercial, que es nuestro controlador. Los detalles de cada palabra clave se explicarán en los capítulos siguientes. Es importante tener en cuenta que estamos definiendo un método de controlador llamado 'HelloWorldCtrl' al que se hace referencia en Step2.
  6. Estamos creando una "función" que será llamada 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 "mensaje", asignándole el valor de "HelloWorld" y adjuntando la variable miembro al objeto de alcance.

NOTA : La directiva ng-controller es una palabra clave definida en AngularJS (paso # 2) y se usa para definir controladores en su aplicación. Aquí en nuestra aplicación, hemos usado 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 con éxito, la siguiente salida se mostrará cuando ejecute su código en el navegador.

Producción:

Se mostrará el mensaje 'Hola mundo'.

Articulos interesantes...