CakePHP и AngularJS Partials Routing Issue

Я использую CakePHP и AngularJS. У меня в настоящее время проблема, когда мои маршруты AngularJS не загружают мои частичные. Кто-нибудь есть идеи, где искать? Вот мой код маршруты:CakePHP и AngularJS Partials Routing Issue

csppmApp.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
     when('/users', { 
     templateUrl: 'partials/user-list.html', 
     controller: 'UserCtrl' 
     }). 
     otherwise({ 
     redirectTo: '/users' 
     }); 
    }]);

И мои контроллеры:

var csppmControllers = angular.module('csppmControllers', []); 

csppmControllers.controller('UserCtrl', ['$scope', '$routeParams','User', 
    function($scope, $routeParams, User) { 
    /*$scope.moduleState = 'list';*/ 
    $scope.users = ['jim','bob','same']; 
    $scope.sam = 'test'; 
    /* 
    $scope.showDetail = function (user) { 
     $scope.selectedUser = user; 
     $scope.moduleState = 'details'; 
    } 
    */ 
    }]);

И код к default.ctp:

<?php 
/** 
* 
* 
* CakePHP(tm) : Rapid Development Framework (http://cakephp.org) 
* Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org) 
* 
* Licensed under The MIT License 
* For full copyright and license information, please see the LICENSE.txt 
* Redistributions of files must retain the above copyright notice. 
* 
* @copyright  Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org) 
* @link   http://cakephp.org CakePHP(tm) Project 
* @package  app.View.Layouts 
* @since   CakePHP(tm) v 0.10.0.1076 
* @license  http://www.opensource.org/licenses/mit-license.php MIT License 
*/ 

$cakeDescription = __d('cake_dev', 'CakePHP: the rapid development php framework'); 
?> 
<!DOCTYPE html> 
<html lang="en" ng-app="csppmApp"> 
<head> 
    <?php echo $this->Html->charset() . "\n"; ?> 
    <title><?php echo $title_for_layout; ?></title> 
    <?php 
     echo $this->Html->meta('icon') . "\n"; 

     //echo $this->Html->css('cake.generic'); 
    ?> 
    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 
    <?php 
     echo $this->fetch('meta'); 
     echo $this->fetch('css'); 
    ?> 
    <!-- Font Awesome --> 
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 
    <!-- jQuery 1.10.2 --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <!-- AngularJS --> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script> 
    <!-- Bootstrap 3.0.3 --> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 
    <?php 
     echo $this->fetch('script') . "\n"; 
     echo $this->Html->script('lib/angular/angular-route') . "\n"; 
     echo $this->Html->script('app') . "\n"; 
     echo $this->Html->script('controllers') . "\n"; 

     //echo $this->Html->script('animations') . "\n"; 

     //echo $this->Html->script('filters') . "\n"; 
     //echo $this->Html->script('services') . "\n"; 
    ?> 

    <script type="text/javascript"> 
    /*$(document).ready(function() { 
     $('.tree-toggle').click(function() { 
      $(this).parent().children('ul.tree').toggle(200); 
     }); 
    });*/ 
    </script> 
    <style> 
    .well ul > li ul { display: none; } 
    </style> 
</head> 
<body> 
    <div class="container" id="container"> 
     <div class="row" id="header"> 
      <h1></h1> 
     </div> 
     <nav class="col-lg-12 navbar navbar-default" role="navigation"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">CSP Solutions</a> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Actions <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Corporate Website</a></li> 
        <li class="divider"></li> 
        <li><a href="#">Logout</a></li> 
       </ul> 
       </li> 
      </ul> 
      </div><!-- /.navbar-collapse --> 
     </nav> 
     <?php echo $this->element('sidebar'); //show sidebar ?> 
     <div ng-view class="view-frame col-lg-9" id="content"> 
      Nothing here: {{ 1+ 1}} {{sam}} 
     </div> 
     <div class="row" id="footer"> 
      <?php echo $this->Html->link(
        $this->Html->image('cake.power.gif', array('alt' => $cakeDescription, 'border' => '0')), 
        'http://www.cakephp.org/', 
        array('target' => '_blank', 'escape' => false) 
       ); 
      ?> 
     </div> 
     <div class="row"> 
      <?php echo $this->element('sql_dump'); ?> 
     </div> 
    </div> 

</body> 
</html>

Одна вещь, которую я знаю, что angular.js правильно загружается. Я знаю это, потому что мой оператор {{1 + 1}} отображает 2 в браузере. Технически из-за маршрутизации я должен видеть текст «Список пользователей», который содержится в моем частичном. Кроме того, когда я просматриваю исходный код и нажимаю ссылку на angular-routes.js, он показывает исходный код angular-routes.js, поэтому я знаю, что я определенно включил angular-routes.js.

Любые предложения были бы весьма полезными.

источник

2014-01-11 Camrin Parnell

У кого-нибудь есть идеи? –