Question

下面是html和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.ctp上使用cakephp3

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

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

但是添加下面的脚本将无法在cakephp中使用角度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。是否有任何代码要包括我需要按顺序运行。

Answer 1

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

然后，您只需使用{{datas}}创建html模板，并通过cakephp网址调用json数据。

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

Answer 2

templateURL：期望目录中模板部分文件的路径。尝试将路径更改为相对路径应该是什么。带＆＃34; /＆＃34;的网址前缀是相对于域的，没有＆＃34; /＆＃34;前缀它将相对于您的基本网址。您指向的绝对路径是通过CakePHP解决的，因此Angular不知道这些路径的内容，因为它们不直接指向部分模板文件。

所以...

templateUrl：＆＃39; /finalcake3/pages/about.html'，

或

templateUrl：＆＃39; finalcake3 / pages / about.html＆＃39;，

使用Angular JS路由Cakephp

2 个答案: