0

I'm a complete newbie with angularjs. I'm searching for an clear example to call pages with ajax.

First question is:

How can i make an ajax request?

Second question is:

I don't want to use ng-click with all links. I can't add ng-click attr to all elements because they are dynamic links. How can i call the function with clicking links between #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.

I'm exactly asking for this. Sorry for lame question but i need this...

Canser Yanbakan
  • 3,780
  • 3
  • 39
  • 65
  • By using [`$http.get()`](https://docs.angularjs.org/api/ng/service/$http#get). – Mr. Polywhirl Nov 12 '14 at 11:15
  • You don't say? I want an example bro... If you know how to do it, please write an answer... – Canser Yanbakan Nov 12 '14 at 11:17
  • [Tutorial](http://tutorials.jenkov.com/angularjs/ajax.html)? It was the first link on Google after searching: *"angular ajax"...* Also, This answer should help: [from jquery $.ajax to angular $http](http://stackoverflow.com/a/12131912/1762224). – Mr. Polywhirl Nov 12 '14 at 11:18
  • Yeah i saw that example but you are missing the point. I have 2 questions that must combined in an example. I'm lost with it. As i say, i'm a complete newbie with angularjs... So please be more helpful bro. – Canser Yanbakan Nov 12 '14 at 11:19
  • Adding click to elements with a clickable flag: [Add ng-click dynamically in directive link function](http://stackoverflow.com/a/22117366/1762224). – Mr. Polywhirl Nov 12 '14 at 11:24
  • @R.CanserYanbakan I've updated my answer. see the plnkr for ngRoute – Nitsan Baleli Nov 12 '14 at 11:38
  • check the edit: http://stackoverflow.com/questions/26885598/how-can-i-load-pages-dynamically-with-angularjs/26885804#26885804 – nsthethunderbolt Nov 12 '14 at 12:35

3 Answers3

1

make an ajax call in angularjs using $http

from 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:

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:

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

ngRoute

The ngRoute module provides routing and deeplinking services and directives for angular apps.

Also provided in angularjs docs, an example plnkr of using $route

consider using ng-repeat to generate the links.

Community
  • 1
  • 1
Nitsan Baleli
  • 5,393
  • 3
  • 30
  • 52
1

this is what you need , to route to page or load dynamically https://github.com/angular-ui/ui-router

Pranay Dutta
  • 2,483
  • 2
  • 30
  • 42
0

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:
http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/

and for just an ajax request with http get you can use:
http://www.w3schools.com/angular/angular_http.asp

EDIT As per your comment, you want to use href from the link,
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 

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

and you can make an http-get request

nsthethunderbolt
  • 2,059
  • 1
  • 17
  • 24
  • just have a look in the first link, i think you want to do something like this. – nsthethunderbolt Nov 12 '14 at 11:26
  • Actually i don't need a router for angular. My all links has target href. I just need to load that url, and replace the html with the oldest one. – Canser Yanbakan Nov 12 '14 at 11:41
  • Still has ng-click. I don't want to give ng-click attr to all my link elements. – Canser Yanbakan Nov 12 '14 at 12:35
  • 1
    Actually, I think you should. Because, you need an ajax request which is targetted to an attribute of your link tag. You can go around with jquery/javascript and make an ajax request, get html source, and replace your contents. But then WHY use angular? You are just ignoring it's actual purpose of making things easy and less complex and NO MANUAL DOM MANIPULATION. – nsthethunderbolt Nov 12 '14 at 12:39