AngularJS e CodeIgniter

Criando um CRUD com AngularJS e CodeIgniter

Integrar CodeIgniter com AngularJS foi um tutorial muito solicitado, então chegou a hora de mostrar como fazer essa integração, e para isso criaremos um CRUD com AngularJS e CodeIgniter.

Para essa integração utilizaremos um exemplo bem simples, mas funcional, que será a criação de um bloco de notas.

Iniciando o projeto com CodeIgniter

Para iniciar o projeto vamos criá-lo usando o Composer, como já foi visto em outros tutoriais aqui no portal.

Abra o terminal, navegue até o seu diretório web e execute o comando a seguir para que o projeto seja criado:

composer create-project bcit-ci/codeigniter codeigniter-angularjs --prefer-dist

Enquanto o projeto está sendo criado, você pode ir criando o banco de dados que será utilizado.

Abra o seu gerenciador de banco de dados e crie um banco chamado ci_angularjs. Nesse banco crie uma tabela chamada notas. Utilize a instrução SQL a seguir:

CREATE TABLE `notas` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`titulo` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`descricao` text COLLATE utf8_unicode_ci NOT NULL,
`criada_em` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Com o banco de dados e o projeto criados, vamos fazer as configurações iniciais.

Banco de dados

Abra o arquivo application/config/database.php e informe os dados de conexão com o seu banco de dados.

Rotas

Vai ser necessário fazer a configuração das rotas da aplicação, para isso abra o arquivo application/config/routes.php e configure as rotas conforme código a seguir:

Essas serão as rotas utilizadas no CRUD que será construído nesse tutorial.

Controlador para carregamento dos templates

Como se sabe o AngularJS faz uso de templates, e para que possamos utilizar a estrutura MVC do CodeIgniter para entregar ao AngularJS esses templates, vamos criar um controller para fazer esse gerenciamento.

No diretório application/controllers crie um arquivo chamado Templates.php e coloque nele o código a seguir:

Controlador para as operações de CRUD

Agora você irá criar um novo controlador chamado Notas.php, ele será o responsável por responder às requisições do AngularJS para as rotinas de CRUD.

View principal da aplicação

Para a view principal da aplicação, utilize o arquivo já existente, que se encontra em application/views/welcome_messages.php e substitua o seu conteúdo pelo do código a seguir:

Criando os templates

Para os templates, crie um diretório chamado templates dentro de application/views e crie os arquivos de template conforme os códigos a seguir:

home.html

<h2>Dashboard</h2>

notas.html

dirPagination.html

Agora que toda a parte relacionada ao CodeIgniter já foi criada, é hora de criar a codificação para as rotinas do AngularJS.

Integrando o AngularJS ao CodeIgniter

Para iniciar crie um diretório chamado app na raiz do projeto. É nesse diretório que firacão os aruqivos JavaScript do AngularJS.

Routes.js

O primeiro arquivo a ser criado será o routes.js, que é o responsável por definir as rotas da aplicação para o AngularJS, assim como temos o arquivo routes.php para o CodeIgniter.

Crie esse arquivo dentro do diretório app, conforme o código a seguir:

NotaController.js

Esse arquivo é o controlador da aplicação no AngularJS, ele contém as rotinas da aplicação como recuperação dos dados para exibição da lista, envio dos dados para que sejam salvos, recuperação dos dados para edição, entre outras.

Crie um diretório chamado controllers dentro de app e salve o arquivo dentro dele. Veja a seguir o código do controlador:

Agora vamos criar alguns arquivos auxiliares para organizar melhor as funcionalidades:

myHelper.js

Crie um diretório chamado helper dentro de app e salve o arquivo conforme o código a seguir:

myServices.js

Crie um diretório chamado services dentro de app e salve o arquivo conforme o código a seguir:

dirPagination.js

Crie um diretório chamado packages dentro de app e salve o arquivo conforme o código a seguir:

Pronto! Agora é só você executar sua aplicação.

Viu como é simples e rápido criar um CRUD com Angular JS e CodeIgniter?

Até a próxima!

Veja o código-fonte no GitHub