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

La mejor manera de ver el poder de una aplicación AngularJS es crear su primera aplicación de programa básico "Hello World" en Angular.JS.

Existen muchos entornos de desarrollo integrados que puede utilizar 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.

Webstorm
Sublime Text
AngularJS Eclipse
Visual Studio

Hola mundo, AngularJS

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

<!DOCTYPE html>  
<html ng-app="app">  
<head>  
    <meta charset="utf 8">
    <title>Guru99</title>     
</head>  
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("app", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.message="Hello World" 
    } )
</script> 

</body>  
</html>

Explicación del código:

Los "aplicación ngLa palabra clave "se utiliza para indicar que esta aplicación debe considerarse como una aplicación angular js. Se puede dar cualquier nombre a esta aplicación.
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".
Estamos utilizando una variable miembro llamada "mensaje" que no es más que un marcador de posición para mostrar el mensaje "Hola mundo".
La "etiqueta de script" se utiliza para hacer referencia al script angular.js que tiene todas las funciones necesarias para angular js. Sin esta referencia, si intentamos utilizar alguna función de AngularJS, no funcionará.
"Controlador" es el lugar donde realmente creamos nuestra lógica de negocios, 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 el Paso 2.
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 gestionar los datos entre el controlador y la vista.
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 n.º 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 el (paso 5).

Si el comando se ejecuta correctamente, lo siguientewing El resultado se mostrará cuando ejecute su código en el navegador.

Salida:

Se mostrará el mensaje "Hola mundo".yed.