Question

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

如果我有一个例如ex伪代码的状态

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

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

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

Answer 1

更好的选择是在路由定义中使用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

AngularJS动态路由与参数最佳实践

2 个答案: