La voie vers la transformation démo du framework d'application Web AngularUI_AngularJS

Objectif : appliquer des modèles AngularUI aux projets existants

Les étapes sont les suivantes :

Cliquez sur le menu pour modifier l'interface de démonstration

Découvrez comment angulaireUI charge toutes les pages Afin de définir un modèle de chargement personnalisé, retrouvez ce paragraphe dans demo/demo.js

Copier le code Le code est le suivant :

//Quand # vaut /, /scroll, etc., demandez la page
de 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});
});



Continuez la lecture du script d'exécution de demo.js

Faites glisser les éléments pour disparaître

Glissez et déposez pour changer de photo Contrôleur principal

L195 $rootScope.$on('$routeChangeStart', function(){}); et L199 $rootScope.$on('$routeChangeSuccess', function(){}); Les événements de liaison et la modification des événements de hachage peuvent déclencher le code ici. Après comparaison, nous avons constaté que les deux méthodes de base sont les mêmes. La différence est que routeChangeStart est déclenché en premier, puis routeChangeSuccess est déclenché.

​​​​​ Faire défiler la page de la liste : la barre de défilement charge les données $scope.scrollItems = scrollItems ; scrollItems est un tableau de liste ; faire défiler vers le bas (nécessite une actualisation déroulante)
Les données json dans la barre latérale du chat à droite indiquent si vous êtes en ligne ou non. Pour moi, je n'ai pas la possibilité d'utiliser la fonction de chat pour le moment
. Page de formulaire

Modifier le modèle d'amorçage d'origine

1. D'après l'étape 2 ci-dessus, nous savons que le chargement de la page est déterminé par deux facteurs :

Copier le code

Le code est le suivant : 1 chemin de base => base_url() 2 Chemin de page correspondant au hachage => Contrôleur/Méthode 3 Masquer index.php

/config/config.php $config['index_page'] = ''; //L29 est défini sur vide

.htaccess
RewriteEngine sur
RewriteCond $1 !^(lightapp|lightapp.php|index.php|public|robots.txt) #Autoriser lightapp|lightapp.php à accéder à
RewriteRule ^(.*)$ /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ée après cron
4 Modifier le routage des menus dans demo.js


2. Remplacez le chemin de la ressource , copiez 2 fichiers js et 3 fichiers css

3. Créez un nouveau répertoire de styles et de scripts pour stocker les js et css du projet

4. Copiez les polices du répertoire de polices dans le public
5. Copiez les pages home.html et sidebar.html dans le répertoire de vue

Résumé : à ce stade, le modèle de projet a appliqué angulaireUI.