Objectif: Appliquer les modèles angularUi aux projets existants
Les étapes sont les suivantes:
Appuyez sur le menu pour modifier l'interface de démonstration
Découvrez comment AngularUi charge toutes les pages. Afin de définir un modèle de chargement personnalisé, trouvez ce paragraphe dans Demo / Demo.js
La copie de code est la suivante:
// lorsque # est /, / scroll, etc., demandez la page de <base href = ""> + home.html dans index.html
app.config (function ($ RouteProvider) {
$ RouteProvider.When ('/', {templateUrl: 'home.html', reloadonsearch: false});
$ rateprovider.when ('/ scroll', {templateUrl: 'scroll.html', reloadonsearch: false});
$ rateprovider.when ('/ toggle', {templateUrl: 'toggle.html', reloadonsearch: false});
$ rateprovider.when ('/ tabs', {templateUrl: 'tabs.html', reloadonsearch: false});
$ rateprovider.when ('/ accordéon', {templateUrl: 'accordéon.html', reloadonsearch: false});
$ rateprovider.when ('/ superposition', {templateUrl: 'superlay.html', reloadonsearch: false});
$ RouteProvider.When ('/ Forms', {templateUrl: 'forms.html', reloadonsearch: false});
$ rateprovider.when ('/ dropdown', {templateUrl: 'dropdown.html', reloadonsearch: false});
$ rateprovider.when ('/ drag', {templateUrl: 'drag.html', reloadonsearch: false});
$ RouteProvider.When ('/ Carousel', {templateUrl: 'carrousel.html', reloadonsearch: false});
});
Continuez à lire le script d'exécution de Demo.js
L'élément de glisser disparaît
Faites glisser et déposez pour changer d'images
Contrôleur principal
L195 $ rootscope. $ On ('$ routechangestart', function () {}); et l199 $ rootscope. $ on ('$ routechangeSuccess', function () {}); Apprendre à utiliser. $ On () pour lier les événements et modifier les événements de hachage peut déclencher le code ici. Après comparaison, j'ai constaté que les deux méthodes de base sont les mêmes. La différence est que RouteChangeStart est déclenché en premier et que RoutechangeSuccess est déclenché plus tard.
Page de liste de défilement: la barre de défilement charge des données $ SCOPE.SCROLLITEMS = ScrolLitems; ScrolLitems est un tableau de listes; Faites défiler vers l'événement inférieur (nécessite un rafraîchissement réduit)
Les données JSON dans la barre latérale de chat à droite montrent si elle est en ligne ou non. Pour moi, je n'ai pas la possibilité de faire une fonction de chat pour le moment
Page de formulaire
Modifier le modèle d'amorçage d'origine
1. Selon l'étape 2 ci-dessus, il y a deux facteurs qui déterminent le chargement de la page:
La copie de code est la suivante:
1 chemin de base => base_url ()
2 Chemin de page correspondant de hachage => contrôleur / méthode
3 masquer index.php
/config/config.php $ config ['index_page'] = ''; // L29 est défini sur vide
.htaccess
Réécrire
REWRITECOND 1 $! ^ (LightApp | LightApp / .php | index / .php | public | robots / .txt) #Allow LightApp | LightApp.Php pour accéder
REWRITREULE ^ (. *) $ /Index.php/$1 [l]
config.yaml
- réécriture: if (! is_file () &&! is_dir ()) goto "index.php?% {query_string}"
# Si l'URL n'est ni un fichier ni un répertoire, passez à index.php?% {Query_string} et ne peut pas être placé derrière Cron
4 Modifiez l'itinéraire du menu dans Demo.js
2. Remplacez le chemin des ressources <? = __ public __?>, Copier 2 fichiers JS et 3 CSS
3. Créez un nouveau répertoire de style et de script pour stocker les JS et CSS du projet
4. Copiez les polices de répertoire de police au public
5. Copiez la page Home.html, latétique latérale.html dans le répertoire de la vue
Résumé: À ce stade, le modèle de projet a appliqué AngularUi.