Μονάδα AngularJS
- Προηγούμενη Σελίδα Έκφραση AngularJS
- Επόμενη Σελίδα Οδηγίες AngularJS
Το μοντέλο του AngularJS ορίζει μια εφαρμογή.
Το μοντέλο είναι ένα κουτί αποθήκευσης των διαφορετικών τμημάτων της εφαρμογής.
Το μοντέλο είναι ένα κουτί αποθήκευσης του ελεγκτή της εφαρμογής.
Ο ελεγκτής είναι πάντα μέρος ενός μοντέλου.
Δημιουργία μοντέλου
Με τη χρήση των συναρτήσεων του AngularJS:angular.module Δημιουργία ενός μοντέλου:
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"myApp" είναι η παράμετρος που αναφέρεται στο στοιχείο HTML όπου θα εκτελεστεί η εφαρμογή.
Τώρα, μπορείτε να προσθέσετε ελεγκτές, οδηγίες, φίλτρα κ.λπ. στην εφαρμογή AngularJS σας.
Προσθήκη ελεγκτή
Προσθέστε έναν ελεγκτή στην εφαρμογή σας και χρησιμοποιήστε ng-controller Η οδηγία αναφέρεται στον ελεγκτή:
παράδειγμα
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "Bill";
$scope.lastName = "Gates";
});
</script>
Θα μάθετε περισσότερα για τους ελεγκτές στη συνέχεια του εγχειριδίου.
Προσθήκη οδηγιών
Η AngularJS έχει ένα σύνολο ενσωματωμένων οδηγιών που μπορείτε να χρησιμοποιήσετε για να προσθέσετε λειτουργίες στην εφαρμογή σας.
Για πλήρη αναφορά, επισκεφθείτε τη βάση δεδομένων οδηγιών AngularJS μας.
Επιπλέον, μπορείτε να προσθέσετε τις δικές σας οδηγίες στην εφαρμογή σας χρησιμοποιώντας τη μονάδα:
παράδειγμα
<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "I was made in a directive constructor!"
};
});
</script>
Θα μάθετε περισσότερα για τις οδηγίες στη συνέχεια του εγχειριδίου.
μονάδες και ελεγκτές στο αρχείο
Στην εφαρμογή AngularJS, η τοποθέτηση των μονάδων και των ελεγκτών σε αρχεία JavaScript είναι συνηθισμένη.
Σε αυτό το παράδειγμα, το "myApp.js" περιέχει τη διατύπωση της μονάδας της εφαρμογής, ενώ το "myCtrl.js" περιέχει τον ελεγκτή:
παράδειγμα
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
myApp.js
var app = angular.module("myApp", []);
Η παράμετρος [] στη διατύπωση της μονάδας μπορεί να χρησιμοποιηθεί για τη διατύπωση εξαρτήσεων της μονάδας.
Αν δεν υπάρχει παράμετρος [], δεν δημιουργείτε νέα μονάδα, αλλά ανακτάτε μια υπάρχουσα.
myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "Bill";
$scope.lastName= "Gates";
});
Οι συνάρτησεις μπορεί να μολύνουν το ονομαστικό χώρο του γενικού.
Στο JavaScript πρέπει να αποφεύγεται η χρήση γενικών συνάρτητων. Είναι ευκολότερο να καλύπτονται ή να καταστραφούν από άλλες βιβλιοθήκες.
Η AngularJS μονάδα μειώνει αυτό το πρόβλημα με τη διατήρηση όλων των συνάρτησων τοπικά μέσα στη μονάδα.
ποτε φορτώνεται η βιβλιοθήκη
ακόμα και σε εφαρμογές HTML είναι συνηθισμένο να τοποθετούνται <body> στο τέλος του στοιχείου <head> ή <body> αρχή φόρτωσης της βιβλιοθήκης AngularJS.
γιατί μόνο μετά από τη φόρτωση της βιβλιοθήκης μπορεί να γίνει η angular.module καλείται.
παράδειγμα
<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "Bill";
$scope.lastName = "Gates";
});
</script>
</body>
</html>
- Προηγούμενη Σελίδα Έκφραση AngularJS
- Επόμενη Σελίδα Οδηγίες AngularJS
