Zweck: Wenden Sie AngularUi -Vorlagen auf bestehende Projekte an
Die Schritte sind wie folgt:
Drücken Sie das Menü, um die Demo -Schnittstelle zu ändern
Erfahren Sie, wie Angularui alle Seiten lädt. Um eine benutzerdefinierte Ladevorlage festzulegen, finden Sie diesen Absatz in Demo/Demo.js
Die Codekopie lautet wie folgt:
// Wenn # ist/,/scroll usw., fordere die Seite von <base href = ""> + home.html in index.html an
app.config (Funktion ($ routeProvider) {
$ routeProvider.when ('/', {templateurl: 'home.html', reloadonsearch: false});
$ routeProvider.when ('/scroll', {templateurl: 'scroll.html', reloadonsearch: false});
$ routeProvider.when ('/Toggle', {templateurl: 'Toggle.html', ReloadonSearch: false});
$ routeProvider.when ('/tabs', {templateurl: 'tab.html', reloadonsearch: false});
$ routeProvider.when ('/akkorion', {templateurl: 'accordion.html', reloadonSearch: false});
$ routeProvider.when ('/overlay', {templateurl: 'overlay.html', reloadonSearch: false});
$ routeProvider.when ('/forms', {templateurl: 'forms.html', reloadonsearch: false});
$ routeProvider.when ('/Dropdown', {templateurl: 'dropdown.html', reloadonsearch: false});
$ routeProvider.when ('/drag', {templateurl: 'drag.html', reloadonsearch: false});
$ routeProvider.when ('/carousel', {templateurl: 'Carousel.html', ReloadonSearch: false});
});
Lesen Sie weiter das Ausführungsskript von Demo.js
Dragartikel verschwindet
Drag & Drop, um die Bilder zu wechseln
Hauptcontroller
L195 $ rootscope. und L199 $ rootscope. $ on ('$ routechangesuccess', function () {}); Lernen zu verwenden. $ On (), um Ereignisse zu binden und Hash -Ereignisse zu ändern, kann den Code hier auslösen. Nach dem Vergleich fand ich, dass die beiden Grundmethoden gleich sind. Der Unterschied besteht darin, dass RoutechangEnestart zuerst ausgelöst wird und Routechangesuccess später ausgelöst wird.
SCROLL LISTE SEITE: Scroll -Balken lädt Daten $ scope.scrollItems = scrollItems; ScrollItems ist eine Reihe von Listen; Scrollen Sie zum unteren Ereignis (erfordert eine Pulldown-Aktualisierung)
Die JSON -Daten in der Chat -Seitenleiste in der rechten Seite zeigen, ob sie online ist oder nicht. Für mich habe ich vorerst nicht die Möglichkeit, Chat -Funktion zu machen
Formseite
Ändern Sie die ursprüngliche Bootstrap -Vorlage
1. Nach Schritt 2 oben gibt es zwei Faktoren, die die Belastung der Seite bestimmen:
Die Codekopie lautet wie folgt:
1 Basispfad => Base_url ()
2 Hash entsprechend Seitenpfad => Controller/Methode
3 Index ausblenden.php
/config/config.php $ config ['index_page'] = ''; // l29 ist auf leer eingestellt
.htaccess
Umschreiber auf
Umschreiben
Rewriterule ^(.*) $ /Idex.php/$1 [l]
config.yaml
- Umschreiben: if (! is_file () &&! is_dir ()) goto "index.php?%{query_string}"
# Wenn die URL weder eine Datei noch ein Verzeichnis ist, springen Sie zu index.php?%{Query_string} und kann nicht hinter Cron gelegt werden
4 Ändern Sie die Menüroute in Demo.js
2. Ersetzen Sie den Ressourcenpfad <= __ public __?>, Kopieren Sie 2 JS- und 3 CSS -Dateien
3. Erstellen Sie einen neuen Stil- und Skriptverzeichnis, um die JS und CSS des Projekts zu speichern
4. Kopieren Sie die Schriftarten der Schriftart an die Öffentlichkeit
5. kopieren
Zusammenfassung: Zu diesem Zeitpunkt hat die Projektvorlage Angularui angewendet.