Dieser Artikel wurde von Dan Prince und Michaela Lehr überprüft. Vielen Dank an alle Peer -Rezensenten von SitePoint, die SitePoint -Inhalte so gut wie möglich gemacht haben!
Mit jeder neuen Freisetzung von AngularJS versucht das Entwicklungsteam, die Lücke zwischen AngularJs 1.x und 2. mit der Freisetzung von AngularJS 1.5 zu schließen. Entwickler können Anwendungen strukturell wie AngularJS 2.0 ähnlich schreiben.
.In diesem Tutorial werden wir in AngularJS 1.4 eine Rasterrichtlinie erstellen. Wir gehen dann durch die Schritte, um es auf 1,5 zu aktualisieren, und schauen Sie uns anschließend an, wie wir es in Version 2.0 umwandeln können.
Beginnen wir zunächst ein Projektverzeichnis namens AngularMigrateApp. Erstellen Sie in diesem Ordner eine HTML -Seite namens Index.html. So sollte die Seite aussehen:
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span> </span><span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span> </span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span> </span><span><span><span></head</span>></span> </span><span><span><span><body</span>></span> </span> <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span> </span><span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
sowie das eckige Framework verwenden wir auch Bootstrap, um unser Richtlinienlayout zu entwerfen. Wir nehmen beide Dateien direkt von CDNs aus.
Erstellen wir eine einfache Rasteranweisung, um ein JSON -Array anzuzeigen. Wir werden zunächst ein AngularJS -Modul erstellen.
angular<span>.module('myApp', [])
</span> <span>.constant('employees', [{
</span> <span>firstName: 'Rima',
</span> <span>lastName: 'George',
</span> <span>location: 'San Francisco'
</span> <span>}, {
</span> <span>firstName: 'Shaun',
</span> <span>lastName: 'John',
</span> <span>location: 'Germany'
</span> <span>}, {
</span> <span>firstName: 'Rahul',
</span> <span>lastName: 'Kurup',
</span> <span>location: 'Bangalore'
</span> <span>}, {
</span> <span>firstName: 'Samson',
</span> <span>lastName: 'Davis',
</span> <span>location: 'Canada'
</span> <span>}, {
</span> <span>firstName: 'Shilpa',
</span> <span>lastName: 'Agarwal',
</span> <span>location: 'Noida'
</span> <span>}])
</span>
<span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span> $scope<span>.employees = employees;
</span> <span>}])
</span>Wir haben eine Konstante genannt, die eine Reihe von Beispieldaten enthält. Anschließend injizieren wir dieses Array in Homectrl und stellen es im Bereich des Controllers zur Verfügung.
Erstellen wir eine Anweisung namens MyGrid, mit der wir das obige JSON -Array anzeigen.
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>}
</span><span>})
</span>Wir möchten die Anweisung über einen Tag -Namen wie folgt verwenden:
<span><span><span><my-grid</span>></span><span><span></my-grid</span>></span> </span>
Fügen wir also die Einschränkungsoption hinzu, um dies anzugeben:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>restrict: 'E'
</span> <span>}
</span><span>})
</span>Als nächstes möchten wir die Mitarbeiterdaten aus der Ansicht in die Richtlinie übergeben. Wir werden es also als Bindung hinzufügen:
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span> </span><span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span> </span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span> </span><span><span><span></head</span>></span> </span><span><span><span><body</span>></span> </span> <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span> </span><span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
Jetzt können wir die Mitarbeiterdaten als Attribut an die Richtlinie übergeben:
angular<span>.module('myApp', [])
</span> <span>.constant('employees', [{
</span> <span>firstName: 'Rima',
</span> <span>lastName: 'George',
</span> <span>location: 'San Francisco'
</span> <span>}, {
</span> <span>firstName: 'Shaun',
</span> <span>lastName: 'John',
</span> <span>location: 'Germany'
</span> <span>}, {
</span> <span>firstName: 'Rahul',
</span> <span>lastName: 'Kurup',
</span> <span>location: 'Bangalore'
</span> <span>}, {
</span> <span>firstName: 'Samson',
</span> <span>lastName: 'Davis',
</span> <span>location: 'Canada'
</span> <span>}, {
</span> <span>firstName: 'Shilpa',
</span> <span>lastName: 'Agarwal',
</span> <span>location: 'Noida'
</span> <span>}])
</span>
<span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span> $scope<span>.employees = employees;
</span> <span>}])
</span>Zu guter Letzt benötigen wir eine HTML -Vorlage, um die Daten anzuzeigen:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>}
</span><span>})
</span>Fügen Sie das folgende HTML -Vorlagen -Skript in den Körper von Index hinzu.
<span><span><span><my-grid</span>></span><span><span></my-grid</span>></span> </span>
Verwenden wir die MyGrid -Direktive in Index.html. Fügen Sie den folgenden Code hinzu:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>restrict: 'E'
</span> <span>}
</span><span>})
</span>Siehe den Stift AngularJS 1.4 Demo von sitepoint (@sinepoint) auf CodePen.
Upgrade auf 1,5
Ersetzen wir die vorhandene Skriptreferenz durch einen CDN -Link zu Version 1.5. Wenn Sie versuchen, die Seite zu aktualisieren, sollte alles weiter gut funktionieren. Mit dieser neuen Veröffentlichung der 1.x -Linie rückt das Framework näher an die Art und Weise, wie AngularJS 2.0 mit Komponenten funktioniert, und wir können dies in unserem Code nutzen, um den eventuellen Übergang zu Version 2.0 zu erleichtern.
In AngularJS 1.5 sind Komponenten syntaktischer Zucker für Richtlinien, die sich um die Standardeinstellungen kümmern und eine einfachere Konfiguration aufweisen. Sie sollten als Ersatz bevorzugt werden, insbesondere für diejenigen, die in Zukunft ein Upgrade aufbauen möchten.
Bei der Arbeit mit AngularJs arbeiten Entwickler im Allgemeinen dazu, mit Controller-basierten Ansatz zu arbeiten, aber dies kann viele Probleme verursachen, wenn die Anwendung zu wachsen beginnt. Ein Controller- und Ansichtsansatz führt zu wiederholten NG-Controller/-ansicht, aber ein komponentenbasierter Ansatz löst das Problem, indem Komponenten erstellt werden können, die in größere Komponenten komponiert werden können, ohne den Code zu wiederholen.
Versuchen wir, die neue Helfermethode der neuen Komponentenanweisung zu verwenden und unseren vorhandenen Code zu ändern. Wir erstellen zunächst eine Komponente:
Im Gegensatz zur Anweisungsmethode - die eine Funktion nimmt - nimmt die Komponentenmethode ein Objekt an. Wir werden die gleichen Objekte übergeben, die wir in unserer Richtlinie mit einer anderen Vorlage hatten. Hier ist die HTML -Vorlage:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>restrict: 'E',
</span> <span>scope: {
</span> <span>info: '=info'
</span> <span>}
</span> <span>}
</span><span>})
</span>Hier ist der geänderte Komponentencode:
<span><span><span><my-grid</span> info<span>="employees"</span>></span><span><span></my-grid</span>></span> </span>
Wie im obigen Code zu sehen, haben wir alle Optionen übergeben, die wir in unserer alten Richtlinie hatten.
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>restrict: 'E',
</span> <span>scope: {
</span> <span>info: '=info'
</span> <span>},
</span> <span>templateUrl : '/directiveGrid.html'
</span> <span>}
</span><span>})
</span>Erstellen Sie eine Komponente namens MyComp in der Seite index.html.
Speichern Sie die Änderungen und aktualisieren Sie die Seite. Sie sollten in der Lage sein, dass die Daten nicht angezeigt werden, aber auch kein Fehler in der Browserkonsole.
<span><span><span><script</span> type<span>="text/ng-template"</span> id<span>="/directiveGrid.html"</span>></span><span>
</span></span><span><span> <span><div class="panel panel-primary">
</span></span></span><span><span> <span><div class="panel-heading">Site Point Directive Grid</div>
</span></span></span><span><span> <span><table class="table">
</span></span></span><span><span> <span><thead>
</span></span></span><span><span> <span><tr>
</span></span></span><span><span> <span><th>FirstName</th>
</span></span></span><span><span> <span><th>Last Name</th>
</span></span></span><span><span> <span><th>Location</th>
</span></span></span><span><span> <span></tr>
</span></span></span><span><span> <span></thead>
</span></span></span><span><span> <span><tbody>
</span></span></span><span><span> <span><tr ng-repeat="employee in info">
</span></span></span><span><span> <span><td>{{ employee.firstName }}</td>
</span></span></span><span><span> <span><td>{{ employee.lastName }}</td>
</span></span></span><span><span> <span><td>{{ employee.location }}</td>
</span></span></span><span><span> <span></tr>
</span></span></span><span><span> <span></tbody>
</span></span></span><span><span> <span></table>
</span></span></span><span><span> <span></div>
</span></span></span><span><span></span><span><span></script</span>></span>
</span>Wenn wir uns die Vergleichskarte zwischen Komponente und Richtlinie der offiziellen Site ansehen, können wir sehen, dass der Umfang in Komponenten immer isoliert ist.
Also müssen wir die Option der Bindungen verwenden, um Daten an den Controller zu binden. Die Einschränkungsoption ist nicht mehr erforderlich, da die Komponenten nur auf Elemente beschränkt sind.
Hier ist der geänderte Code:
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span> </span><span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span> </span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span> </span><span><span><span></head</span>></span> </span><span><span><span><body</span>></span> </span> <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span> </span><span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
Die Bindungsinformationen werden an den Controller gebunden. Der Standard -Alias für den Controller ist $ Strg und in der Vorlage werden wir diese verwenden, um auf die Info -Eigenschaft zuzugreifen:
angular<span>.module('myApp', [])
</span> <span>.constant('employees', [{
</span> <span>firstName: 'Rima',
</span> <span>lastName: 'George',
</span> <span>location: 'San Francisco'
</span> <span>}, {
</span> <span>firstName: 'Shaun',
</span> <span>lastName: 'John',
</span> <span>location: 'Germany'
</span> <span>}, {
</span> <span>firstName: 'Rahul',
</span> <span>lastName: 'Kurup',
</span> <span>location: 'Bangalore'
</span> <span>}, {
</span> <span>firstName: 'Samson',
</span> <span>lastName: 'Davis',
</span> <span>location: 'Canada'
</span> <span>}, {
</span> <span>firstName: 'Shilpa',
</span> <span>lastName: 'Agarwal',
</span> <span>location: 'Noida'
</span> <span>}])
</span>
<span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span> $scope<span>.employees = employees;
</span> <span>}])
</span>Wenn Sie nun die Seite aktualisieren, sollten Sie die mit der MyComp -Komponente angezeigten Daten anzeigen können.
Siehe den Stift AngularJS 1.5 Demo von sitepoint (@sinepoint) auf CodePen.
Hinweis: AngularJS 2.0 ist noch in Beta. Die Version, die wir verwenden, ist Angular2.0.0-beta.8.
Ersetzen wir die vorhandene Version von AngularJs in unserer App durch einen Link zu Version 2.0 aus dem CDN und sehen Sie, ob etwas bricht:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>}
</span><span>})
</span>Nach dem Auffrischen der Seite wird auf der Seite nichts angezeigt. Wenn wir die Browserkonsole überprüfen, können wir auch ein paar Fehler sehen.
Wie Sie sehen, funktionierte unser Komponentencode nicht gut mit Angular 2.0!
Beginnen wir von Schein und sehen, wie die neue Version funktioniert. Dann versuchen wir, unsere Komponente zu portieren.
Während es möglich ist, mit Angular 1.x zu beginnen, indem das Framework mit einem einzigen Skript -Tag einbezogen wird, hat sich die Situation mit Angular 2.0 geändert. Wir brauchen ein paar andere Bibliotheken, um zu funktionieren. Während das Laden dieser separaten Skript -Tags für die Entwicklung in Ordnung ist, sollen sie als Teil eines Build -Prozessprozesses für die Produktion gebündelt werden.
Wenn wir uns den offiziellen Schnellanleitung ansehen, können wir feststellen, dass wir einige andere Bibliotheken und Entwicklungsabhängigkeiten benötigen, um mit 2.0 zu beginnen.
Erstellen wir einen Ordner namens AngularJS2.0Component und erstellen Sie eine Paket.json -Datei wie folgt:
<span><span><span><my-grid</span>></span><span><span></my-grid</span>></span> </span>
Die obige Datei zeigt alle Abhängigkeiten, die von AngularJS 2.0 Anwendung erforderlich sind. Speichern Sie die Änderungen und installieren Sie die erforderlichen Abhängigkeiten mit NPM:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>restrict: 'E'
</span> <span>}
</span><span>})
</span>Erstellen Sie einen Subordner mit dem Namen App und in einer Datei namens app.comPonent.js mit dem folgenden Code:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>restrict: 'E',
</span> <span>scope: {
</span> <span>info: '=info'
</span> <span>}
</span> <span>}
</span><span>})
</span>Im obigen Code verwenden wir den Angular -Core -Namespace ng.core, um eine Komponente zu erstellen. Wir haben einen Selektor für unsere Komponente als my-comp definiert. Wir verwenden dieselbe HTML, grid.html wie die Vorlage für unsere App. Wir haben unser Mitarbeiterobjekt im Konstruktor der Komponente definiert.
Erstellen Sie eine Datei namens main.js und fügen Sie im folgenden Code ein:
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span> </span><span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span> </span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span> </span><span><span><span></head</span>></span> </span><span><span><span><body</span>></span> </span> <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span> </span><span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
Dies fordert Angular an, die gerade erstellte Komponente zu laden.
Erstellen Sie als nächstes eine Datei namens Index.html außerhalb des App -Ordners und fügen Sie im folgenden Code ein:
angular<span>.module('myApp', [])
</span> <span>.constant('employees', [{
</span> <span>firstName: 'Rima',
</span> <span>lastName: 'George',
</span> <span>location: 'San Francisco'
</span> <span>}, {
</span> <span>firstName: 'Shaun',
</span> <span>lastName: 'John',
</span> <span>location: 'Germany'
</span> <span>}, {
</span> <span>firstName: 'Rahul',
</span> <span>lastName: 'Kurup',
</span> <span>location: 'Bangalore'
</span> <span>}, {
</span> <span>firstName: 'Samson',
</span> <span>lastName: 'Davis',
</span> <span>location: 'Canada'
</span> <span>}, {
</span> <span>firstName: 'Shilpa',
</span> <span>lastName: 'Agarwal',
</span> <span>location: 'Noida'
</span> <span>}])
</span>
<span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span> $scope<span>.employees = employees;
</span> <span>}])
</span>Die obige Index.html -Seite ist die Starter -Vorlage für AngularJS 2.0 -Anwendungen. Wir haben alle erforderlichen Abhängigkeiten aufgenommen, und innerhalb des Body -Tags haben wir unsere Komponente verwendet.
Speichern Sie die Änderungen und starten Sie den Server mit dem NPM -Start. In diesem Befehl wird ein lokaler Entwicklungsserver namens Lite-Server ausgeführt, der Index.html in einem Browser lädt.
Aber die Daten werden immer noch nicht angezeigt!
In AngularJS 2.0 ist die Syntax für das Schleifen etwas anders. Ändern Sie den Schleifenabschnitt in grid.html wie unten gezeigt:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>}
</span><span>})
</span>Speichern Sie die Änderungen und starten Sie den Server neu, und Sie sollten in der Lage sein, die in der App angezeigten Mitarbeiterdaten zu sehen.
Komponenten sind ein wesentlicher Bestandteil von AngularJS 2.0, und es wäre richtig zu sagen, dass es sich um ein Komponentenbasis handelt. Mit jeder neuen Version der 1.x -Linie rücken wir uns näher an die Entwicklung von Anwendungen mit Version 2.0 heran.
In diesem Tutorial haben wir eine AngularJS -Direktive mit Verison 1.4 des Frameworks erstellt. Wir haben die Richtlinie überarbeitet, um die Komponentensyntax von Version 1.5 zu nutzen. Schließlich haben wir es so aktualisiert, dass es mit Angular Version 2.0 funktioniert.
Für einen eingehenderen Blick auf die Migration Ihrer AngularJS-Apps sollten Sie den offiziellen Migrationshandbuch lesen. Angular 2 -Code kann auch in TypeScript und Dart geschrieben werden. Wenn Sie interessiert sind, empfehlen ich, den offiziellen Leitfaden für den Einstieg mit AngularJS 2 in TypeScript bzw. DART zu lesen.
Teilen Sie Ihre Gedanken und Vorschläge in den Kommentaren unten!
Wie kann ich meine Winkelanwendung testen? Ermöglicht Ihnen eine dynamische Testumgebung für Ihre Komponenten. Sie können Jasmine, ein verhaltensgetriebenes Entwicklungsrahmen zum Testen von JavaScript-Code, und Karma, einen Testläufer, verwenden. Angular unterstützt auch End-to-End-Tests mit dem Prognaktor. Bücher und Kurse. Die Angular -Community ist auch sehr aktiv und unterstützend, mit vielen Foren, Blogs und Stackoverflow -Fragen, die als Referenz zur Verfügung stehen.
Das obige ist der detaillierte Inhalt vonAktualisieren Sie Ihre App auf Angular 1.5 -Komponenten und darüber hinaus!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Der Unterschied zwischen Ankern und Zielen
Schauen Sie sich die zehn Kryptowährungen an, in die sich eine Investition lohnt
Einführung in parametrische Modellierungssoftware
So beheben Sie den Parsererror-Fehler
Was tun, wenn notepad.exe nicht reagiert?
Was bedeutet das Formatieren eines Mobiltelefons?
So öffnen Sie eine DMP-Datei
So verwenden Sie die Sortierfunktion
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
