Routing Cakephp with Angular JS

下面是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>

下面的代码是默认的。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 url "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网站使用angular js。是否有任何代码包括我需要在这个功能。

第一个问题?为什么要这样使用AngularJs ?你可以用CakePhp做一个rest，当你调用返回Json数据的CakePhp项目的url时，你可以用Angular轻松地检索Json数据。最好这样使用Angular。

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

API rest CakePhp2http://book.cakephp.org/2.0/fr/development/rest.html
API rest CakePhp3http://book.cakephp.org/3.0/fr/development/rest.html

templateURL:正在等待目录中模板部分文件的路径。尝试将路径更改为相对路径应该是什么。带有"/"前缀的url是相对于域名的，没有"/"前缀的url是相对于你的基础url的。你指向的绝对路径是通过CakePHP解析的，所以Angular不知道该怎么处理这些路径，因为它们不直接指向部分模板文件。

所以…

templateUrl:/finalcake3/页面/about.html,

或

templateUrl:"finalcake3/页面/about.html",

相关内容

最新更新

热门标签：