使用Angular JS路由Cakephp

问题描述：

<!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>

下面的代码都在使用default.thtml中cakephp3

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

点击#about网址 “http://localhost/finalcake3/pages/about”
点击#contact网址 “http://localhost/finalcake3/pages/contact-us”

但添加下面的脚本在cakephp中不能使用angular js。

<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>

我想我现有的cakephp网站使用角js。是否有任何代码需要包括我需要这个功能。

的问题是过于宽泛，有多种方式，做你想做的。你需要更具体。为什么你使用hashtag作为链接，cakephp的路线是什么，你想让你的蛋糕控制者处理什么？ – cgTag

因为那是Angular JS就像使用哈希标签“#id”。 – distromob

什么*确切*不工作，它应该如何工作？阅读http://university.utest.com/writing-quality-bug-reports-and-utest-etiquette/这个问题更像是“有一些代码，去弄清楚我的问题是什么。” – burzum

答

templateURL：正在等待目录中模板部分文件的路径。尝试改变路径到任何相对路径应该。带有“/”前缀的网址与域相关，不带“/”前缀，它将与您的基本网址相关。您指向的绝对路径通过CakePHP解析，因此Angular不知道如何处理这些路径，因为它们不直接指向部分模板文件。

所以......

templateUrl： '/finalcake3/pages/about.html'，

或

templateUrl： 'finalcake3 /页/ about.html'，

答

第一个问题？为什么你会这样使用AngularJs？您可以使用CakePhp做一个APIrest，并在调用返回Json数据的cakephp项目的url时，轻松检索带有Angular的Json Datas。这样更好地使用Angular。

然后，你只需要用你的{{datas}}创建你的html模板并通过你的cakephp url调用json数据。

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

我想我的网站只加载一次，以便当我去到另一个页面时，它不会加载或刷新我的浏览器。 api在cakephp3中休息是否也与我的意思相同？ – distromob

使用Angular JS路由Cakephp

相关推荐