AngularJs动态加载页面

How can i make a dynamic ajax load page function?

i don't want to declare all the 'routes' like this

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'views/main.html',
      controller: 'MainCtrl'
    })
    .when('/day/:id', {
      templateUrl: 'views/day.html',
      controller: 'DayCtrl'
    })
    .otherwise({
      redirectTo: '/'
    });
})

i want to be able to load files with 1 function that does something like this;

<a href="myLinkToFile" ng-click="loadPage()">
loadPage function(){
 var url = "get the HREF of the element that is clicked"
 load the file and put it in a div
 and prevent default click of the <a>

}

In Angular, you have to declare all your routes before init app. I think your desire is to prevent load many resource files in the first init. If I get your thought, you can try ocLazyModule to optimize the load file performance

Perhaps you should try this

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/', {
  templateUrl: 'views/main.html',
  controller: 'MainCtrl'
})
.when('/day/:id', {
  templateUrl: 'views/day.html/'+$routeParams.id+"/",
  controller: 'DayCtrl'
})
.otherwise({
  redirectTo: '/'
});
})
function DayCtrl($scope, $http) {
$scope.number=1

$scope.routeTo = function(id) {
window.location = "/day/"+id;
$scope.number+=1

} 
})

Html

<div ng-controller="DayCtrl">
<span ng-click="routeTo(number)">
Go to next page
</span>
<div ng-view >
</div>

</div>

}