Frontend State Management with Angular and NGRX
Introduction to Expressjs, Angular and and NGRX
Building the News API Server with Express JS
Building the API for Weather and Currencies with API Server with Express JS
Getting started with Angular and Testing your connection to the API
Integrating Bootstrap into Angular Applications
Setting up application constants and models
Setting up application pages and and routing
Adding Angular Component and Service for the News API
Adding Angular Component and Service for the Weather API
Adding Angular Currency and Service and Component for the Currencies API
Building the pages of our application
Conclusion and next steps
Integrating Bootstrap into Angular Applications
Next step, we will integrate the bootstrap framework into our application. Bootstrap remains one of the most common CSS frameworks and there are easy and different ways to integrate it into your application.
npm install bootstrap
// If your prefer yarn
yarn add bootstrapAfter installation, we have a few choices importing bootstrap into our application. Below two of the methods are illustrated.
Method 1
Import bootstrap in index.html of our root folder.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FnnAngularBase</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
Method 2
Import the bootstrap into styles.css which is found in the root src folder of our application. We make sure to import it as the first item in this file.
@import "~bootstrap/dist/css/bootstrap.css"This file is already configured to be bundled with our angular application.
;