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

【问题标题】：How can i load pages dynamically with angularJS?如何使用 angularJS 动态加载页面？
【发布时间】：2014-11-12 11:14:18
【问题描述】：

我是 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);
        }
    });
});

以上示例加载点击链接的 url，并以 html 格式获取响应并显示在视图中。

我正是在要求这个。对不起，蹩脚的问题，但我需要这个......

【问题讨论】：

使用$http.get()。
你不说？我想要一个例子兄弟......如果你知道怎么做，请写一个答案......
Tutorial?这是搜索后在 Google 上的第一个链接："angular ajax"... 另外，这个答案应该会有所帮助：from jquery $.ajax to angular $http.
是的，我看到了那个例子，但你没有抓住重点。我有 2 个问题必须结合在一个示例中。我迷失了。正如我所说，我是一个完整的 angularjs 新手......所以请多多帮助兄弟。
向带有可点击标志的元素添加点击：Add ng-click dynamically in directive link function.

标签： javascript html angularjs

【解决方案1】：

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

【讨论】：

【解决方案2】：

使用 $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 模块为 Angular 应用程序提供路由和深度链接服务和指令。

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

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

【讨论】：

【解决方案3】：

如果您需要一个通用的地方，您将使用 ng-view 和路由动态加载页面，类似于 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

【讨论】：

看看第一个链接，我想你想做这样的事情。
其实我不需要路由器来实现角度。我的所有链接都有目标href。我只需要加载那个 url，然后用最旧的替换 html。
仍有 ng-click。我不想将 ng-click 属性赋予我的所有链接元素。
实际上，我认为你应该这样做。因为，您需要一个针对链接标签属性的 ajax 请求。您可以使用 jquery/javascript 并发出 ajax 请求、获取 html 源代码并替换您的内容。但是为什么要使用角度？你只是忽略了它的实际目的是让事情变得简单和不那么复杂，并且没有手动 DOM 操作。