PHP em .HTML? ( método nunca visto )

Pessoal, semana passada me deparei com uns arquivos vindo de um site de um cliente, onde é em HTML mas utiliza PHP, fiquei tentando entender como os arquivos HTML pegavam dados do MySQL / PhpMyAdmin e de um arquivo .PHP sem ser feito "pelo visível" algum tipo de requisição AJAX ou qualquer outro tipo.

Tentei muito entender esse código, não achei solução alguma, nem achei nada relacionado na WEB sobre essa metodologia, pois de fato eu não sei nem como se chama essa maneira de trabalhar em arquivos .HTML com implementação de PHP sobre os mesmos dessa maneira que vocês verão abaixo.

Por favor, se alguém souber como se chama esse método, como é feito o funcionamento entre .HTML arquivo e um .PHP utilizando esses formatos.

# ARQUIVO > index.html

• - -

// # ÁREA DE PRODUTOS

<div class="container-fluid">
 <h1 class="title">{{nome}}</h1>
 <div class="container">
 <div ng-repeat="produto in produtos" class="box-produto col-xs-12 col-sm-6 col-md-4">
 <a href="/produto/{{produto.slug}}">
 <img src="uploads/produtos/{{produto.imagem}}" alt="{{produto.titulo}}" width="265">
 <h2 class="title-produto">{{produto.titulo}}</h2>
 <h3 class="subtitle-produto">{{produto.subtitulo}}</h3>
 <p class="descricao-produto">{{produto.descricao | limitTo: 220}}</p>
 </a>
 </div>
 </div>
</div>

• - -

// # ÁREA DE SERVIÇOS

<div class="container-fluid bg-gray" >
 <h1 class="title">{{nome}}</h1>
 <p class="textoServicos">
 {{textoIntrodutorio}}
 </p>
 <div class="container">
 <div ng-repeat="servico in servicos" class="box-produto col-xs-12 col-sm-6 col-md-4">
 <a href="/servico/{{servico.slug}}">
 <img src="/uploads/servicos/{{servico.imagem}}" alt="{{servico.titulo}}" width="265">
 <h2 class="title-produto">{{servico.titulo}}</h2>
 <h3 class="subtitle-produto">{{servico.subtitulo}}</h3>
 <p class="descricao-produto">{{servico.descricao | limitTo: 220}}</p>
 </a>
 </div>
 </div>
</div>

# ARQUIVO > produtos.json

[
{"nome": "PROJETORES",
"image": "/img/produto.png",
"slug": "projetores",
"categoria": "2D e 3D",
"fotos" : [{"titulo": "Título 1", "image": "/img/produto1.jpg", "descricao": "texto descriçao"},
{"titulo": "Título 2","image": "/img/fundo-home.jpg","descricao": "texto descriçao"}],
"descricao": "Texto descrição aqui."
}
]
Não sei como isso funciona, se eu estiver enganado, porque esses dados que está dentro do arquivo .json, ele está dentro do banco de dados e de alguma forma, o arquivo .json já contem esses dados "inputados" nele.

Aguardo uma ajuda pessoal!!! :natalbiggrin: