You are here

Playing with Angular and Bootstrap

logoReference material

Angular

Bootstrap

TypeScript

JavaScript

Tooling

  • Angular CLI reference (the Angular CLI is a tool to initialize, develop, scaffold and maintain Angular applications)
  • npm (npm is the package manager for JavaScript)
  • nvm (Node Version Manager)

Articles

Installation

Angular needs Node.js and npm. npm is a package manager for JavaScript. It is delivered with Node.js. npm is a separate project from Node.js and updates more frequently.

Node.js is available in an LTS (long term support) version (currently v6.11.0) and in a current version with latest features (v8.1.2).

My development machine runs Linux Mint 18.1 (a distribution based on Ubuntu Xenial). I install Node.js using nvm (Node Version Manager) so that I don't have to install Node with root permission, according to nvm documentation:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
source .bashrc
nvm install lts/boron

To check installation results:

  • node -v display v6.11.0
  • npm -v displays 3.10.10

Then, I install Angular, according to Angular documentation:

npm install -g @angular/cli

To check installation results:

  • ng -v displays version 1.1.2

Additional links

First project

I create the directory that will contain my first test project, generate the project and run it:

mkdir angular
cd angular
ng new my-app
cd my-app
ng serve --open

My default browser opens a new window, which displays a greeting message.

IntelliJ IDEA and Angular

I configure my IntelliJ IDEA (Ultimate edition) according to JetBrains documentation:

  • installation of NodeJS and Angular plugins
  • I stop the Angular application started above (CTRL+C)
  • I open the above project, open a terminal window and enter the command ng serve
  • the application is available at http://localhost:4200, as above

First Bootstrap project

Bootstrap and ng-bootstrap installation

Following steps are to be followed in the above test project context.

  • install Bootstrap:
npm install bootstrap@4.0.0-alpha.6
  • install ng-bootstrap:
npm install --save @ng-bootstrap/ng-bootstrap

to be continued...