AngularJS Controllers with ng-Controller Παράδειγμα

Τι κάνει ο ελεγκτής από το Angular's Perspective;

Ακολουθεί ένας απλός ορισμός της λειτουργίας του ελεγκτή AngularJS:

• Η κύρια ευθύνη του ελεγκτή είναι να ελέγχει τα δεδομένα που μεταβιβάζονται στην προβολή. Το εύρος και η θέα έχουν αμφίδρομη επικοινωνία.
• Οι ιδιότητες της προβολής μπορούν να καλούν "συναρτήσεις" στο εύρος. Επιπλέον, τα συμβάντα στην προβολή μπορούν να αποκαλούν "μεθόδους" στο εύρος. Το παρακάτω απόσπασμα κώδικα δίνει ένα απλό παράδειγμα συνάρτησης.
• The συνάρτηση ($scope) που ορίζεται κατά τον ορισμό του ελεγκτή και μιας εσωτερικής συνάρτησης που χρησιμοποιείται για να επιστρέψει τη συνένωση των $scope.firstName και $scope.lastName.
• In AngularJS, όταν ορίζετε μια συνάρτηση ως μεταβλητή, είναι γνωστή ως μέθοδος.

• Τα δεδομένα με αυτόν τον τρόπο περνούν από τον ελεγκτή στο πεδίο εφαρμογής και, στη συνέχεια, τα δεδομένα περνούν εμπρός και πίσω από το πεδίο εφαρμογής στην προβολή.
• Το εύρος χρησιμοποιείται για την έκθεση του μοντέλου στην προβολή. Το μοντέλο μπορεί να τροποποιηθεί μέσω μεθόδων που ορίζονται στο πεδίο εφαρμογής που θα μπορούσαν να ενεργοποιηθούν μέσω συμβάντων από την προβολή. Μπορούμε να ορίσουμε αμφίδρομη σύνδεση μοντέλου από το πεδίο εφαρμογής στο μοντέλο.
• Οι ελεγκτές δεν θα πρέπει ιδανικά να χρησιμοποιούνται για τον χειρισμό του DOM. Αυτό πρέπει να γίνει με τις οδηγίες που θα δούμε στη συνέχεια.
• Καλυτερα πρακτική είναι να έχουμε χειριστήρια με βάση τη λειτουργικότητα. Για παράδειγμα, εάν έχετε μια φόρμα για εισαγωγή και χρειάζεστε έναν ελεγκτή για αυτό, δημιουργήστε έναν ελεγκτή που ονομάζεται "φορμα ελεγκτής".

Πώς να δημιουργήσετε έναν βασικό ελεγκτή στο AngularJS

Ακολουθούν τα βήματα για τη δημιουργία ενός ελεγκτή στο AngularJS:

Βήμα 1) Δημιουργήστε μια βασική σελίδα HTML

Πριν ξεκινήσουμε με τη δημιουργία ενός ελεγκτή, πρέπει πρώτα να έχουμε τη βασική μας ρύθμιση σελίδας HTML.

Το παρακάτω απόσπασμα κώδικα είναι μια απλή σελίδα HTML που έχει τίτλο "Εγγραφή συμβάντος" και έχει αναφορές σε σημαντικές βιβλιοθήκες όπως Bootstrap, jquery και Angular.

1. Προσθέτουμε αναφορές στα φύλλα στυλ CSS εκκίνησης, τα οποία θα χρησιμοποιηθούν σε συνδυασμό με τις βιβλιοθήκες bootstrap.
2. Προσθέτουμε αναφορές στις βιβλιοθήκες angularjs. Οπότε τώρα ό,τι κάνουμε με το angular.js θα γίνεται αναφορά από αυτήν τη βιβλιοθήκη.
3. Προσθέτουμε αναφορές στη βιβλιοθήκη bootstrap για να κάνουμε την ιστοσελίδα μας πιο ανταποκρινόμενη για ορισμένα στοιχεία ελέγχου.
4. Προσθέσαμε αναφορές σε βιβλιοθήκες jquery που θα χρησιμοποιηθούν για χειρισμό DOM. Αυτό απαιτείται από το Angular επειδή ορισμένες από τις λειτουργίες του Angular εξαρτώνται από αυτήν τη βιβλιοθήκη.

Από προεπιλογή, το παραπάνω απόσπασμα κώδικα θα υπάρχει σε όλα τα παραδείγματά μας, ώστε να μπορούμε να δείξουμε μόνο τον συγκεκριμένο κώδικα angularJS στις επόμενες ενότητες.

Βήμα 2) Ελέγξτε τα αρχεία και τη δομή των αρχείων

Δεύτερον, ας δούμε τα αρχεία και τη δομή των αρχείων μας με τα οποία πρόκειται να ξεκινήσουμε κατά τη διάρκεια του μαθήματός μας.

1. Αρχικά διαχωρίζουμε τα αρχεία μας σε 2 φακέλους όπως γίνεται με οποιαδήποτε συμβατική εφαρμογή web. Έχουμε το φάκελο "CSS". Θα περιέχει όλα μας τα αρχεία του φύλλου στυλ καταρράκτη και, στη συνέχεια, θα έχουμε τον φάκελο "lib" που θα έχει όλα τα JavaΓραφή αρχεία.
2. Το αρχείο bootstrap.css τοποθετείται στον φάκελο CSS και χρησιμοποιείται για να προσθέσει μια καλή εμφάνιση και αίσθηση στον ιστότοπό μας.
3. Το angular.js είναι το κύριο αρχείο μας το οποίο κατεβάστηκε από τον ιστότοπο angularJS και διατηρήθηκε στον φάκελο lib.
4. Το αρχείο app.js θα περιέχει τον κωδικό μας για τους ελεγκτές.
5. Το αρχείο bootstrap.js χρησιμοποιείται για τη συμπλήρωση του αρχείου bootstrap.cs για την προσθήκη λειτουργικότητας bootstrap στην εφαρμογή Ιστού μας.
6. Το αρχείο jquery θα χρησιμοποιηθεί για την προσθήκη λειτουργιών χειρισμού DOM στον ιστότοπό μας.

Βήμα 3) Χρησιμοποιήστε τον κώδικα AngularJS για να εμφανίσετε την έξοδο

Αυτό που θέλουμε να κάνουμε εδώ είναι απλώς να εμφανίζουμε τις λέξεις "AngularJS" τόσο σε μορφή κειμένου όσο και σε πλαίσιο κειμένου όταν η σελίδα προβάλλεται στο πρόγραμμα περιήγησης. Ας δούμε ένα παράδειγμα για το πώς να χρησιμοποιήσετε το angular.js για να το κάνετε αυτό:

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">

	Tutorial Name : <input type="text" ng-model="tutorialName"><br>

	This tutorial is {{tutorialName}}
</div>
<script>
	var app = angular.module('DemoApp',[]);

	app.controller('DemoController', function($scope){
	$scope.tutorialName = "Angular JS";
	});
</script>

</body>
</html>

Επεξήγηση κώδικα:

1. The ng-app λέξη-κλειδί χρησιμοποιείται για να υποδηλώσει ότι αυτή η εφαρμογή πρέπει να θεωρείται ως γωνιακή εφαρμογή. Οτιδήποτε ξεκινά με το πρόθεμα 'ng' είναι γνωστό ως Οδηγιών. "DemoApp" είναι το όνομα που δόθηκε στην εφαρμογή μας Angular.JS.
2. Έχουμε δημιουργήσει μια ετικέτα div και σε αυτήν την ετικέτα έχουμε προσθέσει μια οδηγία ng-controller μαζί με το όνομα του ελεγκτή μας "DemoController". Αυτό ουσιαστικά καθιστά την ετικέτα div μας τη δυνατότητα πρόσβασης στα περιεχόμενα του Ελεγκτή επίδειξης. Πρέπει να αναφέρετε το όνομα του ελεγκτή σύμφωνα με την οδηγία για να διασφαλίσετε ότι έχετε πρόσβαση στη λειτουργικότητα που ορίζεται στον ελεγκτή.
3. Δημιουργούμε ένα δεσμευτικό μοντέλου χρησιμοποιώντας την οδηγία ng-model. Αυτό που κάνει είναι ότι δεσμεύει το πλαίσιο κειμένου για το Όνομα Εκμάθησης για να δεσμευτεί στη μεταβλητή μέλους "tutorialName".
4. Δημιουργούμε μια μεταβλητή μέλους που ονομάζεται "tutorialName" η οποία θα χρησιμοποιηθεί για την εμφάνιση των πληροφοριών που πληκτρολογεί ο χρήστης στο πλαίσιο κειμένου για το Όνομα εκμάθησης.
5. Δημιουργούμε μια ενότητα που θα προσαρτηθεί στην εφαρμογή DemoApp μας. Έτσι, αυτή η ενότητα γίνεται πλέον μέρος της εφαρμογής μας.
6. Στην ενότητα, ορίζουμε μια συνάρτηση που εκχωρεί μια προεπιλεγμένη τιμή του "AngularJS" στη μεταβλητή tutorialName.

Εάν η εντολή εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κώδικά σας στο πρόγραμμα περιήγησης.

Παραγωγή:

Εφόσον εκχωρήσαμε στη μεταβλητή tutorialName μια τιμή "Angular JS", αυτή εμφανίζεται στο πλαίσιο κειμένου και στη γραμμή απλού κειμένου.

Πώς να ορίσετε μεθόδους σε ελεγκτές AngularJS

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

Για παράδειγμα, ας υποθέσουμε ότι θέλετε να βάλετε το χειριστήριό σας να κάνει 2 βασικά πράγματα,

1. Εκτελέστε την πρόσθεση 2 αριθμών
2. Εκτελέστε την αφαίρεση 2 αριθμών

Στη συνέχεια, θα δημιουργήσετε ιδανικά 2 μεθόδους μέσα στον ελεγκτή σας, μία για να εκτελέσετε την πρόσθεση και την άλλη για να εκτελέσετε την αφαίρεση.

Ας δούμε ένα απλό παράδειγμα για το πώς μπορείτε να ορίσετε προσαρμοσμένες μεθόδους σε έναν ελεγκτή Angular.JS. Ο ελεγκτής απλώς θα επιστρέψει μια συμβολοσειρά.

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
	Tutorial Name :<input type="text" ng-model="tutorialName"><br>
	<br>
	This tutorial is {{tutorialName}}	
</div>

<script>
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
    $scope.tutorialName = "Angular JS";
	$scope.tName = function() {
        return $scope.tName;
    };
});
</script>	
</body>
</html>

Επεξήγηση κώδικα:

1. Εδώ, απλώς ορίζουμε μια συνάρτηση που επιστρέφει μια συμβολοσειρά του "AngularJS". Η συνάρτηση συνδέεται με το αντικείμενο scope μέσω μιας μεταβλητής μέλους που ονομάζεται tutorialName.
2. Εάν η εντολή εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κώδικά σας στο πρόγραμμα περιήγησης.

Παραγωγή:

Παράδειγμα ελεγκτή AngularJS με ng-Controller

Ας δούμε ένα παράδειγμα του "HelloWorld" όπου όλες οι λειτουργίες τοποθετήθηκαν σε ένα μόνο αρχείο. Τώρα ήρθε η ώρα να τοποθετήσετε τον κώδικα για τον ελεγκτή σε ξεχωριστά αρχεία.

Ας ακολουθήσουμε τα παρακάτω βήματα για να το κάνουμε αυτό:

Βήμα 1) Στο αρχείο app.js, προσθέστε τον παρακάτω κώδικα για τον ελεγκτή σας

angular.module('app',[]).controller('HelloWorldCtrl',function($scope)
{
	$scope.message = "Hello World"
});

Ο παραπάνω κώδικας κάνει τα εξής:

1. Καθορίστε μια λειτουργική μονάδα που ονομάζεται "app" η οποία θα κρατά τον ελεγκτή μαζί με τη λειτουργικότητα του ελεγκτή.
2. Δημιουργήστε έναν ελεγκτή με το όνομα "HelloWorldCtrl". Αυτός ο ελεγκτής θα χρησιμοποιηθεί για να έχει μια λειτουργία εμφάνισης ενός μηνύματος "Hello World".
3. Το αντικείμενο scope χρησιμοποιείται για τη μετάδοση πληροφοριών από τον ελεγκτή στην προβολή. Έτσι, στην περίπτωσή μας, το αντικείμενο scope θα χρησιμοποιηθεί για να κρατήσει μια μεταβλητή που ονομάζεται "μήνυμα".
4. Ορίζουμε το μήνυμα της μεταβλητής και του εκχωρούμε την τιμή "Hello World".

Βήμα 2) Τώρα, στο αρχείο Sample.html προσθέστε μια κλάση div που θα περιέχει την οδηγία ng-controller και στη συνέχεια προσθέστε μια αναφορά στη μεταβλητή μέλους "message"

Επίσης, μην ξεχάσετε να προσθέσετε μια αναφορά στο αρχείο σεναρίου app.js που έχει τον πηγαίο κώδικα για τον ελεγκτή σας.

<!DOCTYPE html>
<html ng-app="app">
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<div class="container">
	<div ng-controller="HelloWorldCtrl">{{message}}</div>
</div>

<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<script src="app.js"></script>

</body>
</html>

Εάν ο παραπάνω κωδικός έχει εισαχθεί σωστά, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.

Παραγωγή:

Σύνοψη

• Η κύρια ευθύνη του ελεγκτή είναι να δημιουργήσει ένα αντικείμενο εμβέλειας το οποίο με τη σειρά του περνά στην προβολή
• Πώς να δημιουργήσετε έναν απλό ελεγκτή χρησιμοποιώντας τις οδηγίες ng-app, ng-controller και ng-model
• Πώς να προσθέσετε προσαρμοσμένες μεθόδους σε έναν ελεγκτή που μπορούν να χρησιμοποιηθούν για τον διαχωρισμό διαφόρων λειτουργιών μέσα σε μια λειτουργική μονάδα angularjs.
• Οι ελεγκτές μπορούν να οριστούν σε εξωτερικά αρχεία για να διαχωρίσουν αυτό το επίπεδο από το επίπεδο προβολής. Αυτή είναι συνήθως μια βέλτιστη πρακτική κατά τη δημιουργία εφαρμογών web.