web-dev-qa-db-fra.com

Combiner Angularjs et CodeIgniter

Je travaille sur un site existant écrit en CodeIgniter et nous envisageons d’utiliser AngularJS pour certaines pages qui nécessitent beaucoup de fonctionnalités frontales, mais nous ne souhaitons pas remplacer toutes les vues CodeIgniter (en une seule fois).

Donc, je clique sur un lien qui est contrôlé par le routeur d'angular et il est géré par javascript, mais le lien suivant pourrait être une requête "normale" qui devrait être gérée par le framework CodeIgniter.

Existe-t-il un moyen élégant de combiner ces deux méthodes? Cela ne me dérange pas vraiment de surcharger le client parce que le site n'est pas encore en production.

phpjavascriptcodeigniterangularjs
19
Han Dijk

Il semble que vous cherchiez à réduire progressivement l'utilisation du routage CodeIgniter (CI) au fur et à mesure que votre application angulaire se développe. Ce n’est pas difficile mais demande beaucoup de détails. La méthode qui fonctionnera dépend de la structure de votre projet. Remarque: j'ai supprimé index.php des URL de Code Igniter, les chemins ci-dessous peuvent donc être différents de ceux par défaut.

1) CodeIgniter installé dans la racine

Si CI est installé à la racine de votre serveur, vous pouvez créer un dossier dans CI (par exemple, j'ai un dossier "ng"). Votre projet ressemblera à:

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

placez un fichier .htaccess dans /ng avec les éléments suivants:

    Order allow, deny
    Allow from all

Cela permet d'accéder directement aux fichiers contenus dans /ng, au lieu de renvoyer ces demandes via le système de routage de CI. Par exemple, vous pouvez charger ceci directement maintenant: example.com/ng/partials/angular-view.html

La page Web principale sera toujours créée par CodeIgniter, mais elle peut désormais inclure des éléments Angular, tels que des vues partielles, etc. Vous pouvez éventuellement remplacer la plupart de ce que fait CodeIgniter en renvoyant simplement une page et en ayant Angular charge les vues partielles à partir de /ng comme il est conçu.

Cette méthode est agréable car CodeIgniter peut contrôler si cette page initiale est chargée (via un code d'authentification d'utilisateur dans votre contrôleur de CI). Si l'utilisateur n'est pas connecté, il est redirigé et ne voit jamais l'application Angular.

2) CodeIgniter dans le répertoire

Si CI est installé dans un répertoire, tel que example.com/myapp/(code igniter), vous pouvez simplement créer un répertoire à côté de celui-ci, example.com/myappNg/

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

Désormais, dans votre application Angular, vous pouvez demander des ressources à CI en créant des chemins relatifs à la racine du domaine plutôt qu'à l'application Angular. Par exemple, dans Angular, vous ne demanderez plus de vue partielle dans le dossier Angular partials/angular-view.html, mais préférerez demander des vues à partir de CI /myapp/someResource. Notez le / en tête. "someResource" peut renvoyer un document HTML, ou JSON ou quoi que vous fassiez avec Code Igniter.

Vous pouvez éventuellement remplacer le nombre de chemins qui référencent /myapp/. Une fois que vous n'utilisez plus CI pour quoi que ce soit, vous pouvez simplement placer votre Angular index.html dans /myapp/ et il continuera à référencer vos chemins d'accès à /myappNg/.

TL; DR Rendez votre application Angular entièrement disponible et découplez-la de CodeIgniter. Utilisez progressivement Angular des vues partielles et d'autres sources JSON au lieu de vous lier aux pages CodeIgniter. Remplacez éventuellement votre point de terminaison CodeIgniter par un fichier HTML qui amorce Angular.

28
Aaron Martins

Votre meilleur choix est de garder votre code d’arrière-plan séparé du code angulaire Et d’utiliser le code codeInginter comme API

/ Code CodePitre/Code Angulaire

Parce que CodeIgniter est livré avec sa part de fonctionnalité de sécurité, cela devrait être votre meilleur pari

2
Sydney Collins

Je n'ai jamais utilisé Angular. Néanmoins, cela peut aider.

Donc, je clique sur un lien qui est contrôlé par le routeur d'angular et c'est géré par javascript

Est-ce que ce JavaScript fait une demande Ajax à l'un des contrôleurs de votre CI? Si tel est le cas, CI utilise maintenant la méthode is_ajax_request(), qui vous permet de vérifier si une requête (POST ou GET) arrive via ajax. Vous pouvez procéder différemment en fonction d'une demande provenant d'Ajax ou d'une demande normale.

Guide de l'utilisateur (bas de la page): http://ellislab.com/codeigniter/user-guide/libraries/input.html

J'espère que ça aide!

1
istos

J'ai hérité d'une application CI et j'utilise Angular avec CI principalement pour les demandes de routage. Dans mon cas, je n'utilise pas les modèles Angular, alors j'utilise un '' vide mais avec un paramètre d'espace pour l'option modèle dans ma configuration $ routeProvider. Cela me permet de faire les demandes de CI ajax habituelles sans trop modifier le code d'origine côté serveur. 

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: '/'});
}]);
1
Peter Drinnan

En plus de la réponse donnée par Aaron Martin, on peut également l’utiliser comme une approche client-serveur.} _

Disons que nous faisons 2 dossiers à la racine de notre projet: 

  1. Client

  2. Serveur

Le dossier Client contiendra tout le code d'AngularJS et les bibliothèques côté client, y compris les bibliothèques Bower et Npm . Le routage du côté client sera également géré par le routeur AngularJS.

Il y aura des usines ou des services qui agiront en tant que fournisseurs pour angularjs côté client ..__ Ce fichier contiendra le code d'envoi de la demande et la réponse du côté serveur.

Serveur Le dossier aura le code de Laravel ou CodeIgniter ou N'importe quel autre framework PHP . Vous créerez toutes les API des demandes et développerez les fonctionnalités en conséquence ..__ Par conséquent, la section PHP (Répertoire du serveur) contiendra tous les fichiers de supports et les fichiers de base de données. De plus, il aura également des liens de réception pour les flux RSS, etc. 

Le client vient de recevoir toute la réponse au format JSON ou XML lorsqu'il le demande sur n'importe quelle API sur son serveur.

C'est selon moi l'une des meilleures pratiques pour développer des applications Web.

0
Tirthraj Rao

J'ai choisi un site CI avec un autre programmeur avec qui je travaille et qui est en congé depuis quelques mois. Notre site est construit principalement avec beaucoup d'angles en raison de la nature de son objectif. Notre solution était un peu différente.

Tout ce qui diffère de l'infrastructure standard de CI est constitué de plusieurs dossiers: js\angular\controllers etjs\angular\modules dans le dossier d'application de CI, pour contenir tous les fichiers de modèle angulaire et de contrôleur. Ensuite, chargez les documents angulaires dans le dossier de base de l'application.

0
Timothy Moffett