Angular中的ajax调用和路由问题

时间:2016-04-11 19:46:33

标签: javascript php angularjs ajax

我与Angular合作,我已经关注单页应用程序的this教程,从不同的PHP文件导入模板并使用资源和路由模块,下一个代码是我的js文件:

(function(){
    var app         = angular.module('empresa', ['empresa.services', 'ngRoute']), 
        services    = angular.module('empresa.services',['ngResource']);

    services.factory('Empresa', ['$resource', function($resource){
        return $resource('empresa', {}, {
            get: {method: 'GET', url: 'empresa/getAll'},
            show: {method: 'GET', url: 'empresa/get/:id' },
            save: {method: 'POST'}
        });
    }]);

    app.config(['$routeProvider', function($routeProvider){
        $routeProvider.
        when('/empresa', {
            templateUrl: 'empresa.htm',
            controller: 'empresa'
        }).otherwise({
            templateUrl: 'empresaindex.htm',
            controller: 'empresa'
        });
    }]);            

    app.controller('empresa', ['$scope', 'Empresa', function($scope, Empresa){

        Empresa.get(function(data){
            $scope.empresas = data.items;
        });

    }]);

})()

这是我的index.php:

<div id="info" ng-app="empresa">    
    <div>
        <?php include('usersmanagement/usertemplates.php'); ?>
        <h2>Administración de Usuarios</h2>
        <div class="row" ng-view>
        </div>
    </div>
</div>

这些是我的usertemplates.php:

<script type="text/ng-template" id="empresa.htm">
    <h1>Una empresa</h1>
</script>

<script type="text/ng-template" id="empresaindex.htm">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>Nit</th> 
                <th>Razón Social o Nombre</th>
                <th>Mas Detalles</th>
            </tr>
        </thead>
            <tbody>
                <tr ng-repeat="empresa in empresas">
                <td>{{ empresa.id }}</td>
                <td>{{ empresa.documento }}</td> 
                <td>{{ empresa.razon_social }}</td>
                <td><a href="#/empresa">Mas Detalles</a></td>
            </tr>
            </tbody>
    </table>
</script>

我有两个问题:

  • Ajax调用正在进行三次。
  • 当我点击链接empresa总是将我重定向到其他模板,即使我在URL的末尾写#empresa。

Angular版本是1.5.3

我做错了什么?

1 个答案:

答案 0 :(得分:0)

不确定是什么问题,但我几乎和你一样使用相同的代码,没有问题来切换状态。

&#13;
&#13;
 var app = angular.module('empresa', ['empresa.services', 'ngRoute']),
   services = angular.module('empresa.services', ['ngResource']);

 app.config(function($routeProvider) {
   $routeProvider.
   when('/empresa', {
     templateUrl: 'empresa.htm',
     controller: 'empresa'
   }).otherwise({
     templateUrl: 'empresaindex.htm',
     controller: 'empresa'
   });
 });

 app.controller('empresa', ['$scope',
   function($scope) {

   }
 ]);
&#13;
<body ng-app="empresa">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-resource.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>


  <script type="text/ng-template" id="empresa.htm">
    <h1>Una empresa</h1>
  </script>

  <script type="text/ng-template" id="empresaindex.htm">
    <h1>Una empresaindex</h1>
    <a href="#/empresa">Mas Detalles</a>
  </script>

  <div>
    <a href="#/empresa">Mas Detalles</a>
    <a href="#/asdfadsf">Otherwise</a>
    <h2>Administración de Usuarios</h2>
    <div class="row" ng-view>
    </div>
  </div>
</body>
&#13;
&#13;
&#13;