简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Programmierrichtlinien zum Erstellen von Single-Page-Anwendungen mit AngularJS_AngularJS

Programmierrichtlinien zum Erstellen von Single-Page-Anwendungen mit AngularJS_AngularJS

WBOY
WBOYOriginal
2016-05-16 15:53:551478Durchsuche

Übersicht

Single-Page-Apps werden heutzutage immer beliebter. Jede Website, die das Verhalten einer Single-Page-Anwendung emuliert, kann das Gefühl einer Mobil-/Tablet-Anwendung vermitteln. Angular kann uns dabei helfen, solche Anwendungen einfach zu erstellen
Einfache Anwendung

Wir werden eine einfache App erstellen, die die Seiten „Home“, „Über uns“ und „Kontakt“ umfasst. Obwohl Angular für die Erstellung komplexerer Anwendungen konzipiert ist, demonstriert dieses Tutorial viele der Konzepte, die wir in größeren Projekten benötigen.
Ziel

  • Einseitige Bewerbung
  • Keine Aktualisierungsseitenänderungen
  • Jede Seite enthält unterschiedliche Daten

Obwohl die oben genannten Funktionen mit Javascript und Ajax erreicht werden können, kann Angular in unserer Anwendung die Handhabung für uns erleichtern.
Dokumentstruktur

  • - script.js                                                                                                                                                 
    • - index.html                                                                           
  • - Seiten                          59ded3f037c60575a03a81eff4bb8a7f
  • ----- home.html
  • ----- about.html
  • ----- contact.html

HTML-Seite
Dieser Teil ist relativ einfach. Wir verwenden Bootstrap und Font Awesome. Öffnen Sie Ihre index.html-Datei und dann verwenden wir die Navigationsleiste, um ein einfaches Layout hinzuzufügen. 



<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
 <!-- SCROLLS -->
 <!-- load bootstrap and fontawesome via CDN -->
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
 
 <!-- SPELLS -->
 <!-- load angular via CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
 <script src="script.js"></script>
</head>
<body>
 
  <!-- HEADER AND NAVBAR -->
  <header>
    <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="/">Angular Routing Example</a>
      </div>
 
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
        <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
        <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
      </ul>
    </div>
    </nav>
  </header>
 
  <!-- MAIN CONTENT AND INJECTED VIEWS -->
  <div id="main">
 
    <!-- angular templating -->
    <!-- this is where content will be injected -->
 
  </div>
 
  <!-- FOOTER -->
  <footer class="text-center">
    View the tutorial on <a href="http://scotch.io/tutorials/angular-routing-and-templating-tutorial">Scotch.io</a>
  </footer>
 
</body>
</html>
In Seiten-Hyperlinks verwenden wir „#“. Wir möchten nicht, dass der Browser denkt, dass wir tatsächlich auf about.html und contact.html verlinken.

Winkelanwendung
Modelle und Controller
An diesem Punkt sind wir bereit, unsere Anwendung einzurichten. Lassen Sie uns zunächst das Winkelmodell und den Controller erstellen. Weitere Informationen zu Modellen und Controllern finden Sie in der Dokumentation.

Zuerst müssen wir unser Modell und unseren Controller in Javascript erstellen, wir fügen diesen Vorgang in script.js ein: 



// script.js
 
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', []);
 
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
 
  // create a message to display in our view
  $scope.message = 'Everyone come and see how good I look!';
});
Als nächstes fügen wir Modelle und Controller zu unserer HTML-Seite hinzu, damit Angular weiß, wie wir unsere Anwendung booten. Um zu testen, ob die Funktionalität funktioniert, zeigen wir auch den Wert einer von uns erstellten Variablen namens $scope.message an. 



<!-- index.html -->
<!DOCTYPE html>
 
<!-- define angular app -->
<html ng-app="scotchApp">
<head>
 <!-- SCROLLS -->
 <!-- load bootstrap and fontawesome via CDN -->
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
 
 <!-- SPELLS -->
 <!-- load angular via CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script>
 <script src="script.js"></script>
</head>
 
<!-- define angular controller -->
<body ng-controller="mainController">
 
...
 
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
  {{ message }}
 
  <!-- angular templating -->
  <!-- this is where content will be injected -->
</div>
In der Haupt-Div-Ebene können wir jetzt die von uns erstellte Nachricht sehen. Nachdem unsere Modelle und Controller nun eingerichtet sind und Angular ordnungsgemäß ausgeführt wird, werden wir damit beginnen, diese Ebene zum Anzeigen verschiedener Seiten zu verwenden.

Fügen Sie die Seite in das Hauptlayout ein

ng-view ist eine Winkelanweisung, die verwendet wird, um die Vorlage der aktuellen Route (/home, /about oder /contact) einzuschließen. Sie ruft die Datei basierend auf der spezifischen Route ab und fügt sie in das Hauptlayout (Index) ein .html ).

Wir werden der Site in div#main ng-view-Code hinzufügen, um Angular mitzuteilen, wo die von uns gerenderte Seite platziert werden soll.



<!-- index.html -->
...
 
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
 
  <!-- angular templating -->
  <!-- this is where content will be injected -->
  <div ng-view></div>
 
</div>
 
...
Routen und Ansichten konfigurieren

Da wir eine Single-Page-Anwendung erstellen und nicht möchten, dass die Seite aktualisiert wird, verwenden wir Angular-Routing-Funktionen.

Schauen wir uns unsere Angular-Dateien an und fügen sie unserer App hinzu. Wir werden $routeProvider in Angular verwenden, um unser Routing zu verwalten. Auf diese Weise verarbeitet Angular alle magischen Anforderungen, indem es eine neue Datei abruft und in unser Layout einfügt.

AngularJS 1.2 und Routing

Nach Version 1.1.6 ist das ngRoute-Modell nicht mehr in Angular enthalten. Sie müssen das Modell verwenden, indem Sie es am Anfang des Dokuments deklarieren. Dieses Tutorial wurde für AngularJS1.2 aktualisiert: 



// script.js
 
// create the module and name it scotchApp
  // also include ngRoute for all our routing needs
var scotchApp = angular.module('scotchApp', ['ngRoute']);
 
// configure our routes
scotchApp.config(function($routeProvider) {
  $routeProvider
 
    // route for the home page
    .when('/', {
      templateUrl : 'pages/home.html',
      controller : 'mainController'
    })
 
    // route for the about page
    .when('/about', {
      templateUrl : 'pages/about.html',
      controller : 'aboutController'
    })
 
    // route for the contact page
    .when('/contact', {
      templateUrl : 'pages/contact.html',
      controller : 'contactController'
    });
});
 
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
  // create a message to display in our view
  $scope.message = 'Everyone come and see how good I look!';
});
 
scotchApp.controller('aboutController', function($scope) {
  $scope.message = 'Look! I am an about page.';
});
 
scotchApp.controller('contactController', function($scope) {
  $scope.message = 'Contact us! JK. This is just a demo.';
});
Jetzt haben wir unsere Route über $routeProvider definiert. Durch die Konfiguration werden Sie feststellen, dass Sie bestimmte Routen, Vorlagendateien und sogar Controller verwenden können. Bei diesem Ansatz verwendet jeder Teil unserer Anwendung einen Angular-Controller und eine eigene Ansicht.

Saubere URL: Angular fügt standardmäßig ein Nummernzeichen in die URL ein. Um dies zu vermeiden, müssen wir die HTML-Verlaufs-API mit $locationProvider aktivieren. Dadurch werden Hashes entfernt und schöne URLs erstellt. Unsere Homepage ruft die Datei „home.html“ ab. Wenn wir nun unsere App ansehen und auf die Navigation klicken, ändert sich unser Inhalt wie gewünscht.


Um dieses Tutorial abzuschließen, müssen wir nur die Seiten definieren, die eingefügt werden. Wir werden auch dafür sorgen, dass auf jeder von ihnen Meldungen von dem ihnen zugeordneten Controller angezeigt werden.



Lokal ausführen: Angular Routing funktioniert nur in der Umgebung, die Sie dafür festgelegt haben. Sie müssen sicherstellen, dass Sie http://localhost oder eine andere Art von Umgebung verwenden. Andernfalls wird Angular sagen, dass domänenübergreifende Anforderungen HTTP unterstützen.

Animation für Angular-Anwendungen

Sobald Sie das gesamte Routing abgeschlossen haben, können Sie mit Ihrer Site spielen und Animationen hinzufügen. Dazu müssen Sie das von Angular bereitgestellte ngAnimate-Modul verwenden Animation zum animierten Wechseln der Ansichten
SEO in der Single-Page-App

Idealerweise könnte diese Technik in einer Anwendung verwendet werden, bei der der Benutzer angemeldet ist. Sie möchten sicherlich nicht, dass Seiten, die für einen bestimmten Benutzer privat sind, von Suchmaschinen indiziert werden. Beispielsweise möchten Sie nicht, dass Ihr Leserkonto, Ihre Facebook-Anmeldeseite oder Ihre Blog-CMS-Seite indiziert werden.

Wenn Sie SEO für Ihre App durchführen möchten, wie können Sie dann SEO für Apps/Websites effektiv gestalten, die JS zum Erstellen von Seiten verwenden? Suchmaschinen haben es schwer, diese Apps zu verarbeiten, da der Inhalt dynamisch vom Browser erstellt wird und für Crawler unsichtbar.

Machen Sie Ihre App SEO-freundlich

Die Techniken, die js Single-Page-Anwendungen SEO-freundlich machen, erfordern eine regelmäßige Wartung. Gemäß den offiziellen Google-Empfehlungen müssen Sie wie folgt HTML-Snapshots erstellen:

  • Der Crawler findet eine benutzerfreundliche URL (http://scotch.io/seoFriendly#key=value)
  • Anschließend fordert der Crawler den Server nach dem Inhalt an, der dieser URL entspricht (in einer speziell modifizierten Weise)
  • Der Webserver verwendet einen HTML-Snapshot, um den Inhalt zurückzugeben
  • HTML-Snapshots werden von Crawlern verarbeitet
  • Dann wird in den Suchergebnissen die Original-URL angezeigt

Weitere Informationen zu diesem Prozess finden Sie im AJAX Crawler von Google und in der Anleitung zum Erstellen von HTML-Snapshots.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So stellen Sie sicher, dass setTimeout in JavaScript die Fähigkeiten von Chain Operations_Javascript unterstütztNächster Artikel：So stellen Sie sicher, dass setTimeout in JavaScript die Fähigkeiten von Chain Operations_Javascript unterstützt

In Verbindung stehende Artikel

Mehr sehen