Question

如何制作动态ajax加载页面功能？

我不想宣布所有的路线＆＃39;像这样

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: '/'
    });
})

我希望能够使用1个具有此功能的函数加载文件;

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

}

Answer 1

也许你应该试试这个

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>

}

Answer 2

在Angular中，您必须在init app之前声明所有路由。我认为你的愿望是防止在第一个init中加载许多资源文件。如果我接受了您的想法，您可以尝试ocLazyModule来优化加载文件的性能

AngularJs动态加载页面

2 个答案: