5

Is there an AngularJS equivalent to $.load() in jQuery? I want to be able to pull from another domain (i.e. post the app on one domain, but load content from a completely separate address).

Mathemats
  • 1,185
  • 4
  • 22
  • 35
wilsonhobbs
  • 941
  • 8
  • 18
  • Angular and jQuery are very different. I would recommend you to read: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background – TheHippo Mar 24 '15 at 01:40
  • When you say 'content', do you mean HTML or JSON data or what? – Bill Bergquist Mar 24 '15 at 03:10
  • @TheHippo Angular uses jQLite and will use jQuery if jQuery is loaded before, so it's not that they are different, in the way that Angular is using jQLite. One is a MVC framework and the other one is Javascript Library that is used by Angular (or can be used). – Yann Chabot Feb 07 '17 at 22:17

4 Answers4

4

jQuery methods of usage don't really fit Angular, you won't find load equivalent there (you obviously can use jQuery instead of jqLite if you want it badly).

Angular proposes the usage of ngInclude directive for similar off-hand scenarios. Otherwise you need to make your own directive and write the result from $http request to element, especially if you need more control.

If you want to 'get content from a particular div', you will need to have jQuery loaded anyway to use selectors on response, something like this would be an equivalent for load:

app.directive('load', function ($http, $compile) {
    return {
        link: function (scope, element, attrs) {
            $http.get('link.htm').success(function (response) {
                var contents = angular.element("<div>").html(response).find("#someelement");
                element.empty().append($compile(contents)(scope));
            });
        }
    }
});
Estus Flask
  • 206,104
  • 70
  • 425
  • 565
0

I reckon you can do it using ng-include . It has got a built-in onLoad method you can call to get your data from the remote address by using $http or $resource modules.

Cem Caglar
  • 1
  • 2
  • Can I get content from a particular
    on that page?
     – wilsonhobbs Mar 24 '15 at 01:57
  • not sure if i got your question right, but yes; you can get the content into a div of your choice. just make sure you are using ngInclude in the correct
    . See this fiddle with a basic local html included (all you need to do is replace it with your remote call onLoad) http://jsfiddle.net/mrajcok/MfHa6/
     – Cem Caglar Mar 24 '15 at 03:04
  • Yeah, I want to pull from a div on the other page, and display it on my page. – wilsonhobbs Mar 24 '15 at 22:32
0

Is there an AngularJS equivalent to $.load() in jQuery?

In normal case, you can write some code in a controller of angularjs instead of $.load function in jQuery.

Your code is going to be something like this.

angular.module('YourModule', [])
.controller('YourController', function($http){
    // You can write some code here !!
    //$http.get(...
    //$http.post(...
});

I want to be able to pull from another domain (i.e. post the app on one domain, but load content from a completely separate address).

My advice depends on whether your content includes HTML tags or not.

If NOT including HTML tags, you could write the code like above.

If including HTML tags, I recommend to write some custom directive code.

yazaki
  • 1,724
  • 1
  • 13
  • 17
0

I make refresh directive and call on click event with compile and it works for me

.directive('refreshConfirm', function($http,$compile) {
    return {
        restrict: 'A',
        link: function postLink(scope, element, attrs) {
            element.bind('click', function () {

                $http.get(page_url).then(successCallback, errorCallback);
                function successCallback(response){
                    //success code
                    var ty=response.data;
                    var appi=angular.element(document.querySelector('#page_content')).html($compile(ty)(scope));
                }
                function errorCallback(error){
                    //error code
                    alert('error');
                }                       

            });
        }
    };
})
snljais
  • 1
  • 4