Lay-out van de applicatie.
Kies een geschikt CSS framework.
- Voor de lay-out van een Angular applicatie moet je zelf zorgen. Je kan de CSS volledig zelf schrijven, of je kan opteren voor een bestaand CSS framework.
- Ga zeker voor een responsive framework.
- De meeste CSS frameworks maken ook vaak gebruik van JavaScript (meestal jQuery) om bijvoorbeeld een submenu te openen of te sluiten. jQuery is niet meteen de ideale oplossing omdat zowel Angular als jQuery de DOM manipuleren, maar dan op een totaal verschillende manier. Dit kan wel eens tot conflicten leiden.
- Sommige CSS frameworks zijn, net zoals Angular, component gebaseerd. Deze kan je vaak makkelijk laten samenwerken met Angular.
- Enkele CSS frameworks die goed samenwerken met Angular:
Vergelijkend overzicht- Bootstrap 3/4
- NG Bootstrap (zie project)
- NGX Bootstrap
- Angular Material
- PrimeNG
- Covalent UI
- Clarity
- ...
- Bootstrap 3/4
Bootstrap (BS4) en Font Awesome integreren.
In het vak webdesign heb je reeds kennis gemaakt mat Bootstrap (het CSS framework) en met Font Awesome (de icoontje). Vandaar dat we in onze toepassing deze twee systemen gaan integreren.
De integratie kan je op vier manieren verwezenlijken:
- Via een externe verwijzing naar de Bootstrap en Font Awesome CDN. in src/index.html
- Download Bootstrap en Font Awesome via NPM en importeer beide bestanden in src/styles.css.
- Download Bootstrap en Font Awesome via NPM en leg een verwijzing naar het CSS-bestand in angular.json (zie video).
- Download Bootstrap en Font Awesome via NPM en leg een verwijzing naar het SCSS-bestand in angular.json (zie project).
De laatste methode heeft als voordeel dat je nog op de originele SCSS-bestanden kan ingrijpen. Je kan bijvoorbeeld de originele kleuren en eigenschappen overschrijven. Zowel je eigen CSS-code als de (aangepaste) BT-code worden tijdens de compilatie in één bestand verwerkt.
Experimenteer met de drie eerste methodes in het startproject uit deel 1 en kies later voor je eigen projecten de methode die je het best ligt.
- Open src/index.html.
- Voeg binnen de head-tag een verwijzing naar de CDN toe. (lijn 10 en lijn 11.)
- Installeer Bootstrap en font-awesome
via nmp:
$ npm install --save bootstrap @fortawesome/fontawesome-free - Open een nieuw terminalvenster.
- Open rsc/styles.css en voeg bovenaan een verwijzing naar beide referenties toe:
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; @import "../node_modules/@fortawesome/fontawesome-free/css/all.min.css";
- Installeer Bootstrap en font-awesome
via nmp:
$ npm install --save bootstrap @fortawesome/fontawesome-free - Open een nieuw terminalvenster.
- Open angular.json en voeg vooraan de styles-array beide referenties toe:
... "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/@fortawesome/fontawesome-free/css/all.min.css", "src/styles.css" ],
