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

Question

I'm a complete newbie with angularjs. 我是angularjs的新手。 I'm searching for an clear example to call pages with ajax. 我正在寻找一个清晰的示例来用ajax调用页面。

First question is: 第一个问题是：

How can i make an ajax request? 如何提出Ajax请求？

Second question is: 第二个问题是：

I don't want to use ng-click with all links. 我不想对所有链接使用ng-click。 I can't add ng-click attr to all elements because they are dynamic links. 我不能向所有元素添加ng-click attr，因为它们是动态链接。 How can i call the function with clicking links between #menu ? 如何通过单击#menu之间的链接来调用该函数？

For example: 例如：

 // 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>

I really don't know what's next now... 我真的不知道接下来会发生什么...

Any help would be great! 任何帮助将是巨大的！

To understanding what must be: 要了解必须是什么：

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

Above example loads clicked link's url, and gets response as html and show it in view. 上面的示例加载了单击链接的网址，并以html格式获取响应并在视图中显示。

I'm exactly asking for this. 我正是要这个。 Sorry for lame question but i need this... 对不起la脚的问题，但我需要这个...

Answer 1

make an ajax call in angularjs using $http 使用$ http在angularjs中进行ajax调用

from angularjs $http docs 来自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.
  });

In the docs you can also find a good example plnkr that shows how to use $http inside a controller: 在文档中，您还可以找到一个很好的示例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;
      };
    }]);

then, in your html, call the fetch() function: 然后，在您的html中，调用fetch（）函数：

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

ngRoute ngRoute

The ngRoute module provides routing and deeplinking services and directives for angular apps. ngRoute模块为angular应用程序提供路由和深层链接服务和指令。

Also provided in angularjs docs, an example plnkr of using $route angularjs文档中也提供了使用$ route的示例plnkr

consider using ng-repeat to generate the links. 考虑使用ng-repeat生成链接。

Answer 2

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

Answer 3

If you need a common place where you will load pages dynamically using ng-view and routing, similar to single page web app .. You might like it: 如果需要在公共场所使用ng-view和routing动态加载页面，类似于single page web app ..您可能会喜欢：
http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/ http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/

and for just an ajax request with http get you can use: 而对于带有http get的ajax请求，您可以使用：
http://www.w3schools.com/angular/angular_http.asp http://www.w3schools.com/angular/angular_http.asp

EDIT As per your comment, you want to use href from the link, 编辑根据您的评论，您想在链接中使用href，
then you need to use custom attribute like 那么您需要使用自定义属性，例如

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

Now on the click of this link, in fun(), you can make http-get request to the your_url 现在单击此链接，在fun（）中，您可以对your_url发出http-get请求

var url=event.target.attributes.data-href.value;

and you can make an http-get request 您可以发出http-get request

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

问题描述

3 个解决方案

解决方案1
1 2014-11-12 11:25:36

make an ajax call in angularjs using $http 使用$ http在angularjs中进行ajax调用

ngRoute ngRoute

解决方案2
1 2014-11-12 11:26:42

解决方案3
0 2014-11-12 11:24:37

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

问题描述

3 个解决方案

解决方案1 1 2014-11-12 11:25:36

make an ajax call in angularjs using $http 使用$ http在angularjs中进行ajax调用

ngRoute ngRoute

解决方案2 1 2014-11-12 11:26:42

解决方案3 0 2014-11-12 11:24:37

解决方案1
1 2014-11-12 11:25:36

解决方案2
1 2014-11-12 11:26:42

解决方案3
0 2014-11-12 11:24:37