Combinando Angularjs e CodeIgniter

Eu estou trabalhando em um site existente escrito no CodeIgniter e estamos olhando o uso do AngularJS para algumas páginas que exigem muita funcionalidade de frontend, mas não queremos replace todas as vistas do CodeIgniter (ao mesmo tempo).

Então, eu clique em um link que é controlado pelo roteador angular e é tratado pelo javascript, mas o próximo link pode ser um pedido “normal” que deve ser tratado pela estrutura CodeIgniter.

Existe alguma maneira elegante de combinar estes dois methods? Eu realmente não me importo com algumas sobrecargas extras do lado do cliente, porque o site ainda não está em execução.

Parece que você está procurando gradualmente fazer menos uso do roteamento do Code Igniter (CI) conforme seu aplicativo angular cresce. Isso não é difícil, mas requer muitos detalhes. O método funcionará depende da estrutura do seu projeto. Nota: removi index.php dos URLs do Code Igniter, então os caminhos abaixo podem ser diferentes do padrão.

1) Code Igniter instalado na raiz

Se CI estiver instalado na raiz do seu servidor, você pode criar uma pasta dentro de CI (por exemplo, eu tenho uma pasta “ng”). Seu projeto parecerá:

/controllers /models /ng (etc) /index.php (code igniter index file) 

coloque um arquivo .htaccess dentro /ng com o seguinte:

  Order allow, deny Allow from all 

Isso permite que os arquivos dentro do /ng sejam acessados ​​diretamente, em vez de enviar esses pedidos de volta através do sistema de roteamento da CI. Por exemplo, você pode carregar isso diretamente agora: example.com/ng/partials/angular-view.html

A página principal ainda será criada pelo Code Igniter, mas agora pode include resources angulares, como visualizações parciais, etc. Eventualmente, você pode replace a maioria do que o Code Igniter está fazendo simplesmente retornando uma página simples e tendo carga angular parcial visualizações de /ng como foi projetado para.

Este método é bom porque o Code Igniter pode controlar se a página inicial está carregada (através de algum código de autenticação do usuário no seu controlador CI). Se o usuário não estiver logado, eles serão redirecionados e nunca verão o aplicativo Angular.

2) Code Igniter no Diretório

Se CI estiver instalado em um diretório, como example.com/myapp/(code igniter) você pode simplesmente criar um diretório ao lado dele, example.com/myappNg/

  /myapp/ /myapp/controllers/ /myapp/models/ /myapp/(etc) /myapp/index.php (code igniter index file) /myappNg/ /myappNg/partials/ /myappNg/js/ /myappNg/(etc) 

Agora, no seu aplicativo Angular, você pode solicitar resources da CI, fazendo caminhos relativos à raiz do domínio, em vez de relativos ao aplicativo Angular. Por exemplo, em Angular, você não solicitará mais uma visão parcial da pasta partials/angular-view.html , em vez disso você quererá solicitar visualizações de CI /myapp/someResource . Observe o líder / . “SomeResource” pode retornar um documento html, ou JSON ou o que você estiver fazendo com o Code Igniter em primeiro lugar. Eventualmente, você pode replace o número de caminhos que fazem referência /myapp/ . Uma vez que você não use mais CI para nada, você pode simplesmente colocar seu /myappNg/ em /myapp/ e continuará a fazer referência aos seus caminhos em /myappNg/ .

TL; DR Faça o seu aplicativo Angular totalmente disponível e desacoplá-lo do Code Igniter. Avança gradualmente para usar vistas parciais angulares e outras fonts JSON em vez de ligar para páginas Code Igniter. Eventualmente, substitua seu ponto final do Code Igniter por um arquivo HTML que inicializa o Angular.

Editar: ortografia fixa

Nunca usei Angular – no entanto, isso pode ajudar.

Então, eu clique em um link controlado pelo roteador angular e é tratado pelo javascript

Este JavaScript faz um pedido do Ajax para um dos controladores do seu CI? Se assim for, a IC agora possui o método is_ajax_request() , que permite que você verifique se uma solicitação (POST ou GET) vem via ajax. Você pode prosseguir de forma diferente com base em um pedido proveniente do Ajax contra uma solicitação normal.

Guia do usuário ( parte inferior da página ): http://ellislab.com/codeigniter/user-guide/libraries/input.html

Espero que ajude!

Eu herdei um aplicativo CI e estou usando Angular com IC principalmente para solicitações de roteamento. No meu caso, não estou usando modelos angulares, então eu uso um parâmetro ” vazio, mas com um espaço para a opção de modelo na configuração $ routeProvider. Isso me permite fazer as solicitações habituais do CI ajax sem muita mudança para o código original do servidor.

 angular.module('my_app', []). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/', { template: " ", controller: my_routes.mainpage}). when('/design/:designId/:action', {template: " ", controller: my_routes.show_design}). when('/vote_design/:designId', {template: " ", controller: my_routes.vote_design}). otherwise({redirectTo: '/'}); }]); 

Sua melhor aposta é manter seu código de backend separado do código angular e usar o código CodeInginter como uma API

/ Codeigniter Code / Angular Code

Como o CodeIgniter vem com o seu recurso de compartilhamento de segurança, esta deve ser sua melhor opção

Peguei um site da CI de outro programador com o qual trabalho que está em licença por alguns meses. Nosso site é construído principalmente com muito angular devido à natureza de seu propósito. Nossa solução foi um pouco diferente.

Tudo isso que varia de acordo com a estrutura de CI padrão é uma dupla pastas: js\angular\controllers e js\angular\modules na pasta de aplicativos do CI, para armazenar todos os modelos angulares e os arquivos do controlador. Em seguida, carregue os documentos angulares na pasta da base do aplicativo.

Para além da resposta dada por Aaron Martin, também pode usá-lo como uma abordagem cliente-servidor.

Digamos que criamos 2 pastas na raiz do nosso projeto:

  1. Cliente

  2. Servidor

A pasta do cliente conterá todo o código do AngularJS e as bibliotecas do lado do cliente, incluindo as bibliotecas Bower e Npm. O roteamento do lado do cliente também será tratado pelo roteador AngularJS.

Haverá fábricas ou serviços que irão atuar como provedores de clientes angulares no lado do cliente. Esses arquivos conterão o código de envio de solicitação e recebendo resposta do lado do servidor.

Server Folder terá o código de Laravel ou CodeIgniter ou qualquer outro framework PHP. Você criará todas as APIs dos pedidos e desenvolverá a funcionalidade em conformidade. Daí a seção PHP (Diretório de servidor) no todo será armazenar todos os arquivos de mídia e arquivos de database. Além disso, também terá links de recebimento de feeds RSS e assim por diante.

O Cliente deve receber apenas toda a resposta no formato JSON ou XML quando solicitar em qualquer API no servidor.

Isso de acordo comigo é uma das melhores práticas para o desenvolvimento de Webapps.