Οδηγίες AngularJS

Το AngularJS σας επιτρέπει να χρησιμοποιείτε το όνομαεντολέςνέες ιδιότητες για την επέκταση του HTML.

Το AngularJS έχει ένα σύνολο εντολών που μπορούν να παρέχουν λειτουργίες στο πρόγραμμα σας.

Το AngularJS επιτρέπει επίσης τη δημιουργία δικών σας εντολών.

Οδηγίες AngularJS

Οι εντολές AngularJS είναι επεκταμένες ιδιότητες HTML με πρόθεμα ng-αρχική τιμή

όταν φορτώνεται η ιστοσελίδα, Η εντολή initializes την εφαρμογή AngularJS.

οδηγός ng-init Η εντολή initializes δεδομένα της εφαρμογής.

ng-model οι οδηγοί συνδέουν την τιμή του HTML ελέγχου (input, select, textarea) με τα δεδομένα της εφαρμογής.

Παρακαλώ διαβάστε περισσότερα για τις εντολές AngularJS στο έγγραφό μας αναφοράς εντολών AngularJS.

instance

<div ng-app="" ng-init="firstName='Bill'">
<pΌνομα: <input type="text" ng-model="firstName"></p>
<p>Γράψατε: {{ firstName }}</p>
</ul>

Try it yourself

όταν φορτώνεται η ιστοσελίδα, Η εντολή επίσης ενημερώνει το AngularJS ότι το στοιχείο <div> είναι ο 'επιβάτης' της εφαρμογής AngularJS.

δεσμεύση δεδομένων

στο παράδειγμα {{ firstName }} Η έκφραση είναι μια έκφραση δεσμεύσης δεδομένων AngularJS.

Η δεσμεύση δεδομένων του AngularJS συνδέει τις εκφράσεις AngularJS με τα δεδομένα AngularJS.

{{ firstName }} με ng-model="firstName" συνδέονται.

Στο επόμενο παράδειγμα, δύο πεδία κειμένων συνδέονται με δύο εντολές ng-model:

instance

<div ng-app="" ng-init="quantity=1;price=5">
Ποσότητα: <input type="number" ng-model="quantity">
Διαδικασίες:    <input type="number" ng-model="price">
Σύνολο σε δολάρια: {{ quantity * price }}
</ul>

Try it yourself

Χρήση οδηγός ng-init είναι λιγότερο συχνή. Θα μάθετε πώς να�始化 δεδομένα στο κεφάλαιο για τους ελεγκτές.

Η επανάληψη HTML στοιχείων

ng-repeat Εντολή επανάληψης HTML στοιχείων:

instance

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

Try it yourself

ng-repeat Η εντολή αυτή εφαρμόζεται σε κάθε στοιχείο της συλλογήςμία φοράαρχική τιμή

για την αντιγραφή μιας HTML στοιχείου ng-repeat Εντολή:

instance

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

Try it yourself

</div>

το AngularJS είναι πολύ κατάλληλο για εφαρμογές βάσης δεδομένων CRUD ( δημιουργία, ανάγνωση, ενημέρωση, διαγραφή)

φανταστείτε ότι αυτά τα αντικείμενα είναι καταγραφές από βάση δεδομένων.

όταν φορτώνεται η ιστοσελίδα, ng-initοδηγός ng-appαρχική τιμή

πρωτεύον στοιχείοόταν φορτώνεται η ιστοσελίδα, ng-appο οδηγόςαυτόματη εκκίνηση

το ng-init (αυτόματη αρχικοποίηση) της εφαρμογής.

οδηγός ng-init ng-initο οδηγός ορίζει την εφαρμογή του AngularJSαρχική τιμή

.

ποτέ δεν χρησιμοποιείτε το ng-init. Θα χρησιμοποιήσετε τον ελεγκτή ή το μάθημα.

οδηγός ng-model

ng-model οι οδηγοί συνδέουν την τιμή του HTML ελέγχου (input, select, textarea) με τα δεδομένα της εφαρμογής.

ng-model οι οδηγοί μπορούν επίσης:

  • παρέχετε τύπος επαλήθευση στο δεδομένα της εφαρμογής (αριθμός, ηλεκτρονικό ταχυδρομείο, υποχρεωτικό)
  • παρέχετε κατάσταση στο δεδομένα της εφαρμογής (μη έγκυρο, σκουριασμένο, επαφές, σφάλματα)
  • παρέχετε CSS κλάση στο HTML στοιχείο
  • συνδέστε το HTML στοιχείο στο HTML φόρμα.

Στο επόμενο κεφάλαιο θα μάθετε περισσότερα για ng-model πληροφορίες του οδηγού.

Δημιουργία νέου οδηγού

πέρα από όλους τους ενσωματωμένους οδηγούς του AngularJS, μπορείτε να δημιουργήσετε τους δικούς σας οδηγούς.

οι νέοι οδηγοί δημιουργούνται με τη χρήση .directive η λειτουργία δημιουργίας.

για να καλέσετε την νέα εντολή, δημιουργήστε ένα HTML στοιχείο με την ίδια ετικέτα του νέου οδηγού.

για να ονομάσετε οδηγούς, πρέπει να χρησιμοποιήσετε ομαλές κεφαλαία γράμματα,w3TestDirectiveαλλά πρέπει να χρησιμοποιήσετε το διαχωριστικό - για να καλέσετε το όνομα,w3-test-directive:

instance

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

Try it yourself

Μπορείτε να καλέσετε την εντολή με τον εξής τρόπο:

  • ονομασία στοιχείου
  • κατάσταση
  • κλάση
  • σχόλια

οι παρακάτω παραδείγματα θα παράγουν τον ίδιο αποτέλεσμα:

ονομασία στοιχείου

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

Try it yourself

κατάσταση

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

Try it yourself

κλάση

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

Try it yourself

σχόλια

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

Try it yourself

Restriction

You can limit your directive to be called only through certain methods.

instance

By adding a value of "A" of restrict Properties, this directive can only be called through attributes:

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

Try it yourself

The valid restrict values are:

  • E Represents an element name
  • A Represents an attribute
  • C Represents a class
  • M Represents a comment

By default, this value is EA，το οποίο σημαίνει ότι μπορούν να καλέσουν οδηγίες τόσο τα ονόματα των στοιχείων όσο και τα ονόματα των ιδιοτήτων.