Conceptos básicos de entrada de AngularJS

Autor：Eve Cole Fecha de actualización：2025-06-14 16:00:03

angular

Todas las bibliotecas utilizadas, CDN utilizadas:

La copia del código es la siguiente:

Instancia de enlace de datos de .Angular, esta es la más básica, todas las ramas y hojas de inicio angular desde aquí:

La copia del código es la siguiente:

<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">

<title> Angular </title>

</ablo>

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

</script>

<div>

Lo más poderoso de Angular es la unión de enlace de datos

</div>

<div>

app.controller ("bf", function ($ scope) {

$ scope.data = "testData";

// $ alcance. $ Aplicar ();

});

</script>

</div>

</body>

</html>

A través de Angular, muestre los datos correspondientes de la matriz;.

La copia del código es la siguiente:

<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">

<title> Angular </title>

</ablo>

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

</script>

<div>

A través de Angular, muestre los datos correspondientes de la matriz;

</div>

<div>

.s{

Color:#F00;

}

li {

cursor: puntero;

}

</style>

<ul>

{{i.name}} ---- {{i.age}}

</li>

</ul>

//angular.module("arr-app ", []);

función arrcon ($ alcope) {

$ scope.flag = 0;

$ scope.bered = function (i) {

$ scope.flag = i;

};

$ scope.lists = [

{Nombre: "jeje",

Edad: 10},

{

Nombre: "xx",

Edad: 20

{

Nombre: "YY",

Edad: 2

{

Nombre: "JJ",

Edad: 220

}

]

};

</script>

</div>

</body>

</html>

Demostración del filtro de datos:

La copia del código es la siguiente:

<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">

<title> Angular </title>

</ablo>

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

</script>

<div>

Filtro de datos;

</div>

<br>

</div>

Filtro de funciones ($ alcance) {

$ scope.sourcode = "jeje lala dudu oo zz";

};

app.filter ("up", function () {

Función de retorno (IPT) {

devolver ipt.replace (/(/w)/g, función ($ 0, $ 1) {

devolver ""+$ 1.ToUpperCase ();

});

}

});

</script>

</div>

</body>

</html>

La fábrica de fábrica, $ proveedor, servicio, etc. son todos iguales. No sientas que es difícil. De hecho, es solo para ver un modelo o instancia de datos;:

La copia del código es la siguiente:

<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">

<title> Angular </title>

</ablo>

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

</script>

<div>

La fábrica en Angular es equivalente a un método de instancia común, que puede entenderse como una función que los controladores múltiples pueden usar;

</div>

app.factory ("ff", function () {

devolver {

"Notando": "Json"

};

});

app.controller ("fábrica", function ($ scope, ff) {

$ scope.json = ff;

});

</script>

</div>

<div>

directiva angular;

</div>

<div>

<jeh> ¿estás contento con? </jeh>

app.directive ("heh", function () {

devolver {

restringir: "ae",

Reemplazar: Verdadero,

TRANSCLUDE: VERDADERO,

plantilla: '<div> <botón ng-transclude> </boton> </div>'

};

})

</script>

</div>

</body>

</html>

El uso de la directiva .ng-switch (realmente quiero esta plantilla, que es el angular de nuestros clics comunes para ocultar y mostrar el complemento de pestaña primero) ::

La copia del código es la siguiente:

<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">

<title> Angular </title>

</ablo>

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

</script>

<div>

Uso de interruptor ng

</div>

<li ng-switch-default> otros </li>

</ul>

</div>

<div>

<botón ng-click = "a = 1"> test </boton>

<botón ng-click = "a = 2"> test </boton>

<botón ng-click = "a = 3"> test </boton>

</div>

app.controller ("sw", function ($ scope) {

});

</script>

</div>

</body>

</html>

ng-src y ng-href;

La copia del código es la siguiente:

<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">

<title> Angular </title>

</ablo>

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

</script>

<div>

Uso de NG-SRC y NG-HREF (si usa SRC o HREF, el HTML se cargará al inicializarlo, lo que definitivamente no es posible)

</div>

</a>

</div>

app.controller ("srccon", function ($ scope) {

$ scope.logo = "http://www.mainbo.com/tempplets/images/logo.gif";

});

</script>

</div>

</body>

</html>

Cómo operar el estilo de página, simplemente cambie el modelo de datos límite directamente:

La copia del código es la siguiente:

<div>

Angular opera en estilos; (JQ es seleccionar manualmente elementos para operar en estilos de elementos. Angular proporciona un método más para asignar los atributos del elemento a una variable, solo necesita cambiar esta variable)

</div>

<div>

jeje-o (^^) Oh wow;

</jeje>

</div>

app.directive ("jeje", function () {

function compile () {

};

devolver {

Enlace: function ($ scope, $ element) {

var obj = angular.element ($ elemento);

//obj.find no es fácil de usar;

var add = obj [0] .getElementsByClassName ("add") [0];

var reduce = obj [0] .getElementsByClassName ("reducir") [0];

angular.element (add) .bind ("hacer clic", function () {

$ scope.h = $ scope.h+10;

aplicar();

})

angular.element (reducir) .bind ("hacer clic", function () {

$ scope.h = $ scope.h-10;

aplicar();

});

función aplicar () {

$ alcance. $ Aplicar ();

}

Compilar de regreso;

controlador: function ($ alcope) {

$ alcance.w = 200;

$ alcance.h = 50;

// $ alcance. $ Aplicar ();

restringir: 'ae',

Reemplazar: Verdadero,

Alcance: "= estilo ng",

TRANSCLUDE: VERDADERO,

Template: '<iv> <div ng-transclude> </div> <boton>+</boton> <botton>-</boton> </div>'

}

})

</script>

</div>

¿Cómo usar la plantilla en angular? Esto debe usarse con el enrutador:

La copia del código es la siguiente:

<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">

<title> Angular </title>

</ablo>

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

</script>

<div>

Usando plantillas

</div>

<! --- Este tipo debe declararse con precisión->

</script>

<! --- tpl es un valor fijo, no una variable, y la variable debe definirse en el alcance --->

<div>

<botón ng-click = "chan ()"> cambiar </boton>

</div>

app.controller ("ngtpl", function ($ scope) {

función jeje (str) {

str = _.shuffle (str);

regresar str.Join ("")

};

$ scope.ver = "var-ver-heehe";

$ scope.chan = functer () {

$ scope.ver = jeje ($ scope.ver);

};

});

</script>

</div>

</body>

</html>

Cómo usar $ alcance. $ Reloj para cambiar la plantilla de la interfaz de enlace en tiempo real:

La copia del código es la siguiente:

<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">

<title> Angular </title>

</ablo>

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

</script>

<div>

<span> actualizaciones de datos de notificación angular de notificación de tres maneras $ scope. $ digest (), $ scope. $ apply () y actualizaciones a través de $ alcance. $ ver escucha;

</div>

<div>

El valor establecido por $ scope. $ watch == >> {{wat}}

</div>

<br>

<botón ng-click = "up ()">

aplicar;

</botón>

</div>

app.controller ("aplicar", function ($ alcope) {

$ scope.hehe = "lll________xxx";

$ scope.m0 = 1;

SS = $ alcance;

$ scope.up = function () {

$ scope.hehe = $ scope.m0;

// Sí, pero se informó un error cuando se dio la solicitud. ¿Quién sabe por qué?

// $ alcance. $ Aplicar ();

$ alcance. $ digest ();

};

// dar la variable $ scope.m0 para ser inválido;

$ alcance. $ watch ("m0", function (VA) {

$ scope.wat = VA;

})

});

</script>

</div>

</body>

</html>

El método de herramienta que se defina en angular

La copia del código es la siguiente:

<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">

<title> Angular </title>

</ablo>

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

</script>

<div>

Lista de método de herramienta en Angular

</div>

<div>

<ul>

<li role = "presentación"> <a href = "###"> angular.bind </a> </li>

<li role = "presentación"> <a href = "###"> angular.bootstrap </a> </li>

<li role = "presentación"> <a href = "###"> angular.copy </a> </li>

<li role = "presentación"> <a href = "###"> angular.element </a> </li>

<li role = "presentación"> <a href = "###"> angular.equals </a> </li>

<li role = "presentación"> <a href = "###"> angular.extend </a> </li>

<li role = "presentación"> <a href = "###"> Angular.ForEach </a> </li>

<li role = "presentación"> <a href = "###"> angular.fromjson </a> </li>

<li role = "presentación"> <a href = "###"> angular.identity </a> </li>

<li role = "presentación"> <a href = "###"> angular.injector </a> </li>

<li role = "presentación"> <a href = "###"> Angular.isArray </a> </li>

<li role = "presentación"> <a href = "###"> angular.isdate </a> </li>

<li role = "presentación"> <a href = "###"> angular.isdefined </a> </li>

<li role = "presentación"> <a href = "###"> Angular.iselement </a> </li>

<li role = "presentación"> <a href = "###"> Angular.Isfunction </a> </li>

<li role = "presentación"> <a href = "###"> angular.isnumber </a> </li>

<li role = "presentación"> <a href = "###"> angular.isobject </a> </li>

<li role = "presentación"> <a href = "###"> angular.isstring </a> </li>

<li role = "presentación"> <a href = "###"> angular.isundefined </a> </li>

<li role = "presentación"> <a href = "###"> angular.lowercase </a> </li>

<li role = "presentación"> <a href = "###"> angular.module </a> </li>

<li role = "presentación"> <a href = "###"> angular.noop </a> </li>

<li role = "presentación"> <a href = "###"> angular.reloadwithdebuginfo </a> </li>

<li role = "presentación"> <a href = "###"> Angular.tojson </a> </li>

<li role = "presentación"> <a href = "###"> angular.uppercase </a> </li>

</ul>

<div>

Estas herramientas y métodos son similares a otras bibliotecas;

Angular.Element es un pequeño JQ para el elemento de selección de Anguarlita;

<br>

Angular.module es un método de elementos del módulo;

</div>

</body>

</html>

El uso de Ng-Transclude (este es un caso oficial), el código es el siguiente:

La copia del código es la siguiente:

<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">

<title> Angular </title>

</ablo>

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

</script>

<div>

Uso de Ng-Transclude (este es un caso oficial):

</div>

<div>

</div>

app.directive ('panel', function () {

devolver {

restringir: 'e',

TRANSCLUDE: VERDADERO,

Alcance: {Título: '@'},

plantilla: '<div style = "border: 1px sólido negro;">' +

'<div style = "Background-Color: Gray"> {{Title}} </div>' +

'<Ng Transclude> </ng-Transclude>' +

'</div>'

};

})

.Controller ('Ejemplecontroller', ['$ scope', function ($ scope) {

$ scope.title = 'lorem ipsum';

$ scope.text = 'Nequ Porno quisquam est qui dolorem ipsum quia dolor ...';

}]);

</script>

</div>

</body>

</html>

Aquí hay un ejemplo de verificación de la precisión del buzón:

La copia del código es la siguiente:

<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">

<title> Angular </title>

</ablo>

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

</script>

<div>

ngpaste, ngmouseup, ngkeyup, ngmodeloptions, etc., consulte el uso oficial, solo use la API de verificación (las necesidades oficiales FQ;)

</div>

Si no usa el componente NG-Message, el mensaje de error es el siguiente;

<div>

<etiqueta for = "emailAddress"> Ingrese su dirección de correo electrónico: </selebel>

<!-Estas cosas son demasiado complejas->

Olvidó ingresar su dirección de correo electrónico ...

</div>

<div ng-if = "! UserForm.EMailaddress. $ Error.required &&

userForm.EMAILAddress. $ Error.email ">

No ingresó su dirección de correo electrónico correctamente ...

</div>

</form>

<br>

<a href = "https://yearofmoo.github.io/ngmessages/"> Demo escrito por extranjeros </a>

</div>

app.controller ("fromVaild", function ($ scope) {

//$cope.myfield.$error = {minLength: true, requerido: falso};

})

</script>

</div>

</body>

</html>

SetTimeOut y SetInterval están envueltos por Angular y devuelven una instancia del objeto retrasado:

La copia del código es la siguiente:

<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">

<title> Angular </title>

</ablo>

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

</script>

<div>

$ Tiempo de espera y $ Interval, estos dos servicios;

</div>

<div>

<h4> setInterval </h4>

<p>

$ intervalo (fn, demora, [cuenta], [invokeApply]);

</p>

</a>

<h4> Tiempo de espera </h4>

<p>

$ TIMEOUT (FN, [Delebre], [InvokeApply]);

</p>

</a>

</div>

<div>

</div>

<botón ng-click = "prog ()">

comenzar

</botón>

</div>

app.controller ("st", function ($ scope, $ element, $ interval) {

var $ el = $ ($ elemento [0]). Find (". Progress-bar");

console.log (argumentos);

// Use el elemento seleccionado por Angular.Element para encontrar algo sin encontrar;

$ scope.prog = function () {

var df = $ interval (function () {

var val = parseint ($ el.html ())+4;

if (val> = 104) $ interval.cancel (df);

$ el.html (val+"%") .Width (val+"%");

}, 100);

console.log (DF)

//console.log(aa = $ interval)

};

});

</script>

</div>

</body>

</html>