entre Desarrolladores

Question

Buenas Tardes, tengo mi server en un hosting de apache con php y quiero tener programado un api-rest por ejemplo:
www.misitio.com/api -> aqui todo lo relacionado con el api
www.misitio.com/(cualquier otra cosa) -> lo carga el sitio sin usar codeigniter, solamente con html,css y Angular
quiero que quede de esa forma, que el php solo se usa en el api y en más ningun lugar de tal manera que si en un futuro cambiase el api por nodejs no tenga que cambiarle nada al front-end. Creo de que debo configurar el .htacces pero no se como hacer las direcciones de tal manera que el api con codeigniter no se meta con las cosas que no son para el api y que el front-end sea solamente con angular,html y css3 si usar ni un codigo de php.
Saludos Dairon

Answer 1

2 Respuestas

dairon · Answer 2 · 2015-06-27T13:22:11+0000

Hace un tiempo trabaje con Codeigniter y cuando se me dió por hacer un REST server hubo varias cosas que modificar en codeigniter, actualmente estoy con un proyecto similar al tuyo trabajando con angular.js, laravel y tecnologías extras, laravel me pareció muy flexible para ser un REST server lo contrario a lo que me pareció Codeigniter.

Vamos a ver, si te sirve de algo te diré como estructuré mi aplicación, como tu usas codeigniter intentaré acoplarlo a la estructura que tengo yo con laravel.

yo usaré bower para administrar los recursos.
la estructura de angular, puede estar basada en esta guía de estilos: https://github.com/johnpapa/angular-styleguide/blob/master/i18n/es-ES.md
si tienes la posibilidad de usar gulp, te ayudaría mucho a manejar tus recursos, minificar, copiar, unir, etc.
para esto yo opté por usar esta librería: https://github.com/chriskacerguis/codeigniter-restserver

la estructura puede ser esta:

api/
    application/
        controllers/
            User.php
    system/
   .htaccess
    index.php
assets/
    css/
        app.css
    js/
        controllers/
            main.js
            home.js
        directives/
        filters/
        services/
            user.js
    app.module.js
    app.config.js
    app.routes.js
index.html

el .htaccess en /api/application contendrá esto:

RewriteEngine on
RewriteCond $1 !^(index\.php)
RewriteRule ^(.*)$ index.php/$1 [L]

ahora puedes acceder a /api/ sin problema.

Ahora vamos a crear nuestro layout. /index.html

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <script>document.write('<base href="http://mipagina.com/" />')</script>
    <meta charset="UTF-8">
    <title>Angular.js & Codeigniter ♥</title>
    <!-- le css -->
    <link rel="stylesheet" href="./assets/vendor/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/app.css">
</head>
    <body>
        <div id="main" ng-controller="MainController as mainController">
            <div ng-view></div>
        </div>
    </body>

    <!-- le scripts -->
    <script type="text/javascript" src="./assets/vendor/angular/angular.min.js"></script>
    <script type="text/javascript" src="./assets/vendor/angular-route/angular-route.min.js"></script>
    <script type="text/javascript" src="./assets/js/app.module.js"></script>
    <script type="text/javascript" src="./assets/js/app.config.js"></script>
    <script type="text/javascript" src="./assets/js/app.routes.js"></script>
    <script type="text/javascript" src="./assets/js/services/user.js"></script>
    <script type="text/javascript" src="./assets/js/controllers/main.js"></script>
    <script type="text/javascript" src="./assets/js/controllers/home.js"></script>
</html>

esta linea: <script>document.write('<base href="http://mipagina.com/" />')</script> ayuda a angular a definir la ruta base para los templates y las rutas, necesario cuando activas el modo html5 en las rutas.

definamos nuestra aplicacion, la configuracion, las rutas y el modulo.

/assets/js/app.module.js:

(function() {
    'use strict';

    angular.module('app', [
        /* ng modules */
        'ngRoute'
        /* vendor modules */
    ]);

}());

/assets/js/app.routes.js:

(function() {
    'use strict';

    angular
        .module('app')
        .constant('routes', getRoutes())
        .config(['$routeProvider', 'routes', routesConfig]);

    function routesConfig($routeProvider, routes) {

        angular.forEach(routes, function(config, route) {
            $routeProvider.when(route, config);
        });

        $routeProvider.otherwise('/');
    }

    function getRoutes () {
        return {
            '/' : {
                templateUrl: 'assets/partials/home.html',
                controller: 'HomeController',
                controllerAs: 'home'
            }
        };
    }

}());

creemos un controlador en nuestro servidor, será por ejemplo Users.php:

<?php defined('BASEPATH') OR exit('No direct script access allowed');

require_once(APPPATH . 'libraries/REST_Controller.php');

class Users extends REST_Controller {

    public function index_get()
    {

    }

    public function all_get()
    {
        $this->response(array(
            array('id' => 1, 'username' => 'white'),
            array('id' => 2, 'username' => 'demo'),
            array('id' => 3, 'username' => 'john doe')
        ));
    }
}

Ahora al acceder a /api/users/all podrás ver la respuesta en json, o en xml, en angular se enviara la cabecera: Accept: application/json por lo que recibiremos la respuesta en json.

Ahora para usar el modo html 5 con angular ( urls amigables ) crearas un .htaccess en la raiz con este contenido:

Options -Indexes
RewriteEngine on

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

si deseas ver el proyecto completo de ejemplo, ya que en este sitio los caracteres son limitados para las respuestas, te dejo el link de descarga:

https://www.dropbox.com/s/kxvyt6i5txrsvax/codeigniterInLovingWithAngularjs.tar.gz?dl=0

el proyecto lo tendrías que ver asi:

enter image description here

http://i.imgur.com/PxBXxzE.png

white realmente esa respuesta tuya me ha dejado sin palabras, cuanto tiempo me tomará aprender tanto jajaja, muchas gracias mano.
Saludos desde Cuba
White, exelente el ejemplo que compartiste en dropbox ya me funciona.
Gracias

Answer 3 · 2015-06-27T04:13:31+0000

Hola Dairón,

para hacer lo que decís no te hace falta ninguna configuración del server ni htaccess

Bastaría con que en el espacio público del server crees un directorio llamado /api y pongas ahí todo el código para implementar las peticiones y respuestas que te hagan falta.

Desde el punto de vista de la programación, lo único que tenés que hacer es que el código dentro de /api no acceda a ningún código fuera de ese directorio para funcionar, de esta manera lográs que sea independiente del resto y podés cambiarlo sin afectar a las otras partes.

Via htaccess no se puede determinar que la llamada sea para la API o no sin modificar el código de las aplicaciones (por ejemplo pasando un parámetro $_GET extra que sirva para distinguirlas). Si tenés más de una API, ponelas en directorios diferentes. API es un concepto, no es que obligatoriamente deba llamarse api el directorio que la aloja.

Saludos cordiales.

Pregunta

Como configurar mi server para tener el Api-REST separado del Front-End

Por favor, accede o regístrate para añadir un comentario.

2 Respuestas

dairon comentado Jun 27, 2015

dairon comentado Jul 15, 2015

Por favor, accede o regístrate para añadir un comentario.

Por favor, accede o regístrate para añadir un comentario.

Por favor, accede o regístrate para responder a esta pregunta.

En el blog

Otras Preguntas y Respuestas

Sin Respuesta

Preguntas relacionadas

Actividad Reciente

angelAparicio respondió Mar 11

Nereidas preguntó Feb 25

mchojrin respondió Dic 9, 2024

alyvrs preguntó Oct 19, 2024

ManHol preguntó Jul 9, 2024

ArtEze respondió Abr 24, 2024

ArtEze seleccionó una respuesta Abr 24, 2024

ArtEze respondió Abr 24, 2024

ArtEze preguntó Abr 24, 2024

ArtEze respondió Abr 24, 2024

Ultimas Preguntas

Nereidas preguntó

alyvrs preguntó

ManHol preguntó

ArtEze preguntó

Santiago2610 preguntó

gonzalss preguntó

ParkJo preguntó

ovedg preguntó

Ehdez preguntó

pedrourday preguntó

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

Etiquetas

Categorías

Conecta