Propósito: Aplicar plantillas AngularUi a los proyectos existentes
Los pasos son los siguientes:
Presione el menú para modificar la interfaz de demostración
Aprenda cómo Angularui carga todas las páginas. Para establecer una plantilla de carga personalizada, encuentre este párrafo en demo/demo.js
La copia del código es la siguiente:
// Cuando # es/,/scroll, etc., solicite la página de <base href = ""> + home.html en index.html
app.config (function ($ ruteProvider) {
$ 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});
});
Continuar leyendo el script de ejecución de Demo.js
Arrague el elemento desaparece
Arrastre y suelte para cambiar de imágenes
Controlador principal
L195 $ rootscope. $ On ('$ rutechangeStart', function () {}); y L199 $ ROOTSCOPE. $ ON ('$ Routechangesuccess', function () {}); Aprender a usar. $ ON () para vincular eventos y cambiar los eventos hash puede activar el código aquí. Después de la comparación, descubrí que los dos métodos básicos son los mismos. La diferencia es que RoutechangeStart se activa primero, y Routechangesuccess se desencadena más tarde.
Página de la lista de desplazamiento: la barra de desplazamiento Carga datos $ scope.scrollitems = scrollitems; Scrollitems es una variedad de listas; Desplácese hacia el evento inferior (requiere una actualización desplegable)
Los datos JSON en la barra lateral de chat a la derecha muestran si está en línea o no. Para mí, no tengo la capacidad de hacer la función de chat por el momento
Página de formulario
Cambie la plantilla de bootstrap original
1. Según el paso 2 anterior, hay dos factores que determinan la carga de la página:
La copia del código es la siguiente:
1 ruta base => base_url ()
2 ruta de página de hash correspondiente => controlador/método
3 Ocultar índice.php
/config/config.php $ config ['index_page'] = ''; // L29 está configurado para vaciar
.htaccess
RewriteEngine en
Rewritecond $ 1!^(LightApp | LightApp/.php | índice/.php | público | robots/.txt) #Alow LightApp | LightApp.php para acceder
Rewriterule ^(.*) $ /Index.php/$1 [l]
config.yaml
- Reescribir: if (! is_file () &&! is_dir ()) goto "index.php?%{query_string}"
# Si la URL no es un archivo ni un directorio, salte a index.php?%{QUERY_STRING} y no se puede colocar detrás de Cron
4 Modifique la ruta del menú en demo.js
2. Reemplace la ruta de recursos <? = __ public __?>, Copia 2 archivos JS y 3 CSS
3. Cree un nuevo estilo y directorio de guiones para almacenar los JS y CSS del proyecto
4. Copie las fuentes del directorio de fuentes al público
5. Copie el home.html, barra lateral.html página al directorio de vista
Resumen: En este punto, la plantilla del proyecto ha aplicado angularui.