Combining Angularjs and CodeIgniter

It sounds like you're looking to gradually make less use of Code Igniter's (CI) routing as your angular application grows. This is not difficult but requires a lot of detail. Which method will work depends on your project structure. Note: I removed index.php from Code Igniter URLs, so the paths below may be different than default.

1) Code Igniter installed in root

If CI is installed on the root of your server, you can create a folder within CI (for instance I have an "ng" folder). Your project will look like:

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

place an .htaccess file within /ng with the following:

    Order allow, deny
    Allow from all

This allows the files within /ng to be directly accessed, rather than sending those requests back through CI's routing system. For example you can load this directly now: example.com/ng/partials/angular-view.html

The main web page will still be created by Code Igniter, but it can now include Angular assets, such as partial views, etc. Eventually you can replace most of what Code Igniter is doing by just returning a simple page, and having Angular load partial views from /ng like it's designed for.

This method is nice because Code Igniter can control whether that initial page is loaded at all (via some user authentication code in your CI controller). If user isn't logged in, they are redirected and never see the Angular app.

2) Code Igniter in Directory

If CI is installed in a directory, such as example.com/myapp/(code igniter) you can simply create a directory next to it, example.com/myappNg/

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

Now in your Angular application, you can request resources from CI by making paths relative to the domain root, rather than relative to the Angular app. For instance, in Angular, you will no longer request a partial view from the Angular folder partials/angular-view.html, rather you'll want to request views from CI /myapp/someResource. Note the leading /. "someResource" can return an html document, or JSON or whatever you're doing with Code Igniter in the first place. Eventually you can replace the number of paths which reference /myapp/. Once you no longer use CI for anything, you can simply place your Angular index.html in /myapp/ and it will continue to reference your paths at /myappNg/.

TL;DR Make your Angular app fully available and decouple it from Code Igniter. Gradually move toward using angular partial views and other JSON sources instead of linking to Code Igniter pages. Eventually replace your Code Igniter endpoint with an HTML file which bootstraps Angular.

Edit: fixed spelling

I've never used Angular - nevertheless this may help.

So i click a link that's controlled by angular's router and it is handled by javascript

Does this JavaScript make an Ajax request to one of your CI's controllers? If so, CI now has the is_ajax_request() method, which allows you to check if a request (POST or GET) is coming via ajax. You can proceed differently based on a request coming from Ajax vs a normal request.

User guide (bottom of the page): http://ellislab.com/codeigniter/user-guide/libraries/input.html

Hope it helps!

I inherited a CI app and I'm using Angular with CI mainly for routing requests. In my case I am not using Angular templates, so I use a ' ' empty but with a space parameter for the template option in my $routeProvider config. This allows me to do the usual CI ajax requests without too much change to the original server-side code.

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