AngularJS -Eingangsgrundlagen

Autor：Eve Cole Aktualisierungszeit：2025-06-14 16:00:03

eckig

Alle verwendeten Bibliotheken, verwendete CDNs:

Die Codekopie lautet wie folgt:

Die Datenbindungsinstanz von. Dies ist die grundlegendste, alle Zweige und Blätter des Winkelstarts von hier:.

Die Codekopie lautet wie folgt:

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

<kopf>

<title> Angular </title>

</head>

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

</script>

<div>

Das Mächtigste an Angular ist die Datenbindungsbindung

</div>

<div>

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

$ scope.data = "testData";

// $ scope. $ bewerben ();

});

</script>

</div>

</body>

</html>

Zeigen Sie durch Angular die entsprechenden Daten des Arrays an.

Die Codekopie lautet wie folgt:

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

<kopf>

<title> Angular </title>

</head>

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

</script>

<div>

Zeigen Sie durch Angular die entsprechenden Daten des Arrays an.

</div>

<div>

.S{

Farbe:#f00;

}

li {

Cursor: Zeiger;

}

</style>

<ul>

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

</li>

</ul>

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

Funktion arrcon ($ scope) {

$ scope.flag = 0;

$ scope.bered = function (i) {

$ scope.flag = i;

};

$ scope.lists = [

{Name: "hehe",

Alter: 10},

{

Name: "xx",

Alter: 20

{

Name: "yy",

Alter: 2

{

Name: "JJ",

Alter: 220

}

]

};

</script>

</div>

</body>

</html>

Demo des Datenfilters:

Die Codekopie lautet wie folgt:

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

<kopf>

<title> Angular </title>

</head>

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

</script>

<div>

Datenfilter;

</div>

<br>

</div>

Funktionsfilter ($ Scope) {

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

};

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

Rückgabefunktion (ipt) {

RECHTEN SIE IPT.REPLACE (/(/W)/G, Funktion ($ 0, $ 1) {

return ""+$ 1.Touppercase ();

});

}

});

</script>

</div>

</body>

</html>

.Faktorische Fabrik, $ Provider, Service usw. sind alle gleich. Fühle nicht, dass es schwierig ist. In der Tat ist nur ein Datenmodell oder eine Instanz zu sehen ;:

Die Codekopie lautet wie folgt:

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

<kopf>

<title> Angular </title>

</head>

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

</script>

<div>

Die Fabrik in Winkel entspricht einer gemeinsamen Instanzmethode, die als eine Funktion verstanden werden kann, die von mehreren Controllern verwendet werden kann.

</div>

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

zurückkehren {

"Notieren": "JSON"

};

});

app.controller ("factory", function ($ scope, ff) {

$ scope.json = ff;

});

</script>

</div>

<div>

Winkelrichtlinie;

</div>

<div>

<heh> zufrieden du dich zufrieden dafür? </heh>

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

zurückkehren {

einschränken: "ae",

ersetzen: wahr,

transklude: wahr,

Vorlage: '<Div> <button ng-transclude> </button> </div>' '

};

})

</script>

</div>

</body>

</html>

Die Verwendung der .ng-Switch-Direktive (ich möchte wirklich diese Vorlage, die der Winkel unserer gemeinsamen Klicks ist, um das Registerkarten-Plug-In zuerst auszublenden und anzuzeigen) ::

Die Codekopie lautet wie folgt:

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

<kopf>

<title> Angular </title>

</head>

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

</script>

<div>

Verwendung von NG-Switch

</div>

<li ng-switch-Default> Andere </li>

</ul>

</div>

<div>

</div>

App.Controller ("SW", Funktion ($ scope) {

});

</script>

</div>

</body>

</html>

ng-src und ng-href;

Die Codekopie lautet wie folgt:

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

<kopf>

<title> Angular </title>

</head>

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

</script>

<div>

Verwendung von NG-SRC und NG-HREF (wenn Sie SRC oder HREF verwenden, wird das HTML beim Initialisieren geladen, was definitiv nicht möglich ist)

</div>

</a>

</div>

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

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

});

</script>

</div>

</body>

</html>

So bedienen Sie den Seitenstil, ändern Sie einfach das gebundene Datenmodell direkt:

Die Codekopie lautet wie folgt:

<div>

Angular arbeitet auf Stilen; (JQ soll Elemente manuell auswählen, um auf Elementstilen zu arbeiten. Angular bietet eine mehr Methode, um die Attribute des Elements einer Variablen zuzuweisen. Sie müssen diese Variable nur ändern.)

</div>

<div>

hehe-o (^^) o wow;

</hehe>

</div>

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

Funktion compile () {

};

zurückkehren {

Link: Funktion ($ scope, $ element) {

var obj = angular.element ($ element);

//obj.find ist nicht einfach zu bedienen;

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

var recly = obj [0].

Angular.element (add) .bind ("click", function () {

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

anwenden();

})

Angular.Element (reduzieren) .bind ("klicken", function () {

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

anwenden();

});

function apply () {

$ scope. $ bewerben ();

}

Return Compile;

Controller: Funktion ($ Scope) {

$ scope.w = 200;

$ scope.h = 50;

// $ scope. $ bewerben ();

einschränken: 'ae',

ersetzen: wahr,

Umfang: "= Ng-Stil",

transklude: wahr,

Vorlage: '<Div> <div ng-transclude> </div> <taste>+</button> <taste

}

})

</script>

</div>

Wie benutze ich die Vorlage in Angular? Dies muss mit dem Router verwendet werden:

Die Codekopie lautet wie folgt:

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

<kopf>

<title> Angular </title>

</head>

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

</script>

<div>

Vorlagen verwenden

</div>

<! --- Dieser Typ muss genau deklariert werden->

</script>

<! --- TPL ist ein fester Wert, keine Variable, und die Variable sollte in Umfang definiert werden --->

<div>

<button ng-klick = "chan ()"> ändern </button>

</div>

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

Funktion hehe (str) {

STR = _.Shuffle (str);

return str.join ("")

};

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

$ scope.chan = function () {

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

};

});

</script>

</div>

</body>

</html>

So verwenden Sie $ scope. $ Watch, um die Vorlage der Bindungsschnittstelle in Echtzeit zu ändern:

Die Codekopie lautet wie folgt:

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

<kopf>

<title> Angular </title>

</head>

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

</script>

<div>

<span> Update </span> Angular -Benachrichtigungsdaten -Daten Updates auf drei Arten $ scope. $ digest (), $ scope.

</div>

<div>

Der Wert von $ scope. $ watch == >> {{WAT}}

</div>

<br>

anwenden;

</button>

</div>

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

$ scope.ehehe = "lll________xxx";

$ scope.m0 = 1;

SS = $ Scope;

$ scope.up = function () {

$ scope.heehe = $ scope.m0;

// Ja, aber ein Fehler wurde gemeldet, als die Eingabeaufforderung angegeben wurde. Wer weiß warum?

// $ scope. $ bewerben ();

$ scope. $ digest ();

};

// Geben Sie die Variable $ scope.m0 an, um ungültig zu sein;

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

$ scope.wat = va;

})

});

</script>

</div>

</body>

</html>

Die Werkzeugmethode, die Sie sich in Angular definieren

Die Codekopie lautet wie folgt:

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

<kopf>

<title> Angular </title>

</head>

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

</script>

<div>

Liste der Werkzeugmethode in Angular

</div>

<div>

<ul>

<li rollen = "Präsentation"> <a href = "###"> angular.bind </a> </li>

<li rollen = "Präsentation"> <a href = "###"> angular.bootstrap </a> </li>

<li rollen = "Präsentation"> <a href = "###"> angular.copy </a> </li>

<li rollen = "Präsentation"> <a href = "###"> angular.element </a> </li>

<li rollen = "Präsentation"> <a href = "###"> angular.equals </a> </li>

<li rollen = "Präsentation"> <a href = "###"> angular.extend </a> </li>

<li rollen = "Präsentation"> <a href = "###"> Angular.foreach </a> </li>

<li rollen = "Präsentation"> <a href = "###"> angular.fromjson </a> </li>

<li rollen = "Präsentation"> <a href = "###"> Angular.identity </a> </li>

<li rollen = "Präsentation"> <a href = "###"> angular.injector </a> </li>

<li rollen = "Präsentation"> <a href = "###"> angular.isArray </a> </li>

<li rollen = "Präsentation"> <a href = "###"> angular.isdate </a> </li>

<li rollen = "Präsentation"> <a href = "###"> angular.isdefined </a> </li>

<li rollen = "Präsentation"> <a href = "###"> angular.isSelement </a> </li>

<li rollen = "Präsentation"> <a href = "###"> angular.isisisiscunction </a> </li>

<li rollen = "Präsentation"> <a href = "###"> angular.isNumber </a> </li>

<li rollen = "Präsentation"> <a href = "###"> angular.isObject </a> </li>

<li rollen = "Präsentation"> <a href = "###"> angular.isstring </a> </li>

<li rollen = "Präsentation"> <a href = "###"> angular.isundefined </a> </li>

<li rollen = "Präsentation"> <a href = "###"> angular.lowerCase </a> </li>

<li rollen = "Präsentation"> <a href = "###"> angular.module </a> </li>

<li rollen = "Präsentation"> <a href = "###"> angular.noop </a> </li>

<li rollen = "Präsentation"> <a href = "###"> angular.reloadwithDebuginfo </a> </li>

<li rollen = "Präsentation"> <a href = "###"> angular.tojson </a> </li>

<li rollen = "Präsentation"> <a href = "###"> Angular.uppercase </a> </li>

</ul>

<div>

Diese Tools und Methoden ähneln anderen Bibliotheken.

Angular.element ist ein kleiner JQ für das Anguarlit -Selektionselement;

<br>

Angular.module ist eine Methode der Modulelemente;

</div>

</body>

</html>

Die Verwendung von NG-Transclude (dies ist ein offizieller Fall) ist der Code wie folgt:

Die Codekopie lautet wie folgt:

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

<kopf>

<title> Angular </title>

</head>

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

</script>

<div>

Verwendung von NG-Transclude (dies ist ein offizieller Fall):

</div>

<div>

</div>

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

zurückkehren {

einschränken: 'e',

transklude: wahr,

Scope: {title: '@'},

Vorlage: '<div style = "border: 1px fest schwarz;">' +

'<div style = "background-color: grau"> {{title}} </div>' +

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

'</div>' '

};

})

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

$ scope.title = 'lorem ipsum';

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

}]);

</script>

</div>

</body>

</html>

Hier ist ein Beispiel für die Überprüfung der Genauigkeit der Mailbox:

Die Codekopie lautet wie folgt:

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

<kopf>

<title> Angular </title>

</head>

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

</script>

<div>

Ngpaste, NgmouseUp, NgKeyUp, NgModeloptions usw. beziehen sich auf die offizielle Verwendung, verwenden Sie einfach die Check -API (der offizielle Bedarf FQ;)

</div>

Wenn Sie die NG-Message-Komponente nicht verwenden, lautet die Fehleraufforderung wie folgt.

<div>

<Label für = "E -MailAddress"> Geben Sie Ihre E -Mail -Adresse ein: </label>

<!-Dieses Zeug ist viel zu komplex->

<div ng-if = "userform.emailaddress

Sie haben vergessen, Ihre E -Mail -Adresse einzugeben ...

</div>

<div ng-if = "! UserForm.EmailAddress. $ error.Required &&

userform.emailaddress. $ error.email ">

Sie haben Ihre E -Mail -Adresse nicht richtig eingegeben ...

</div>

</form>

<br>

<a href = "https://yearofmoo.github.io/ngmessages/"> Demo, geschrieben von Ausländern </a>

</div>

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

//$Scope.myfield.$Error = {minLength: true, erforderlich: false};

})

</script>

</div>

</body>

</html>

SetTimeout und SetInterval werden beide von Angular verpackt und geben eine Instanz des verzögerten Objekts zurück:

Die Codekopie lautet wie folgt:

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

<kopf>

<title> Angular </title>

</head>

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

</script>

<div>

$ timeout und $ intervall, diese beiden Dienste;

</div>

<div>

<h4> setInterval </h4>

<p>

$ intervall (fn, delay, [count], [invoceapply]);

</p>

</a>

<h4> Timeout </h4>

<p>

$ timeout (fn, [delace], [invoceApply]);

</p>

</a>

</div>

<div>

</div>

Start

</button>

</div>

app.controller ("ST", Funktion ($ scope, $ element, $ intervall) {

var $ el = $ ($ element [0]). Find (". Progress-Bar");

console.log (Argumente);

// Verwenden Sie das von Angular.element ausgewählte Element, um etwas zu finden, ohne zu finden;

$ scope.prog = function () {

var df = $ intervall (function () {

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

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

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

}, 100);

console.log (df)

//console.log(aa = $ intervall)

};

});

</script>

</div>

</body>

</html>