# Charger des parties d'une page avec ui-import

> Récupérez une partie HTML du serveur dans un élément avec ui-import ou IMPORT(), et laissez cette partie porter ses propres composants.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: fr
Content-SHA256: 91b198554765a4b1ea565874e46d67a1450a42f441d39e0aba9f5c41a1e4aa3b
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: jcomponent20@3fedd009a277f50fddc608b97afbec553b67c51b
Review: not-recorded

`<ui-import>` télécharge un fichier HTML et le place dans la page, si bien qu'un grand écran peut être découpé en parties chargées au besoin. L'adresse va dans l'attribut `config` (`url:/parts/card.html`) ; `target` peut désigner un autre élément à remplir à la place du `ui-import` lui-même.

En code, utilisez `IMPORT(url, target, callback)` : la cible est un sélecteur ou un élément, et le callback s'exécute quand la partie est dans la page. Chaque adresse n'est téléchargée qu'une fois. La même fonction charge des scripts (`.js`) et des styles (`.css`). Les composants et les liaisons de la partie chargée se mettent à fonctionner automatiquement.

```html public/parts/card.html
<div class="card">Hello <ui-bind path="user.name" config="text:value" class="who"></ui-bind></div>
```

```html public/parts/note.html
<div class="note">A note</div>
```

```html public/index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>
	<ui-import config="url:/parts/card.html"></ui-import>
	<div id="slot"></div>

	<script>
		var done = [];
		IMPORT('/parts/note.html', '#slot', function() { done.push('slot'); });
		SET('user.name', 'Peter');
	</script>

</body>
</html>
```
