Εισαγωγή στο AngularJS
- Προηγούμενη Σελίδα Εκπαιδευτικό Υλικό AngularJS
- Επόμενη Σελίδα Εκφράσεις AngularJS
Το AngularJS είναι ένα Γλωσσικό πλαίσιο JavaScriptΜπορεί να προστεθεί σε μια σελίδα HTML με μια ετικέτα <script>.
Το AngularJS χρησιμοποιείεντολήΕκτεταμένο το HTML attribute και χρησιμοποιείΈκφρασηΣυνδέει δεδομένα με το HTML.
Το AngularJS είναι ένα γλωσσικό πλαίσιο
Το AngularJS είναι ένας γλωσσικό πλαίσιο γραμμένο σε JavaScript.
Το AngularJS διανέμεται ως αρχείο JavaScript και μπορεί να προστεθεί στον ιστότοπο με το ετικέτα script:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
Το AngularJS εκτεταμένο το HTML
Το AngularJS χρησιμοποιεί ng-εντολήΕκτεταμένο το HTML.
ng-app Η εντολή ορίζει μια εφαρμογή του AngularJS.
ng-model Η εντολή συνδέει την τιμή του HTML ελέγχου (input, select, textarea) με τα δεδομένα της εφαρμογής.
ng-bind Η εντολή συνδέει τα δεδομένα της εφαρμογής με την HTML προβολή.
Παραδείγματα AngularJS
<!DOCTYPE html> <html> <script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script> <body> <div ng-app=""> <p>Όνομα: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div> </body> </html>
Παράδειγμα ερμηνείας:
Όταν ο ιστότοπος φορτώνει, το AngularJS ξεκινά αυτόματα.
ng-app Η εντολή ενημερώνει το AngularJS ότι το στοιχείο <div> είναι στοιχείο του AngularJS Εφαρμογήτου 'ιδιοκτήτη'.
ng-model Η εντολή συνδέει την τιμή του πεδίου εισόδου με την εφαρμογή μεταβλητών. name。
ng-bind Οι οδηγίες συνδέουν το περιεχόμενο του στοιχείου <p> με τις μεταβλητές της εφαρμογής. name。
Οδηγίες AngularJS
Ως văd, οι οδηγίες AngularJS είναι με ng Πρόθεμα των ιδιοτήτων HTML.
ng-init Οι οδηγίες initializing την εφαρμογή AngularJS μεταβλητές.
Παραδείγματα AngularJS
<div ng-app="" ng-init="firstName='Bill'"> <p>Το όνομα είναι <span ng-bind="firstName"></span></p> </div>
ή χρησιμοποιήστε έγκυρο HTML:
Παραδείγματα AngularJS
<div data-ng-app="" data-ng-init="firstName='Bill'"> <p>Το όνομα είναι <span data-ng-bind="firstName"></span></p> </div>
Αν θέλετε να κάνετε το HTML της σελίδας σας έγκυρο, μπορείτε να χρησιμοποιήσετε data-ng- αντ' για ng-。
Θα μάθετε περισσότερα για τις οδηγίες αργότερα στο σεμινάριο.
Εκφράσεις AngularJS
Οι εκφράσεις AngularJS γράφονται μέσα σε διπλά παρενθέσεις:{{ expression }}。
Το AngularJS θα εμφανίσει δεδομένα στη θέση της έκφρασης:
Παραδείγματα AngularJS
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Η πρώτη μου έκφραση:{{ 5 + 5 }}</p>
</div>
</body>
</html>
Οι εκφράσεις AngularJS συνδέουν δεδομένα AngularJS με το HTML, με ng-bind Ο τρόπος ορισμού των οδηγιών είναι ο ίδιος.
Παραδείγματα AngularJS
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Όνομα: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Θα μάθετε περισσότερα για τις εκφράσεις αργότερα στο σεμινάριο.
Εφαρμογές AngularJS
AngularJS ΜονάδαΟρίζει την εφαρμογή AngularJS.
AngularJS ΕλεγκτήςΕλέγχει την εφαρμογή AngularJS.
ng-app Ορίζει την εφαρμογή,ng-controller Ορίζει τον ελεγκτή οδηγίες.
Παραδείγματα AngularJS
<div ng-app="myApp" ng-controller="myCtrl">
Όνομα：<input type="text" ng-model="firstName"><br>
Επίθετο：<input type="text" ng-model="lastName"><br>
<br>
Πλήρες Όνομα：{{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
</script>
Η Μονάδα AngularJS ορίζει την εφαρμογή:
Μονάδες AngularJS
var app = angular.module('myApp', []);
Ο Ελεγκτής AngularJS ελέγχει την εφαρμογή:
Ελεγκτές AngularJS
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
Θα μάθετε περισσότερα για τις μονάδες και τους ελεγκτές σε αυτό το εκπαιδευτικό υλικό.
- Προηγούμενη Σελίδα Εκπαιδευτικό Υλικό AngularJS
- Επόμενη Σελίδα Εκφράσεις AngularJS
