CakePHP and AngularJS Partials Routing Issue
Question
I am using CakePHP and AngularJS. I am currently having an issue where my AngularJS routes are not loading my partials. Does anyone have any ideas of where to look? Here is my routes code:
csppmApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/users', {
templateUrl: 'partials/user-list.html',
controller: 'UserCtrl'
}).
otherwise({
redirectTo: '/users'
});
}]);
And my controllers:
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';
}
*/
}]);
And the code to my 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>
One thing I do know is that angular.js is loading properly. I know this because my {{ 1 + 1 }} statement displays 2 in the browser. Technically because of the routing I should be seeing the text "User List" which is contained in my partial. Also, when I view source code and click the reference to angular-routes.js, it shows me angular-routes.js's source code, so I know I am definately including angular-routes.js.
Any suggestions would be greatly appreciated.
2 answers
solution1
0 2014-02-18 17:01:52
You did not mention if there is a scope data available. Try log them into the console.
And are you sure that link is correct ? Maybe there is a collision between cake's and angular's routes.
solution2
0 2014-03-03 10:16:51
我认为您应该将您的应用定义为一个模块，包括“ ngRoute”模块作为依赖项。
var csppmAapp = angular.module('csppmApp',['ngRoute']);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.