The best way to learn code is to write code, so we’re going to jump right in. To show you just how easy it is to get up and running with Bootstrap and angularjs, we’re going to make a super simple application that will allow us to enter a name and have it displayed on the page in real time. It’s going to demonstrate the power of Angular’s two-way data binding and the included templating language. We’ll use Bootstrap to give the app a bit of style and structure.
Before we install our frameworks, we need to create our folder structure and the
index.html file that will be the basis of our web app.
In order to create our Angular and Bootstrap application, we need to do a little bit of setting up, which just involves creating an HTML page and including a few files. First, create a new directory called
Dunebook and open it up in your editor. Create a new file called
index.html directly inside it and pop in this boilerplate code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html>
This is just a standard HTML page that we can do something with once we’ve included Angular and Bootstrap.
Installing angularjs and Bootstrap
For our app, we’re only interested in one file at the moment:
bootstrap.min.css from the
css directory. The stylesheet provides the entire structure and all of the lovely elements, such as buttons and alerts, that Bootstrap is famous for. Copy it over to your project’s
css directory and open up the
index.html file in your text editor.
Including Bootstrap is as easy as linking that CSS file we just copied over. You just need to add the following within your
<head> tag. Pop this script tag within the
<head> of your page:
<link rel="stylesheet" href="css/bootstrap.min.css">
Okay, now that we’ve got Bootstrap included in our web app, we need to install Angular. Visit https://angularjs.org/ and click on the Download button. You’ll be presented with a few options; we want the minified stable version.
Copy the downloaded file over to your project’s
js directory and open up your
It’s recommended that Angular is included in the
<head> tag of your page or certain functions we’ll be taking advantage of throughout the course of the book won’t work. While it’s not necessary, there will be extra steps you’ll need to take if you choose to load Angular further down your HTML file.
<script> tag within the
<head> of your page.
Ready to go? Well, almost. We need to tell Angular that we want to utilize it in our app. Angular calls this bootstrapping and the framework makes this extremely simple for us. All we need to do is include an additional attribute in our opening
<html lang="en" ng-app>
That’s it! Angular now knows we want to take advantage of it.
Angular also allows us to prefix these attributes with
data- (for example,
data-ng-app) should we be concerned about writing valid HTML5.