Как передать динамическое название и описание контроллером для каждой страницы сведений о продукте, используя угловой js?

Question

Я хочу передать динамическое название и описание по контроллеру для каждой страницы сведений о продукте, используя угловые js.

HTML:

<title>{{page.title}}</title>
<meta name="description" content="{{page.description}}">

Маршрутизация Js:

$routeProvider.
 when('/product/:id', {
    templateUrl: 'partials/product.php',
    controller: 'ProductController'
})

Контроллер Js:

function ProductController($scope) 
{
    $http.get("api/product/1")
    .then(function(response) {
       $scope.page.title = response.data.title;
       $scope.page.description = response.data.description;
    });
}

Answer 1

Используйте сервис $routeParams для получения значения id из маршрута и динамического создания URL-адреса API.Наиболее подходящим способом решения этой проблемы было бы удаление кода поиска данных из функции resolve маршрута.Таким образом, вы также будете следить за тем, чтобы страница не отображалась до тех пор, пока не будет выполнен вызов page.

$routeProvider.
 when('/product/:id', {
    templateUrl: 'partials/product.php',
    controller: 'ProductController',
    resolve: {
       page: ['$http', $routeParams, function($http, $routeParams) {
           return $http.get("api/product/"+ $routeParams.id ).then(function(response) {
               return response.data;
           })
       }
    }
})

Затем внутри контроллера используйте

function ProductController($scope, page) {
    function init() {
        $scope.page = page
    }
    init();

}