Bases d'entrée angularjs

Auteur：Eve Cole Date de mise à jour：2025-06-14 16:00:03

angulaire

Toutes les bibliothèques utilisées, CDN utilisés:

La copie de code est la suivante:

La copie de code est la suivante:

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

<adal>

<Title> Angular </Title>

</ head>

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

</cript>

<div>

La chose la plus puissante sur Angular est la liaison de liaison des données

</div>

<div>

<cript>

app.Controller ("bf", fonction ($ scope) {

$ scope.data = "testdata";

// $ scope. $ applique ();

});

</cript>

</div>

</docy>

</html>

Grâce à Angular, affichez les données correspondantes du tableau ;.

La copie de code est la suivante:

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

<adal>

<Title> Angular </Title>

</ head>

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

</cript>

<div>

Grâce à Angular, affichez les données correspondantes du tableau;

</div>

<div>

<style>

.s {

Couleur: # F00;

}

li {

curseur: pointeur;

}

</ style>

<ul>

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

</li>

</ul>

<cript>

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

fonction arrcon ($ scope) {

$ scope.flag = 0;

$ scope.bered = fonction (i) {

$ scope.flag = i;

};

$ scope.lists = [

{nom: "hehe",

Âge: 10},

{

Nom: "xx",

Âge: 20

{

Nom: "Yy",

Âge: 2

{

Nom: "JJ",

Âge: 220

}

]]

};

</cript>

</div>

</docy>

</html>

Démo de filtre de données:

La copie de code est la suivante:

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

<adal>

<Title> Angular </Title>

</ head>

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

</cript>

<div>

Filtre de données;

</div>

<br>

</div>

<cript>

Filtre de fonction ($ scope) {

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

};

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

Fonction de retour (ipt) {

return ipt.replace (/ (/ w) / g, fonction (0 0, 1 $) {

retourner "" + 1, $ Toupperase ();

});

}

});

</cript>

</div>

</docy>

</html>

.Factory Factory, $ fournisseur, service, etc. sont les mêmes. Je ne pense pas que ce soit difficile. En fait, c'est juste pour voir un modèle de données ou une instance;:

La copie de code est la suivante:

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

<adal>

<Title> Angular </Title>

</ head>

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

</cript>

<div>

L'usine en angulaire équivaut à une méthode d'instance commune, qui peut être comprise comme une fonction qui peut être utilisée par plusieurs contrôleurs;

</div>

<cript>

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

retour {

"Notting": "JSON"

};

});

app.Controller ("Factory", fonction ($ scope, ff) {

$ scope.json = ff;

});

</cript>

</div>

<div>

directive angulaire;

</div>

<div>

<heh> vous contentez-vous? </héh>

<cript>

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

retour {

restreindre: «ae»,

Remplacer: vrai,

transclude: vrai,

modèle: '<div> <Button ng-transclude> </futton> </div>'

};

})

</cript>

</div>

</docy>

</html>

L'utilisation de la directive .NG-Switch (je veux vraiment ce modèle, qui est l'angulaire de nos clics communs pour masquer et afficher le plug-in de l'onglet en premier) ::

La copie de code est la suivante:

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

<adal>

<Title> Angular </Title>

</ head>

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

</cript>

<div>

Utilisation de Ng-Switch

</div>

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

</ul>

</div>

<div>

<Button ng-Click = "A = 1"> Tester </futton>

<Button ng-Click = "A = 2"> Tester </fut Button>

</div>

app.Controller ("SW", fonction ($ scope) {

});

</cript>

</div>

</docy>

</html>

ng-src et ng-href;

La copie de code est la suivante:

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

<adal>

<Title> Angular </Title>

</ head>

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

</cript>

<div>

Utilisation de NG-SRC et NG-HREF (si vous utilisez SRC ou HREF, le HTML sera chargé lors de l'initialisation, ce qui n'est certainement pas possible)

</div>

</a>

</div>

app.Controller ("srccon", fonction ($ scope) {

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

});

</cript>

</div>

</docy>

</html>

Comment faire fonctionner le style de page, modifiez simplement le modèle de données lié:

La copie de code est la suivante:

<div>

Angular fonctionne sur des styles; (JQ consiste à sélectionner manuellement les éléments pour fonctionner sur les styles d'éléments. Angular fournit une méthode supplémentaire pour attribuer les attributs de l'élément à une variable, il vous suffit de modifier cette variable)

</div>

<div>

hehe - o (^^) o wow;

</ hehe>

</div>

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

Fonction Compile () {

};

retour {

lien: fonction ($ scope, $ element) {

var obj = angular.element ($ element);

//obj.find n'est pas facile à utiliser;

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

var réduction = obj [0] .getElementsByClassName ("réduction") [0];

angular.element (add) .bind ("cliquez", fonction () {

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

appliquer();

})

angular.element (réduction) .bind ("cliquez", fonction () {

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

appliquer();

});

fonction applique () {

$ scope. $ applique ();

}

Retour compiler;

contrôleur: fonction ($ scope) {

$ scope.w = 200;

$ scope.h = 50;

// $ scope. $ applique ();

restreindre: «ae»,

Remplacer: vrai,

Portée: "= style ng",

transclude: vrai,

Modèle: '<div> <div ng-transclude> </div> <button> + </futton> <fontificateur> - </utton> </div>'

}

})

</cript>

</div>

Comment utiliser le modèle en angulaire? Cela doit être utilisé avec le routeur:

La copie de code est la suivante:

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

<adal>

<Title> Angular </Title>

</ head>

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

</cript>

<div>

Utilisation de modèles

</div>

<! --- Ce type doit être déclaré avec précision ->

</cript>

<! --- TPL est une valeur fixe, pas une variable, et la variable doit être définie dans la portée --->

<div>

<bouton ng-click = "chan ()"> modifier </ftones>

</div>

app.Controller ("ngtpl", fonction ($ scope) {

fonction hehe (str) {

str = _.shuffle (str);

Retour str.join ("")

};

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

$ scope.chan = fonction () {

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

};

});

</cript>

</div>

</docy>

</html>

Comment utiliser $ scope. $ Watch pour modifier le modèle de l'interface de liaison en temps réel:

La copie de code est la suivante:

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

<adal>

<Title> Angular </Title>

</ head>

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

</cript>

<div>

<span> mise à jour </span> mises à jour de données de notification angulaire de trois façons $ scope. $ digest (), $ scope. $ applat () et mises à jour via $ scope. $ watch écoute;

</div>

<div>

la valeur définie par $ scope. $ watch == >> {{wat}}

</div>

<br>

appliquer;

</ bouton>

</div>

app.Controller ("Appliquer", fonction ($ scope) {

$ scope.hehe = "lll________xxx";

$ scope.m0 = 1;

ss = $ scope;

$ scope.up = function () {

$ scope.hehe = $ scope.m0;

// Oui, mais une erreur a été signalée lorsque l'invite a été donnée. Qui sait pourquoi?

// $ scope. $ applique ();

$ scope. $ digest ();

};

// donne la variable $ scope.m0 à ne pas valide;

$ scope. $ watch ("m0", fonction (va) {

$ scope.wat = va;

})

});

</cript>

</div>

</docy>

</html>

La méthode de l'outil que vous vous définissez en angulaire

La copie de code est la suivante:

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

<adal>

<Title> Angular </Title>

</ head>

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

</cript>

<div>

Liste de la méthode des outils en angulaire

</div>

<div>

<ul>

<li role = "présentation"> <a href = "###"> angular.bind </a> </li>

<li role = "présentation"> <a href = "###"> angular.bootstrap </a> </li>

<li role = "présentation"> <a href = "###"> angular.copy </a> </li>

<li role = "présentation"> <a href = "###"> angular.element </a> </li>

<li role = "présentation"> <a href = "###"> angular.equals </a> </li>

<li role = "présentation"> <a href = "###"> angular.extend </a> </li>

<li role = "présentation"> <a href = "###"> angular.foreach </a> </li>

<li role = "présentation"> <a href = "###"> angular.fromjson </a> </li>

<li role = "présentation"> <a href = "###"> angular.identity </a> </li>

<li role = "présentation"> <a href = "###"> angular.injector </a> </li>

<li role = "présentation"> <a href = "###"> angular.isArray </a> </li>

<li role = "présentation"> <a href = "###"> angular.isdate </a> </li>

<li role = "présentation"> <a href = "###"> angular.isdefined </a> </li>

<li role = "présentation"> <a href = "###"> angular.iselement </a> </li>

<li role = "présentation"> <a href = "###"> angular.isfunction </a> </li>

<li rôle = "présentation"> <a href = "###"> angular.isnumber </a> </li>

<li role = "présentation"> <a href = "###"> angular.isobject </a> </li>

<li role = "présentation"> <a href = "###"> angular.issstring </a> </li>

<li role = "présentation"> <a href = "###"> angular.isundefined </a> </li>

<li role = "présentation"> <a href = "###"> angular.lowercase </a> </li>

<li role = "présentation"> <a href = "###"> angular.module </a> </li>

<li role = "présentation"> <a href = "###"> angular.noop </a> </li>

<li role = "présentation"> <a href = "###"> angular.reloadwithdebuginfo </a> </li>

<li role = "présentation"> <a href = "###"> angular.tojson </a> </li>

<li role = "présentation"> <a href = "###"> angular.uppercase </a> </li>

</ul>

<div>

Ces outils et méthodes sont similaires à d'autres bibliothèques;

Angular.Element est un petit JQ pour l'élément de sélection Anguarlite;

<br>

Angular.Module est une méthode d'éléments de module;

</div>

</docy>

</html>

L'utilisation de Ng-Transclude (il s'agit d'un cas officiel), le code est le suivant:

La copie de code est la suivante:

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

<adal>

<Title> Angular </Title>

</ head>

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

</cript>

<div>

Utilisation de Ng-Transclude (il s'agit d'un cas officiel):

</div>

<div>

<entrée ng-model = "title"> <br>

</div>

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

retour {

restreindre: «e»,

transclude: vrai,

Scope: {Title: '@'},

modèle: '<div style = "border: 1px solide noir;">' +

'<div style = "background-Color: gris"> {{title}} </div>' +

'<ng-transclude> </ ng-transclude>' +

'</div>'

};

})

.Controller ('ExampleController', ['$ scope', fonction ($ scope) {

$ scope.title = 'lorem ipsum';

$ scope.text = 'nequ porno quisquam est qui dolorem ipsum Quia Dolor ...';

}]);

</cript>

</div>

</docy>

</html>

Voici un exemple de vérification de la précision de la boîte aux lettres:

La copie de code est la suivante:

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

<adal>

<Title> Angular </Title>

</ head>

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

</cript>

<div>

ngpaste, ngmouseup, ngkeyup, ngmodeloptions, etc., reportez-vous à l'utilisation officielle, utilisez simplement l'API de vérification, (les besoins officiels fq;)

</div>

Si vous n'utilisez pas le composant NG-Message, l'invite d'erreur est la suivante;

<div>

<étiquette pour = "emailAddress"> Entrez votre adresse e-mail: </ label>

<! - ce truc est beaucoup trop complexe ->

Vous avez oublié d'entrer votre adresse e-mail ...

</div>

<div ng-if = "! UserForm.emailAddress. $ error.requured &&

userform.emailaddress. $ error.email ">

Vous n'avez pas saisi correctement votre adresse e-mail ...

</div>

</ form>

<br>

<a href = "https://yearofmoo.github.io/ngmessages/"> Demo écrit par des étrangers </a>

</div>

app.Controller ("FromVaild", fonction ($ scope) {

//$scope.myfield.$Error = {minLength: true, requis: false};

})

</cript>

</div>

</docy>

</html>

SetTimeout et SetInterval sont tous deux enveloppés par Angular et renvoient une instance de l'objet retardé:

La copie de code est la suivante:

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

<adal>

<Title> Angular </Title>

</ head>

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

</cript>

<div>

$ Timeout et $ interval, ces deux services;

</div>

<div>

<h4> setterval </h4>

<p>

$ interval (fn, retard, [count], [invokeapply]);

</p>

</a>

<h4> Timeout </h4>

<p>

$ timeout (fn, [retard], [invokeApply]);

</p>

</a>

</div>

<div>

</div>

commencer

</ bouton>

</div>

app.Controller ("st", fonction ($ scope, $ element, $ interval) {

var $ el = $ ($ element [0]). trouver (". Progress-bar");

console.log (arguments);

// Utilisez l'élément sélectionné par Angular.Element pour trouver quelque chose sans trouver;

$ scope.prog = fonction () {

var df = $ interval (function () {

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

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

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

}, 100);

Console.log (DF)

//console.log(aa = $ interval)

};

});

</cript>

</div>

</docy>

</html>