Latest web development tutorials

Introducción AngularJS

AngularJS es un marco de JavaScript. Se puede añadir a las páginas HTML a través de la etiqueta <script>.

AngularJS por la Directiva extiende el HTML, ya través de las expresión de datos se unen a HTML.


AngularJS es un marco de JavaScript

AngularJS es un marco de JavaScript. Es una biblioteca escrito en JavaScript.

AngularJS archivo JavaScript es una forma de liberación puede ser añadido por la etiqueta de script a la página:

<Script src = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </ script>

nota Proponemos secuencia de comandos en la parte inferior del elemento <body>.
Esto aumentará la velocidad de carga de las páginas, porque HTML no está sujeta a cargar script para cargar.

Cada versión angularjs descarga: https://github.com/angular/angular.js/releases


AngularJS extiende HTML

AngularJS por NG-directivas extendieron HTML.

Directiva ng aplicación define una aplicación AngularJS.

ng-modelo de orden de los valores de los elementos (tales como el valor del campo de entrada) unido a la aplicación.

ng-comando BIND para vincular datos de la aplicación a la vista HTML.

AngularJS ejemplos

<! DOCTYPE html>
<Html>
<Head>
<Charset Meta = "UTF-8 ">
<Script src = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ Head>
<Cuerpo>

<Div ng-app = "" >
<P> Nombre: <input type = "text" ng-modelo = "nombre"> </ p>
<H1> Hola {{nombre} } </ h1>
</ Div>

</ Body>
</ Html>

Trate »

Ejemplos que ilustran:

Cuando se carga la página, AngularJS automáticamente.

Directiva ng-app dice AngularJS, <div> es la aplicación AngularJS del "propietario".

Directiva ng-modelo se une el valor del campo de entrada para el nombre de variable de aplicación.

ng-comando se unen a un nombre de variable de aplicación está vinculada a un párrafo innerHTML.

nota Si se quita la directiva ng-app, HTML se muestra directamente a la expresión, no para evaluar la expresión de los resultados.

¿Cuál es AngularJS?

AngularJS hace que el desarrollo de las modernas aplicaciones de una sola página (ZEPA: página de aplicaciones individuales) más fácil.

  • AngularJS datos de la aplicación se unen a elementos HTML.
  • AngularJS elementos HTML se pueden clonar y repiten.
  • AngularJS pueden ocultar y mostrar los elementos HTML.
  • AngularJS pueden agregar código al elemento HTML "atrás".
  • AngularJS apoyan la validación de entrada.

AngularJS directivas

Como se puede ver, AngularJS instrucción se prefija atributos HTML ng.

comando ng-init para inicializar las variables de aplicación AngularJS.

AngularJS ejemplos

<div ng-app="" ng-init="firstName='John'">

<p>姓名为 <span ng-bind="firstName"></span></p>

</div>

Trate »

nota HTML5 le permite extender el (hecho en casa) propiedad a comienzos de datos.
AngularJS propiedad comienzo ng- a, pero se puede utilizar datos ng- para hacer páginas web para HTML5 válido.

Con HTML5 válido:

AngularJS ejemplos

<div data-ng-app="" data-ng-init="firstName='John'">

<p>姓名为 <span data-ng-bind="firstName"></span></p>

</div>

Trate »


AngularJS expresión

AngularJS expresiones escritas entre llaves: {{}} expresión.

AngularJS expresión para enlazar los datos a HTML, que comando ng-bind tiene el mismo propósito.

AngularJS expresión en los datos de posición de escritura "salida".

AngularJS expresiones como expresiones de JavaScript: pueden contener texto, operadores y variables.

Ejemplos 5 + 5 {{}} o {{firstName + "" + lastName}}

AngularJS ejemplos

<! DOCTYPE html>
<Html>
<Head>
<Charset Meta = "UTF-8">
<Script src = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ Head>
<Cuerpo>

<Div ng-app = "">
<P> Mi primera expresión: {{5 + 5}} </ p>
</ Div>

</ Body>
</ Html>

Trate »

Aplicaciones AngularJS

AngularJS módulo (módulo) define aplicaciones AngularJS.

AngularJS controladores (controlador) para el control de aplicaciones AngularJS.

Directiva ng aplicación define la aplicación, ng-controlador define el controlador.

AngularJS ejemplos

<Div ng-app = "myApp " ng-controller = "myCtrl">

Nombre: <input type = "text" ng-modelo = "Nombre"> <br>
Apellido: <input type = "text" ng-modelo = "Apellido"> <br>
<br>
Nombre: {{firstName + "" + lastName}}

</ Div>

<Script>
var app = angular.module ( 'myApp' , []);
app.controller ( 'myCtrl', function ( $ ámbito de aplicación) {
$ Scope.firstName = "Juan";
$ Scope.lastName = "Doe";
});
</ Script>

Trate »

AngularJS definición módulo de aplicación:

AngularJS módulo

var app = angular.module ( 'myApp', []);

AngularJS aplicaciones de controlador:

AngularJS Controladores

app.controller ( 'myCtrl', function ($ ámbito de aplicación) {
$ Scope.firstName = "Juan";
$ Scope.lastName = "Doe";
});

En el siguiente tutorial usted aprenderá más módulos de conocimiento y aplicación.