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:
Bootstrap (BT4) 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. Op het moment van schrijven is BT4 nog steeds in beta-fase.
De integratie kan je op drie 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 leg een verwijzing in .angular-cli.json (zie video).
- Download BootsTrap en Font Awesome via NPM en importeer beide bestanden in src/styles.css.
De twee laatste methodes hebben als voordeel dat je nog op de originele SASS-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 verschillende 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@4.0.0-beta font-awesome - Open .angular-cli.json en voeg vooraan de styles-array beide referenties toe:
... "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/font-awesome/css/font-awesome.min.css", "styles.css" ],
- Installeer Bootstrap en font-awesome
via nmp:
$ npm install --save bootstrap@4.0.0-beta font-awesome - 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/font-awesome/css/font-awesome.min.css";
