Hello everyone. I am really curious how to deal with AngularJS. I read some articles how to combine Angular and Laravel. (http://scotch.io/tutorials/php/create-a-laravel-and-angular-single-page-comment-application, http://blog.neoxia.com/laravel4-and-angularjs/)

But the question is what is the best practice to combine AngularJS with OctoberCMS.

I want to have Landing page, Blog, Backend administration through OctoberCMS but Front-end SPA after user is log in + OctoberCMS/Laravel as REST. I don't want to combine Angular template with Twig. I think it will be better to have /ng(whatever)/ reserved for Angular and rest of the route system for October.

1. How can I configure that?
2. And should I create/use public folder as is described in the articles or can I remain with October template system and have everything inside my theme or assets directories?

Thank you.

(I know I can use plain Laravel as REST but I want to use the power of OctoberCMS too.)

Last updated 9 years ago

To start, use {% verbatim %} and {% endverbatim %} to wrap your Angular code.

http://twig.sensiolabs.org/doc/tags/verbatim.html

Regarding the RESTful controllers, there is a couple of ways you can do this.

1. Create a plugin that defines a routes.php file, or even use the app/routes.php file and use the traditional Laravel approach to route to RESTful controllers. As per the links you mentioned above

2. Use CMS Pages for your routes. An example might look like this:

title = "Angular Comment Route"
url = "/ng/comment/:route?/:id?"
==
<?
function onStart()
{
    if (!$route = $this->param('route')) {
        $this->setStatusCode(404);
        return;
    }

    $method = 'ng'.studly_case($route);
    if (!method_exists($this, $method)) {
        $this->setStatusCode(404);
        return;
    }

    return $this->$method();
}

function ngStore()
{
    Comment::create([
       'author' => post('author'),
       'text' => post('text'),
    ]);

    return Response::json(['success' => true]);
}

function ngDestroy()
{
    if (!$id = $this->param('id')) {
        $this->setStatusCode(404);
        return;
    }

    Comment::destroy($id);
    return Response::json(['success' => true]);
}
?>
==
<p>Sorry, that route is not found</p>

There is obvious room for improvement here, such as creating a trait, or behavior, to handle the repeated logic.

Last updated 9 years ago

Thank you @daftspunk for your reply. I tried both approaches and there are working! I chose first option (app/routes.php) as it seems better to me. It's cleaner solution (NG and CMS are separated). It's faster (Template rendering).

Hi JonasJonny, is it possible to share this plugin? Thanks!

@daftspunk using the second approach how would the structure of angular app would look like? I mean how do I inject angular.js specific files in the page? Using <script src="{{ []|theme }}"></script> breaks all injectedJS. I supouse because of the compiler.

Last updated 9 years ago

I have a Laravel+angular 2 application and I also installed October CMS. How can I connect these two. Could anyone please provide me a sample snippet including where the folders to be placed and how can I connect it.