AngularJS Aplicación

Ahora es el momento de crear una verdadera aplicación web de una sola página (single page web application, SPA) con AngularJS.

Ejemplo de aplicación AngularJS

Ya has aprendido lo suficiente sobre AngularJS; ahora puedes comenzar a crear tu primera aplicación AngularJS:

Mis notas



Caracteres restantes:100


Explicación de la aplicación

Ejemplo de AngularJS

<html ng-app="myNoteApp">
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.net/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-controller="myNoteCtrl">

<h2>Mis notas</h2>

<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>

<p>
<button ng-click="save()">Guardar</button>
<button ng-click="clear()">Borrar</button>
</p>

<p>Number of characters left: <span ng-bind="left()"></span></p>

</div>

<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>

</body>
</html>

Pruébalo »

Archivo de la aplicación "myNoteApp.js":

var app = angular.module("myNoteApp", []);

Archivo del controlador "myNoteCtrl.js":

app.controller("myNoteCtrl", function($scope) {
    $scope.message = "";
    $scope.left  = function() {return 100 - $scope.message.length;};
    $scope.clear = function() {$scope.message = "";};
    $scope.save  = function() {alert("Note Saved");};
});

El elemento <html> es el contenedor de la aplicación AngularJS: ng-app=""myNoteAppEl <div> es el ámbito del controlador en la página HTML: ng-controller=""

<html ng-app="myNoteApp">

La directiva vincula <textarea> a la variable del controladormyNoteCtrlDos

<div ng-controller="myNoteCtrl">

ng-modeleventos llaman a las funciones del controlador message:

<textarea ng-model="message" cols="40" rows="10"></textarea>

La directiva enlaza la función del controladorng-clicka <span>, para mostrar los caracteres restantes:clear()ysave():

<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>

ng-bindEl archivo de la biblioteca de la aplicación debe cargarse después de AngularJS para poder ejecutarse:left()Arquitectura de la aplicación AngularJS

Number of characters left: <span ng-bind="left()"></span>

El ejemplo anterior es una aplicación web de una sola página (single page web application, SPA) completa en AngularJS.

<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>

Arquitectura de la aplicación AngularJS

El elemento <div> define el ámbito del controlador AngularJS (

En una aplicación puede haber muchos controladores.ng-app=).

El archivo de la aplicación () define el código del modelo de la aplicación.ng-controller=).

Uno o más archivos de controlador () definen el código del controlador.

Resumen: ¿cómo funciona?my...App.jsLa directiva ng-app se encuentra en el elemento raíz de la aplicación.

Para aplicaciones web de una sola página (single page web application, SPA), la raíz de la aplicación suele ser el elemento <html>.my...Ctrl.jsUna o más directivas ng-controller definen los controladores de la aplicación. Cada controlador tiene su propio ámbito: el elemento HTML definido.

Resumen: ¿cómo funciona?

La raíz de la aplicación puede ser toda la página o una pequeña parte de ella; si es una parte pequeña, se compilará y ejecutará más rápido.

Otras extensiones

IA pensando...

Módulos de AngularJS

Ejemplo de AngularJS

Lista de notas