使用Angular JS路由Cakephp

下面是html和cakephp代碼。使用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。是否有任何代碼需要包括我需要這個功能。

來源

2015-10-13 distromob

的問題是過於寬泛，有多種方式，做你想做的。你需要更具體。爲什麼你使用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'，

來源

2015-10-13 16:27:25 buzzsaw

第一個問題？爲什麼你會這樣使用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

來源

2015-10-14 00:28:30

我想我的網站只加載一次，以便當我去到另一個頁面時，它不會加載或刷新我的瀏覽器。 api在cakephp3中休息是否也與我的意思相同？ – distromob

使用Angular JS路由Cakephp

回答

相關問題