Routing Cakephp with Angular JS

Question

Below is the html and cakephp code.

 <!DOCTYPE html>
    <html ng-app="app">
    <head>
    <script src="angular.min.js"></script>
    <script src="angular-route.js"></script>
    <script>
        var app = angular.module('app', ['ngRoute']);
        app.config(function ($routeProvider) {
        // configure the routes
        $routeProvider
        .when('/', {
            // route for the home page
            templateUrl: 'home.html',
            controller: 'homeController'
        })
        .when('/about', {
            // route for the about page
            templateUrl: 'about.html',
            controller: 'aboutController'
        })
        .when('/contact/', {
            // route for the contact page
            templateUrl: 'contact.html',
            controller: 'contactController'
        })
        .otherwise({
            // when all else fails
            templateUrl: 'routeNotFound.html',
            controller: 'notFoundController'
         });
      });
    </script>
    </head>
    <body ng-controller="homeController">
    <header>
    <nav class="navbar navbar-default">
    <div class="container">
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
        <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
        <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
    </ul>
    </div>
    </nav>
    </header>
    <div id="main">
    <!-- this is where content will be injected -->
    <div ng-view></div>
    </div>
    </body>
    </html>

Below codes are on default.ctp using cakephp3

<ul>
   <li><a href="#about">About</a></li>
   <li><a href="#contact">Contact Us</a></li>
</ul>

Clicking on #about url "http://localhost/finalcake3/pages/about"
Clicking on #contact url "http://localhost/finalcake3/pages/contact-us"

But adding the script below will not work using angular js in cakephp.

 <script>
        var app = angular.module('app', ['ngRoute']);
        app.config(function ($routeProvider) {
        // configure the routes
        $routeProvider
        .when('/about', {
            // route for the about us page
            templateUrl: 'http://localhost/finalcake3/pages/about',
            controller: 'AboutCNTRL'
        })
        .when('/contact', {
            // route for the contact us page
            templateUrl: 'http://localhost/finalcake3/pages/contact-us',
            controller: 'ContactCNTRL'
        })
      });
    </script>

I want my existing cakephp website to use angular js. Is there any codes to include I need in-order this to function.

The question is too broad as there are multiple way to do what you want. You need to be more specific. Why are you using hashtag for links, what are the routes for cakephp and what do you want your cake controllers to handle? — Reactgular
What exactly is not working and how should it work? Read university.utest.com/… This question is more like "Have some code, go figure what my problem with it is." — floriank

Frederic Lossignol Frederic Lossignol · Accepted Answer · 2015-10-14T00:28:30

first question ? why do you use AngularJs like this ? You can do an APIrest with CakePhp and retrieve easily Json Datas with Angular when you call the url of your cakephp project which return Json data. Better to use Angular like this.

Then, you have just to create your html template with your {{datas}} and call the json datas via your cakephp urls.

API rest CakePhp2 http://book.cakephp.org/2.0/fr/development/rest.html
API rest CakePhp3 http://book.cakephp.org/3.0/fr/development/rest.html

Routing Cakephp with Angular JS

2 Answers