Διαδρομή AngularJS

ngRoute Οι μονάδες βοηθούν την εφαρμογή σας να γίνει SPA.

Τι είναι η διαδρομή στο AngularJS;

Αν θέλετε να μεταβείτε σε διαφορετικές σελίδες της εφαρμογής σας και επίσης να θέλετε η εφαρμογή να είναι SPA (Single Page Application) χωρίς ανανέωση σελίδας, μπορείτε να χρησιμοποιήσετε ngRoute μονάδες。

ngRoute Οι μονάδες οδηγούν την εφαρμογή σας σε διαφορετικές σελίδες χωρίς να ξαναφορτώσετε την ολόκληρη την εφαρμογή.

Παράδειγμα

να μεταβείτε στις σελίδες "red.htm", "green.htm" και "blue.htm":

σώμα ng-app="myApp"
<p><a href="#/!">ιστοσελίδα</a></p>
<a href="#!red">κόκκινο</a>
<a href="#!green">πράσινο</a>
<a href="#!blue">κυανό</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/red", {
    templateUrl : "red.htm"
  })
  .when("/green", {
    templateUrl : "green.htm"
  })
  .when("/blue", {
    templateUrl : "blue.htm"
  });
});
</script>
</body>

Δοκιμάστε το προσωπικά

τι χρειάζομαι;

για να κάνετε την εφαρμογή σας έτοιμη για τη διαδρομή，πρέπει να περιλαμβάνετε το μονόπτυπο AngularJS Route.

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script>

τότε，πρέπει να ngRoute προσθέστε ως εξαρτημένο στοιχείο του μοντέλου της εφαρμογής:

var app = angular.module("myApp", ["ngRoute"]);

τώρα η εφαρμογή σας μπορεί να προσβλέπει στο παρέχον $routeProvider μοジュ διαδρομών.

χρησιμοποιήστε το $routeProvider διαμόρφωση διαφορετικών διαδρομών στην εφαρμογή:

app.config(function($routeProvider) {}}
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/red", {
    templateUrl : "red.htm"
  })
  .when("/green", {
    templateUrl : "green.htm"
  })
  .when("/blue", {
    templateUrl : "blue.htm"
  });
});

πού είναι πια;

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

ο κουτί αυτό όπου είναι ο μοναδικός προσδιοριστής όλων των προβολών που παρέχει η διαδρομή.

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

Παράδειγμα

<div ng-view></div>

Δοκιμάστε το προσωπικά

Παράδειγμα

<ng-view></ng-view>

Δοκιμάστε το προσωπικά

Παράδειγμα

<div class="ng-view"></div>

Δοκιμάστε το προσωπικά

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

$routeProvider

χρήση $routeProvider，μπορείτε να ορίσετε την σελίδα που θα εμφανιστεί όταν ο χρήστης κάνει κλικ στο σύνδεσμο.

Παράδειγμα

ορισμός $routeProvider：

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/london", {
    templateUrl : "london.htm"
  })
  .when("/paris", {
    templateUrl : "paris.htm"
  });
});

Δοκιμάστε το προσωπικά

χρησιμοποιώντας την εφαρμογή του config method definition $routeProvider。Αναπτύσσεται κατά την φόρτωση της εφαρμογής σε config εργασία που εγγραφεί στις μεθόδους.

ελεγκτές

χρήση $routeProvider，μπορείτε επίσης να ορίσετε έναν ελεγκτή για κάθε "προβολή".

Παράδειγμα

προσθήκη ελέγχου

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/london", {
    templateUrl : "london.htm",
    controller : "londonCtrl"
  })
  .when("/paris", {
    templateUrl : "paris.htm",
    controller : "parisCtrl"
  });
});
app.controller("londonCtrl", function ($scope) {
  $scope.msg = "Άγαπώ την Λονδίνο";
});
app.controller("parisCtrl", function ($scope) {}}
  $scope.msg = "I love Paris";
});

Δοκιμάστε το προσωπικά

"london.htm" και "paris.htm" είναι συνηθισμένα αρχεία HTML, στα οποία μπορείτε να προσθέσετε εκφράσεις AngularJS, όπως σε άλλες ενότητες HTML της εφαρμογής AngularJS.

Αυτά τα αρχεία φαίνονται όπως αυτό:

london.htm

<h1>Λονδίνο</h1>
<h3>Το Λονδίνο είναι η πρωτεύουσα της Αγγλίας.</h3>
<p>Είναι η πιο πληθυσμιακή πόλη του Ηνωμένου Βασιλείου, με αστικός χώρος πάνω από 13 εκατομμύρια κατοίκους.</p>
<p>{{msg}}</p>

paris.htm

<h1>Παρίσι</h1>
<h3>Το Παρίσι είναι η πρωτεύουσα της Γαλλίας.</h3>
<p>Η περιοχή του Παρισιού είναι ένα από τα μεγαλύτερα κέντρα πληθυσμού στην Ευρώπη, με περισσότερους από 12 εκατομμύρια κατοίκους.</p>
<p>{{msg}}</p>

μοτίβο

Στο παραπάνω παράδειγμα, στο $routeProvider.when η μέθοδος χρησιμοποιήθηκε στο templateUrl ιδιότητα.

Μπορείτε επίσης να χρησιμοποιήσετε Πρότυπο Πρότυπο, το οποίο επιτρέπει τη γραφή HTML απευθείας στην τιμή της ιδιότητας, αντί να αναφέρεται στη σελίδα.

Παράδειγμα

Γράψτε το μοτίβο:

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
  $routeProvider
  .when("/", {
    template : "<h1>Main</h1><p>Κάντε κλικ στους σύνδεσμους για να αλλάξετε αυτό το περιεχόμενο</p>"
  })
  .when("/banana", {
    template : "<h1>Banana</h1><p>Οι Bananas περιέχουν περίπου 75% νερού.</p>"
  })
  .when("/tomato", {
    template : "<h1>Tomato</h1><p>Οι Tomatoes περιέχουν περίπου 95% νερού.</p>"
  });
});

Δοκιμάστε το προσωπικά

την μέθοδο otherwise

Στο παραπάνω παράδειγμα, χρησιμοποιήσαμε $routeProvider την μέθοδο when.

Μπορείτε επίσης να χρησιμοποιήσετε otherwise Η μέθοδος, όταν δεν ταιριάζει καμία άλλη διαδρομή, γίνεται η προεπιλεγμένη διαδρομή.

Παράδειγμα

Εάν δεν έχουν κάνει κλικ στο σύνδεσμο "Banana" ούτε στο σύνδεσμο "Tomato", ενημερώστε τους:

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
  $routeProvider
  .when("/banana", {
    template : "<h1>Banana</h1><p>Οι Bananas περιέχουν περίπου 75% νερού.</p>"
  })
  .when("/tomato", {
    template : "<h1>Tomato</h1><p>Οι Tomatoes περιέχουν περίπου 95% νερού.</p>"
  })
  .otherwise({
    template : "<h1>Κανένα</h1><p>Δεν έχει επιλεγεί τίποτα</p>"
  });
});

Δοκιμάστε το προσωπικά