Как я могу сделать html файл динамика c с angularjs

Question

У меня есть файл html и файл JS. Файл JS содержит некоторые данные, которые я хочу представить в файле html, в зависимости от щелчка по ссылке из другого html файла html файла:

                <div class="jumbotron mb-5">
                    {{product.name}}
                </div>
                <div class="jumbotron mb-5">
                    {{product.price}}
                </div>
                <div class="jumbotron mb-5">
                    {{product.description}}
                </div>

js файла

    var app = angular.module('app', [']);

    app.controller('prodCtrl', function ($scope) {
       $scope.courses = [
           {
            id: 1,
            name: 'prod 1',
            description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid ea fugit 
tempore error, tenetur adipisci hic voluptas sapiente distinctio,.',
            price: 100,
            image: 'public/photos/prod1.png'
        },
        {
            id: 2,
            name: 'prod 2',
            description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
            price: 30,
            image: 'public/photos/prod2.png'
        },
      ];
    });

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

Answer 1

Вы передадите параметр в маршруте с помощью ui-router

Звучит так, будто вы запрашиваете динамическую c маршрутизацию. В SO есть несколько вопросов по этому поводу, но они указывают правильное направление для того, что вы делаете:

Вы должны объявить свои маршруты в конфигурации приложения следующим образом:

angular.module('myApp', [
  'ui.router'
])
.config(function($stateProvider) {
  $stateProvider
    .state({
      name: 'product',
      url: '/product/{id}', //{id} or :id will tell it to expect the param
      templateUrl: '/products/index.html',
      controller: 'ProdCtrl'
    });
});

Внутри вашего индекса. html файла убедитесь, что вы добавили:

<div ng-app="myApp">
  <ui-view></ui-view>
</div>

(или где вы хотите, чтобы содержимое отображалось)

И, наконец, ваш контроллер:

.controller('ProdCtrl', function($scope, $stateParams) {
  //get id from the url and convert it to an int to match data type in courses id
  //may want to consider doing some validation
  $scope.productId = parseInt($stateParams.id);

  var courses = [
    {
      id: 1,
      name: 'prod 1',
      description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
      price: 100,
      image: 'public/photos/prod1.png'
    },
    {
      id: 2,
      name: 'prod 2',
      description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
      price: 30,
      image: 'public/photos/prod2.png'
    }
  ];

  //find the matching item by id and set it to scope
  $scope.product = courses.map(function(item) {
    if (item.id === $scope.productId) {
      return item;
    }
  });
});

Теперь у вас есть возможность набрать go до /product/1 и посмотреть prod 1

Обратите внимание, что это непроверенный код, но вы должны быть на правильном пути. Я также переименовал несколько вещей для большей ясности и стал более согласованным с общими практиками (например, myApp и ProdCtrl).

Если вы go просматриваете документацию по ui-router, вы также можете достичь этого без используя идентификатор в URL-адресе и передайте params в фоновом режиме. Это означает, что вы можете получить доступ к этой странице только по ссылкам в вашем приложении, а не по глубоким ссылкам на них.