Javascript CakePHP和AngularJS部分路由问题
我正在使用CakePHP和AngularJS。我目前有一个问题,我的AngularJS路线没有加载我的部分。有人知道去哪里找吗?这是我的路线代码:Javascript CakePHP和AngularJS部分路由问题,javascript,angularjs,cakephp,angularjs-routing,Javascript,Angularjs,Cakephp,Angularjs Routing,我正在使用CakePHP和AngularJS。我目前有一个问题,我的AngularJS路线没有加载我的部分。有人知道去哪里找吗?这是我的路线代码: csppmApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/users', { templateUrl: 'partials/user-list.html', controller: '
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';
}
*/
}]);
以及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>
/*$(文档).ready(函数(){
$('.tree toggle')。单击(函数(){
$(this.parent().children('ul.tree').toggle(200);
});
});*/
.well ul>li ul{显示:无;}
切换导航
-
这里什么都没有:{{1+1}{{sam}
我知道的一件事是angular.js正在正确加载。我知道这一点,因为我的{{1+1}}语句在浏览器中显示2。从技术上讲,由于路由,我应该看到文本“用户列表”,这是包含在我的部分。另外,当我查看源代码并单击angular-routes.js的引用时,它会显示angular-routes.js的源代码,因此我知道我肯定包括angular-routes.js
如果您有任何建议,我们将不胜感激。您没有提到是否有范围数据可用。尝试将它们登录到控制台
你确定链接是正确的吗?也许cake的路由和angular的路由之间存在冲突。我认为您应该将应用程序定义为一个模块,包括作为依赖项的“ngRoute”模块
var csppmApp=angular.module('csppmApp',['ngRoute'])代码>有人有什么想法吗?