Muhtasari wa muafanikio wa AngularJS

AngularJS inafanya kwaUharibifuKuandaa data kwa HTML.

Muhtasari wa muafanikio wa AngularJS

Uharibifu wa AngularJS wengiweza kuitwa kwenye kijivu kikuu zaidi:{{ expression }}.

Uharibifu wa AngularJS wengiweza kuitwa kwenye mawendo:ng-bind="expression".

AngularJS itakatakua kusoma uharibifu, na kuwaachia matokeo kwenye eneo ambao ulikuwa na uharibifu.

Muhtasari wa muafanikio wa AngularJSkuelekea Uharibifu wa JavaScript：Zilikuwa inayoweza kuwa na maadili, operator na variables.

Mfano {{ 5 + 5 }} au {{ firstName + " " + lastName }}

Mfano

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>Uharibifu wa kwanza: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Tafakari tena

Ikiwasaidia ng-app Inarufaa, HTML itakuwaonyesha uharibifu kwa hivyo, bila kusoma.

Mfano

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div>
  <p>Uharibifu wa kwanza: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Tafakari tena

Wewe tunaweza kuita uharibifu kwenye eneo yako yafikirika, AngularJS itakatakua kusoma kwa urahisi uharibifu na kuwaachia matokeo.

Mfano: Kuhusisha AngularJS kubadilisha thamani ya uongezaji wa CSS.

Tukichange maadili yake kwa upya inaendelea kubadilisha rangi ya chumba hii:

Mvuleni wa nyekundu

Mfano

<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol">
</div>

Tafakari tena

Mafanikio wa AngularJS wa namba

Mafanikio wa AngularJS wa namba ni kama mafanikio wa JavaScript wa namba:

Mfano

<div ng-app="" ng-init="quantity=1;cost=5">
<p>Majua ya kutoa (dola): {{ quantity * cost }}</p>
</div>

Tafakari tena

Kutumia ng-bind Mfano wa hivi:

Mfano

<div ng-app="" ng-init="quantity=1;cost=5">
<p>Majua ya kutoa (dola): <span ng-bind="quantity * cost"></span></p>
</div>

Tafakari tena

Kujifunza ng-init haikuchukuliwe sana. Unakupenda nafasi zaidi ya kufungua data kwenye kitabu cha viongozi wa mifano.

Mafanikio wa AngularJS wa matukio

Mafanikio wa AngularJS wa matukio ni kama mafanikio wa JavaScript wa matukio:

Mfano

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>Jina ni {{ firstName + " " + lastName }}</p>
</div>

Tafakari tena

Mfano wa ng-bind inayotumia:

Mfano

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>Jina ni <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

Tafakari tena

Mafanikio wa AngularJS

Mafanikio wa AngularJS ni kama mafanikio wa JavaScript:

Mfano

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>Jina ni {{ person.lastName }}</p>
</div>

Tafakari tena

Mfano wa ng-bind inayotumia:

Mfano

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>Jina ni <span ng-bind="person.lastName"></span></p>
</div>

Tafakari tena

Mafanikio wa AngularJS

Mafanikio wa AngularJS ni kama mafanikio wa JavaScript:

Mfano

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>Matokeo wa tatu ni ni {{ points[2] }}</p>
</div>

Tafakari tena

Mfano wa ng-bind inayotumia:

Mfano

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>Matokeo ya tatu ni <span ng-bind="points[2]"></span></p>
</div>

Tafakari tena

Muafanikio wa AngularJS na muafanikio wa JavaScript

Kama muafanikio wa JavaScript, muafanikio wa AngularJS inaweza kuandikwa kwa malo, mafungo na viwanda.

Kama muafanikio wa JavaScript, muafanikio wa AngularJS inaweza kuandikwa kwenye HTML kwa uwezo.

Muafanikio wa AngularJS hauzingatia matukio ya kijumuia, mawiriamu na matukio ya kinyasi, wakati muafanikio wa JavaScript huzingatia.

Muafanikio wa AngularJS huzingatia filtrezi, wakati muafanikio wa JavaScript hauzingatia.

Tafakari juu ya mafanikio ya JavaScript kwenye mafunzo yetu ya JavaScript.