AngularJS动态路由与参数最佳实践[关闭]

Question

我有动态路由，我正在努力确保尽可能高效地切换状态。

如果我有一个状态，例如前伪代码

.state("apartmentDetails", {
        url: "/apartmentDetails/:id",
        templateUrl: "templates/apartmentDetails.html",
        controller: apartmentDetailsCOntroller
})

我的控制器是否会获取参数 id，然后例如调用服务或从文件中获取数据（这是包含图片、价格、建筑物名称等和其他属性的公寓对象列表）

也许运行一个像 buildApartmentTemplate() 这样的函数然后我去构建模板并通过 $scope 传递数据？这是我能想到的唯一方法，但我确信有一种更好的方法，它不涉及必须填充模板的函数。是否有最佳实践可以使其更具活力？

Answer 1

更好的选择是在路由定义中使用promise，如果promise被解决，则注入结果，使用这种方法可以避免加载模板后不必要的查询，如果promise被拒绝，你可以重定向到404页面或任何你想要的.

app.service('apartamentService', ['$http', function ($http) {
  this.list = function (id) {
       return $http({url: '/apartaments/' + id});
	};	
}]);
		
 app.config(['$routeProvider',
function ($routeProvider) {
	$routeProvider
		.when('/apartmentDetails/:id/', {
		templateUrl: 'templates/apartmentDetails.html',
		controller: 'apartmentDetailsController ',
		resolve: {
			apartaments: ['$route', 'apartamentService',
				function ($route, apartamentService) {
					return apartamentService.list($route.current.params.id)
				}]
			}});
					
}]);

app.controller('apartmentDetailsController', ['$scope', 'apartaments', function ($scope, apartaments) {
	$scope.apartaments = apartaments;	
}]);

希望能帮到你

Answer 2

这可能会对您有所帮助。

我通常做的是在加载某些组件之前解决我的所有问题，例如：

state("apartmentDetails", 
{ 
url: "/apartmentDetails/:id", 
templateUrl: "templates/apartmentDetails.html", 
controller: apartmentDetailsCOntroller,
resolve: {
  someResolvedData: ($stateParams) => {
     return YourService.getMyData($stateParams.id);
  }
}
})

您还需要为someResolvedData 创建一个绑定，您的解析数据将在控制器或模板中可用。 YourService 是您的服务的名称（不要忘记注入它），getMyData() 是服务上的一些函数，它将返回数据。

在此处查看有关解析数据的更多信息：

https://toddmotto.com/resolve-promises-in-angular-routes/

https://medium.com/opinionated-angularjs/advanced-routing-and-resolves-a2fcbf874a1c