Question

我是angularjs的新手。我正在寻找一个用ajax调用页面的明显示例。

第一个问题是：

如何制作ajax请求？

第二个问题是：

我不想对所有链接使用ng-click。我无法将ng-click attr添加到所有元素，因为它们是动态链接。如何通过点击#menu

之间的链接来调用该功能

例如：

// Controller
var ceoApp = angular.module('ceoApp', []).config(function($interpolateProvider){
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});

ceoApp.controller('AjaxLoadCtrl', function(){});

<!-- View -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="ceoApp">
<body ng-controller="AjaxLoadCtrl">
    <ul id="menu">
        <li><a href="p1">CALL P1</a></li>
        <li><a href="p2">CALL P2</a></li>
        <li><a href="p3">CALL P3</a></li>
    </ul>
</body>
</html>

我真的不知道接下来会发生什么......

任何帮助都会很棒！

了解必须具备的内容：

$('#menu a').click(function(){
    $.ajax({
        type: 'post',
        dataType: 'html',
        url: $(this).attr('href'),
        success: function(data){
            $('#view').html(data);
        }
    });
});

上面的示例加载了点击链接的网址，并以html的形式获得响应并在视图中显示。

我正是要求这个。抱歉蹩脚的问题，但我需要这个......

Answer 1

使用$ http

在angularjs中进行ajax调用来自angularjs $ http docs

的

$http.get('/someUrl').
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

在文档中，您还可以找到一个很好的示例plnkr 这显示了如何在控制器中使用$ http：

angular.module('httpExample', [])
  .controller('FetchController', ['$scope', '$http', '$templateCache',
    function($scope, $http, $templateCache) {
      $scope.method = 'GET';
      $scope.url = 'http-hello.html';

      $scope.fetch = function() {
        $scope.code = null;
        $scope.response = null;

        $http({method: $scope.method, url: $scope.url, cache: $templateCache}).
          success(function(data, status) {
            $scope.status = status;
            $scope.data = data;
          }).
          error(function(data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;
        });
      };

      $scope.updateModel = function(method, url) {
        $scope.method = method;
        $scope.url = url;
      };
    }]);

然后，在你的html中，调用fetch（）函数：

<button id="fetchbtn" ng-click="fetch()">fetch</button>

ngRoute

ngRoute模块为角度应用程序提供路由和深层链接服务和指令。

还在angularjs文档中提供了使用plnkr的示例$route

考虑使用ng-repeat生成链接。

Answer 2

这是您需要的，路由到页面或动态加载https://github.com/angular-ui/ui-router

Answer 3

如果您需要一个可以使用ng-view和routing动态加载页面的公共位置，类似于single page web app ..您可能会喜欢它：
http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/

对于只有http get的ajax请求，您可以使用：
http://www.w3schools.com/angular/angular_http.asp

修改根据您的评论，您希望使用链接中的href，
那么你需要使用自定义属性，如

<a data-href="your_url" href="" ng-click="fun($$event)" >Click</a>

现在点击此链接，在fun（）中，您可以向your_url
发出http-get请求
var url=event.target.attributes.data-href.value;

您可以制作http-get request

如何使用angularJS动态加载页面？

3 个答案:

使用$ http

ngRoute