Der Weg zur Demo-Transformation des Webapp-Frameworks AngularUI_AngularJS

Zweck: AngularUI-Vorlagen auf bestehende Projekte anwenden

Die Schritte sind wie folgt:

Klicken Sie auf das Menü, um die Demo-Oberfläche zu ändern

Erfahren Sie, wie AngularUI alle Seiten lädt. Um eine benutzerdefinierte Ladevorlage festzulegen, finden Sie diesen Absatz in demo/demo.js

Code kopieren Der Code lautet wie folgt:

//Wenn # /, /scroll usw. ist, fordern Sie die Seite
von home.html in index.html an app.config(function($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: 'tabs.html', reloadOnSearch: false}); $routeProvider.when('/accordion', {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

Drag-Elemente verschwinden

Bilder per Drag & Drop wechseln Hauptcontroller

L195 $rootScope.$on('$routeChangeStart', function(){}); und L199 $rootScope.$on('$routeChangeSuccess', function(){}); Bindungsereignisse und sich ändernde Hash-Ereignisse können den Code hier auslösen. Nach dem Vergleich haben wir festgestellt, dass die beiden grundlegenden Methoden gleich sind. Der Unterschied besteht darin, dass zuerst routeChangeStart und dann routeChangeSuccess ausgelöst wird.

​​​​​ Scroll-Listenseite: Scroll-Leiste lädt Daten $scope.scrollItems = scrollItems; scrollItems ist ein Listen-Array zum Scrollen nach unten (erfordert Pulldown-Aktualisierung)
Die JSON-Daten in der Chat-Seitenleiste auf der rechten Seite zeigen an, ob Sie online sind oder nicht. Für mich besteht derzeit keine Möglichkeit, die Chat-Funktion zu nutzen
Formularseite

Ändern Sie die ursprüngliche Bootstrap-Vorlage

1. Aus Schritt 2 oben wissen wir, dass das Laden der Seite von zwei Faktoren bestimmt wird:

Code kopieren

Der Code lautet wie folgt: 1 Basispfad => base_url() 2 Seitenpfad entsprechend Hash => Controller/Methode 3 index.php ausblenden

/config/config.php $config['index_page'] = ''; //L29 ist auf leer gesetzt

.htaccess
RewriteEngine auf
RewriteCond $1 !^(lightapp|lightapp.php|index.php|public|robots.txt) #Lightapp|lightapp.php den Zugriff auf
erlauben RewriteRule ^(.*)$ /index.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 können nicht nach cron
platziert werden 4 Ändern Sie die Menüführung in demo.js


2. Ersetzen Sie den Ressourcenpfad , kopieren Sie 2 JS- und 3 CSS-Dateien

3. Erstellen Sie ein neues Stil- und Skriptverzeichnis, um die JS- und CSS-Dateien des Projekts zu speichern

4. Kopieren Sie das Schriftartenverzeichnis in den öffentlichen Bereich
5. Kopieren Sie die Seiten home.html und sidebar.html in das Ansichtsverzeichnis

Zusammenfassung: Zu diesem Zeitpunkt hat die Projektvorlage AngularUI angewendet.