Objetivo: Aplique modelos Angularui aos projetos existentes
As etapas são as seguintes:
Pressione o menu para modificar a interface de demonstração
Aprenda como o Angularui carrega todas as páginas. Para definir um modelo de carregamento personalizado, encontre este parágrafo em demonstração/demonstração.js
A cópia do código é a seguinte:
// Quando # é/,/roll, etc., solicite a página de <base href = ""> + home.html em index.html
App.config (função ($ routeProvider) {
$ routeProvider.when ('/', {templateurl: 'home.html', Reloadonsearch: false});
$ routeProvider.when ('/scroll', {templateurl: 'scroll.html', relloadonsearch: false});
$ routeProvider.When ('/Toggle', {templateurl: 'Toggle.html', Reloadonsearch: false});
$ routeProvider.when ('/tabs', {templateurl: 'tabs.html', ReloDonsearch: false});
$ routeProvider.when ('/Accordeion', {templateurl: 'Accentiion.html', Reloadonsearch: false});
$ routeProvider.when ('/Sobreposição', {templateurl: 'sobrevery.html', relloadonsearch: false});
$ routeProvider.when ('/forms', {templateurl: 'forms.html', Reloadonsearch: false});
$ routeProvider.when ('/suspenso', {templateurl: 'DropDown.html', Reloadonsearch: false});
$ routeProvider.when ('/drag', {templateurl: 'drag.html', ReloDonsearch: false});
$ routeProvider.when ('/carousel', {templateurl: 'carousel.html', reclóssionsearch: false});
});
Continue lendo o script de execução do Demo.js
O item de arrasto desaparece
Arraste e solte para trocar de imagens
Controlador Principal
L195 $ Rootscope. $ ON ('$ ROUTECHANGESTART', function () {}); e L199 $ Rootscope. $ ON ('$ ROUTECHANGESUCCESS', function () {}); Aprender a usar. $ On () para vincular eventos e alterar eventos de hash pode acionar o código aqui. Após a comparação, descobri que os dois métodos básicos são os mesmos. A diferença é que o RoutechanGestart é acionado primeiro e o RouteChangesuccess é acionado posteriormente.
Página da lista de rolagem: barra de rolagem carrega dados $ scope.Scrollitems = scrollitems; Scrollitems é uma variedade de listas; Role para o evento inferior (requer uma atualização de puxar)
Os dados JSON na barra lateral de bate -papo à direita mostram se estão online ou não. Para mim, não tenho a capacidade de fazer a função de bate -papo por enquanto
Página de formulário
Altere o modelo original de bootstrap
1. De acordo com a etapa 2 acima, existem dois fatores que determinam o carregamento da página:
A cópia do código é a seguinte:
1 caminho base => base_url ()
2 HASH PAGA CAIXO CORRESPONDENTE => Controlador/Método
3 ocultar index.php
/config/config.php $ config ['index_page'] = ''; // L29 está definido para esvaziar
.htaccess
RewriteEngine
Rewritecond $ 1!^(LightApp | LightApp/.php | index/.php | public | robots/.txt) #ouls LightApp | LightApp.php para acessar
Rewriture ^(.*) $ /Index.php/$1 [l]
config.yaml
- reescrever: if (! is_file () &&! is_dir ()) goto "index.php?%{query_string}"
# Se o URL não for um arquivo nem um diretório, pule para index.php?%{Query_string} e não pode ser colocado atrás de Cron
4 Modifique a rota do menu em Demo.js
2. Substitua o caminho do recurso <? = __ público __?>, Copie 2 JS e 3 arquivos CSS
3. Crie um novo estilo de estilo e script para armazenar o JS e CSS do projeto
4. Copie as fontes do diretório de fontes para o público
5. Copie a página Home.html, barra lateral.html para o diretório de visualização
Resumo: Neste ponto, o modelo de projeto Angularui aplicado.