Latest web development tutorials

Aplicaciones AngularJS

Ahora es el momento para crear un verdadero AngularJS de una sola página de aplicaciones web (página sola aplicación web, SPA) a.

AngularJS ejemplos de aplicación

Hemos aprendido suficiente conocimiento sobre AngularJS, ahora puede empezar a crear su primera aplicación AngularJS:

Mis notas



Restante Contar palabras:100


Explicar la aplicación

AngularJS ejemplos

<Html ng-app = "myNoteApp ">
<Head>
<Charset Meta = "UTF-8 ">
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ Head>
<Cuerpo>

<Div ng-controller = "myNoteCtrl ">

<H2> mis notas </ h2>

<P> <textarea ng-modelo = "mensaje" cols = "40" filas = "10"> </ textarea> </ p>

<P>
<Botón ng clic = "guardar ()"> Guardar </ botón>
<Botón ng clic = "clear ()"> Borrar </ botón>
</ P>

<P> Número de caracteres restantes: <span ng-bind = "left ()"> </ span> </ p>

</ Div>

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

</ Body>
</ Html>

Trate »

Los archivos de aplicación "myNoteApp.js":

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

Controlador de archivo "myNoteCtrl.js":

app.controller ( "myNoteCtrl", la función ($ ámbito de aplicación) {
$ Scope.message = "";
$ Scope.left = function () {return 100 - $ scope.message.length;};
$ Scope.clear = function () {$ scope.message = "";};
$ Scope.save = function () {alert ( "nota guardada");};
});

<Html> es la aplicación AngularJS: NG-app = contenedor "myNoteApp":

<Html ng-app = "myNoteApp ">

páginas <div> HTML en el controlador: NG-controller = "myNoteCtrl" alcance:

<Div ng-controller = "myNoteCtrl ">

Directiva ng-modelo se unen <textarea> al mensaje variable de controlador:

<Textarea ng-modelo = "mensaje " cols = "40" filas = "10"> </ textarea>

Dos eventos ng clic llama a la función controladora claro () y save ():

<Botón ng clic = "guardar ()"> Guardar </ botón>
<Botón ng clic = "clear ()"> Borrar </ botón>

comando ng-BIND para vincular la función de controlador de izquierda () para <span>, se utiliza para mostrar los caracteres restantes:

Número de caracteres restantes: <span ng -bind = "left ()"> </ span>

Aplicaciones archivos de biblioteca necesarios para llevar a cabo después de AngularJS de carga:

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

Arquitectura de la aplicación AngularJS

Ejemplos de lo anterior es una sola página AngularJS completas aplicaciones Web (aplicaciones web de una sola página, SPA).

<Html> contiene la aplicación AngularJS (ng-app =).

<Div> define el alcance de (ng-controller =) AngularJS controlador.

Las solicitudes pueden presentarse en una gran cantidad de controladores.

El archivo de aplicación (mi ... app.js) define la aplicación del código de modelo.

Uno o más archivos controladores (mi ... Ctrl.js) define el código del controlador.

Resumen - ¿Cómo funciona?

Directiva ng aplicación en el elemento raíz de la aplicación.

Para las aplicaciones de una sola página web (aplicación web de una sola página, SPA), aplicaciones elemento raíz por lo general <html>.

Uno o más directiva ng-controlador define el controlador de aplicación. Cada controlador tiene elementos de su propia definición del alcance HTML ::.

AngularJS iniciará automáticamente en caso de HTML DOMContentLoaded. Si encuentra directiva ng-app, AngularJS módulo de instrucción de carga, y ng-app como la raíz de la aplicación para ser compilado.

aplicación de la raíz puede ser una pequeña parte de toda la página o páginas, si se trata de una pequeña parte será más rápida compilación y ejecución.