Heim > Web-Frontend > js-Tutorial > Der Weg zur Demo-Transformation des Webapp-Frameworks AngularUI_AngularJS

Der Weg zur Demo-Transformation des Webapp-Frameworks AngularUI_AngularJS

WBOY
Freigeben: 2016-05-16 16:25:19
Original
1187 Leute haben es durchsucht

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.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage