Instrukcje AngularJS

AngularJS pozwala na użycie nazwy "instrukcjenowe właściwości do rozszerzenia HTML.

AngularJS ma zestaw wbudowanych instrukcji, które mogą dostarczyć funkcji do Twojej aplikacji.

AngularJS także pozwala na definiowanie własnych instrukcji.

Instrukcje AngularJS

AngularJS pozwala również na definiowanie własnych instrukcji. Instrukcje AngularJS są rozszerzonymi atrybutami HTML, mającymi prefiks.

ng-app ng-

ng-init Instrukcja inicjalizuje aplikację AngularJS.

ng-model Instrukcje przypisują wartości kontrolki HTML (input, select, textarea) do danych aplikacji.

Instrukcja inicjalizuje dane aplikacji.

instancja

Przeczytaj więcej o wszystkich instrukcjach AngularJS w naszej referencji instrukcji AngularJS.
<div ng-app="" ng-init="firstName='Bill'">
<p>Nazwa: <input type="text" ng-model="firstName"></p>
</div>

Spróbuj sam

ng-app <p> Napisałeś: {{ firstName }}</p>

instrukcja informuje AngularJS, że element <div> jest 'właścicielem' aplikacji AngularJS.

bindowanie danych Dzięki bindowaniu danych AngularJS, wyrażenia AngularJS są związane z danymi AngularJS. W poprzednim przykładzie

Wyrażenie jest wyrażeniem bindowania danych AngularJS.

Dzięki bindowaniu danych AngularJS, wyrażenia AngularJS są związane z danymi AngularJS. {{ firstName }} z ng-model="firstName"

związane.

instancja

W następnym przykładzie, dwa pola tekstowe są związane dwoma instrukcjami ng-model:
<div ng-app="" ng-init="quantity=1;price=5">
Ilość: <input type="number" ng-model="quantity">
Koszty:    <input type="number" ng-model="price">
</div>

Spróbuj sam

Całość w dolarach: {{ quantity * price }} ng-init Użyj

jest rzadko spotykane. Nauczysz się, jak inicjalizować dane w rozdziale o kontrolerach.

ng-repeat Powtarzanie elementów HTML

instancja

Instrukcja powtarzania elementów HTML:
  <ul>
    <li ng-repeat="x in names">
      <div ng-app="" ng-init="names=['Jani','Hege','Kai']">
    </li>
  </ul>
</div>

Spróbuj sam

ng-repeat {{ x }}Instrukcja w rzeczywistości klonuje każdy element w zbiorze.

do klonowania jednego elementu HTML ng-repeat Instrukcja:

instancja

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

Spróbuj sam

AngularJS jest bardzo odpowiedni do aplikacji CRUD (tworzenie, odczytywanie, aktualizacja, usuwanie) w bazie danych.

Wyobraź sobie, jeśli te obiekty są zapisane w rekordach bazy danych.

Instrukcja ng-app

ng-app Instrukcja definiujeelement główny.

po załadowaniu strony,ng-app Instrukcja przypisujeAutomatyczne uruchamianieaplikacji (automatyczne inicjalizowanie).

Instrukcja ng-init

ng-init Instrukcja definiujeWartość początkowa.

Zwykle nie używasz ng-init. Zamiast tego używasz kontrolera lub modułu.

Później dowiesz się więcej o kontrolerach i modułach.

Instrukcja ng-model

ng-model Instrukcje przypisują wartości kontrolki HTML (input, select, textarea) do danych aplikacji.

ng-model Instrukcje mogą również:

  • Zapewnieniu walidacji typów danych aplikacji (liczby, e-mail, wymagane)
  • Zapewnieniu stanu danych aplikacji (niepoprawne, brudne, dotknięte, błąd)
  • Zapewnieniu CSS klasy dla HTML elementu
  • Przypięciu HTML elementu do HTML formularza

Przeczytaj więcej o ng-model informacji o instrukcji.

Tworzenie nowych instrukcji

Oprócz wszystkich wbudowanych instrukcji AngularJS, możesz również tworzyć własne.

Nowe instrukcje są tworzone poprzez użycie .directive utworzonej funkcji.

Aby wywołać nową instrukcję, utwórz HTML element o nazwie identycznej z nową instrukcją.

Podczas nazewnictwa instrukcji, musisz używać nazewnictwa krokodylego (camelCase),w3TestDirective, ale podczas wywoływania jej, musisz użyć nazwy rozdzielonej myślnikiem -w3-test-directive:

instancja

<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "<h1>Stworzone przez instrukcję!</h1>"
  });
});
</script>
</body>

Spróbuj sam

Możesz wywołać instrukcję w następujący sposób:

  • Nazwa elementu
  • Atrybut
  • Klasa
  • Komentarz

Poniższe przykłady będą generować ten sam wynik:

Nazwa elementu

<w3-test-directive></w3-test-directive>

Spróbuj sam

Atrybut

<div w3-test-directive></div>

Spróbuj sam

Klasa

<div class="w3-test-directive"></div>

Spróbuj sam

Komentarz

<!-- directive: w3-test-directive -->

Spróbuj sam

Ograniczenia

Możesz ograniczyć swoje instrukcje do wywoływania tylko przez pewne metody.

instancja

dodając wartość "A" i restrict Atrybuty, ta instrukcja może być wywoływana tylko przez atrybuty:

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    restrict : "A",
    template : "<h1>Stworzone przez instrukcję!</h1>"
  });
});

Spróbuj sam

Dopuszczalne wartości restrict to:

  • E oznacza nazwę elementu
  • A oznacza atrybut
  • C oznacza klasę
  • M oznacza komentarz

Domyślnie, wartość ta wynosi EA, co oznacza, że nazwy elementów i atrybutów mogą być wywoływane przez instrukcje.