Angular中的ajax调用和路由问题

ajax call and route issues in Angular

本文关键字：路由 问题 调用 中的 ajax Angular      更新时间：2024-04-25

我是Angular的初学者，我已经完成了单页应用程序的教程，从不同的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

我做错了什么？

不确定出了什么问题，但我几乎使用了和您相同的代码，切换状态没有问题。

 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) {
   }
 ]);
<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>

相关文章：