Red de conocimiento informático - Material del sitio web - Cómo utilizar angularjs NG

Cómo utilizar angularjs NG

Directiva, según tengo entendido, AngularJS utiliza una forma de operar elementos HTML.

Dado que el primer paso para aprender AngularJS es escribir la directiva incorporada ng-app para indicar que este nodo es el nodo raíz de la aplicación, hace tiempo que las directivas se han vuelto desconocidas.

Instrucciones integradas

Todas las instrucciones integradas tienen el prefijo ng. Para evitar conflictos, no se recomienda que las instrucciones personalizadas utilicen este prefijo.

Comience con algunos comandos integrados comunes. Comencemos enumerando algunas directivas integradas clave y hablemos brevemente sobre el alcance.

[ng-model]

Vincular controles de formulario a propiedades en el alcance actual parece inapropiado.

Pero no importa, es fácil de usar, por ejemplo:


{{someModel.someProperty}}

[ng-init]

Esta directiva inicializará el alcance interno cuando se llame.

Esta directiva suele verse en aplicaciones más pequeñas, como la entrega de demostraciones u otro contenido... También se puede utilizar como opción predeterminada para el enlace de datos bidireccional.

Soy un {{job}}

[ng- app]

AngularJS es una parte muy importante de cualquier aplicación.

El elemento que declara ng-app se convertirá en el punto de partida de $rootScope, que es la raíz de la cadena de alcance y generalmente se declara en .

Esto significa que los ámbitos por debajo del ámbito raíz pueden acceder a él.

Sin embargo, no recomendamos el uso excesivo de $rootScope para evitar variables globales volando, lo cual es ineficiente y difícil de administrar.

Aquí tienes un ejemplo:

{{ someProperty } }

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

.run(function($rootScope) {

$rootScope.someProperty = 'hola computadora';

}); >

ng-controller

Usamos esta directiva para colocar un controlador en un elemento DOM.

ng-controller debe tomar una expresión como parámetro y heredar métodos, propiedades, etc. desde el objeto principal $scope hasta $scope, incluido $rootScope.

El siguiente es solo un ejemplo simple. Los antepasados ​​no pueden acceder al alcance de los descendientes.

{{ ancestroName }}

{{ childName }}

{{ ancestroName }}

{{ childName }}

ng-form

Al principio, no entendía por qué había una directiva de formulario, la etiqueta

me parecía suficiente.

Tomando la validación de formularios como ejemplo, hay este código en el artículo anterior:

Es decir, si el estado del formulario es $inválido, el botón de enviar estará deshabilitado.

Si el escenario es un poco más complejo, por ejemplo, el formulario principal tiene varios formularios secundarios, si 3 de los formularios secundarios pasan la validación, se puede enviar el formulario principal.

Sin embargo, no es anidable.

Considerando esta situación, utilizamos la directiva ng-form para resolver este problema.

Ejemplo:

Nombre :>

Número de identificación:


Nombre del tutor: >

Número de identificación del tutor:

enviar todo

ng-disabled

En AngularJS, propiedades como esta se pueden habilitar usando expresiones verdadero/falso, que tendrán efecto mientras existan.

Desactivar campos de entrada del formulario.

ng-readonly

Usar expresiones Valor de retorno de la fórmula verdadero/falso Establezca el campo de entrada del formulario en solo lectura.

Obtenga un ejemplo que pasa a ser de solo lectura después de 3 segundos.

.run(function($rootScope,$timeout ) ){

$rootScope.stopTheWorld=false;

$timeout(function(){

$rootScope.stopTheWorld = verdadero;

},3000)

})

ng-checked

Esto se usa para , por ejemplo.

ng-seleccionado

Para dentro de , ejemplo:

; /p>

Soy ingeniero full stack

ng-show/ng-hide

Muestra/oculta elementos HTML basados ​​en expresiones. Tenga en cuenta que están ocultos, no eliminados del DOM:

1+1 == 2

< div ng-hide="1+1 == 3">

No puedes verme.

ng-change

No es HTML onXXX ni nada, sino ng-XXX.

Se usa con ng-model y ng-change, por ejemplo:

{{ calc.result }}

O, por ejemplo, ng-options

{{}}

En realidad, esta es una directiva que puede parecer similar a ng-bind, pero puede ser un poco más lenta al renderizar la página.

Además, el rendimiento de {{}} es muy inferior al de ng-bind, pero es más conveniente de usar.

ng-bind

El comportamiento de ng-bind es básicamente el mismo que {{}}, excepto que podemos usar esta directiva para evitar FOUC (Flash Of Unrendered Content). ), es decir, parpadea debido a que no se procesa.

ng-cloak

ng-cloak también puede resolvernos el problema de FOUC. ng-cloak ocultará los elementos internos hasta que la ruta llame a la página correspondiente.

ng-if

Si la expresión en ng-if es falsa, todo el elemento correspondiente se eliminará del DOM en lugar de ocultarse, pero al ver el elemento, podrá Ver que la expresión ha sido comentada.

Si el escenario está oculto, puedes usar ng-hide.

Este elemento no se puede inspeccionar

Revisable

ng-switch

No tiene mucho sentido cuando se usa solo. Aquí hay un ejemplo:

0

<p ng-switch-when="1">1

2

ng-repetir

es recorrer la colección y generar una instancia de plantilla para cada elemento. Cada instancia puede usar algunos atributos especiales para establecer el alcance, como se muestra a continuación:

. $índice

$ primero

$último

$medio

par

impar

Artículos populares