How can i load pages dynamically with angularJS?
Question
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...
3 answers
solution1
1 2014-11-12 11:25:36
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.
solution2
1 2014-11-12 11:26:42
这是您需要的，以路由到页面或动态加载https://github.com/angular-ui/ui-router
solution3
0 2014-11-12 11:24:37
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.