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 chapter1 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.
Now, create a couple of folders inside chapter1 folder: css and js. Your completed folder structure should look something like this:
Installing both of our frameworks is as simple as including a CSS or JavaScript file on our page. We can do this via a content delivery network (CDN) like Google Code or MaxCDN, but we're going to fetch the files manually for now. Let's take a look at what steps you should be aware of when including AngularJS and Bootstrap in your project.
Head to http://getbootstrap.com and hit the Download Bootstrap button. This will give you a zip of the latest version of Bootstrap that includes CSS, fonts, and JavaScript files. Previous versions of Bootstrap included an images directory but Version 3 brings the change to icon fonts.
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 index.html file. Angular can be included in your app just like any other JavaScript file.
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.
Pop this <script> tag within the <head> of your page.
<script src="js/angular.min.js"></script>
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> tag:
<html lang="en" ng-app>
That's it! Angular now knows we want to take advantage of it.
So we've got a lot of the theory behind Angular down; it's time to actually put it in place. Once we've got our application working, we'll take a look at how we can make it shine with Bootstrap.
Let's open that index.html file again, but this time also open it up in your browser so we can see what we're working with. This is what we've got so far:
<html lang="en" ng-app> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.min.css"> <title></title> <script type="text/javascript" src="js/angular.min.js"></script> </head> <body> </body> </html>
So, we've got Bootstrap and Angular there and we've initialized our app with the ng-app attribute in the opening <html> tag; let's get cracking.
We're going to have a Hello, World app with a bit of a difference. Instead of saying hello to the world, we're going to have an input field that will bind the data and echo it out in our view automatically, and we're going to do all of this without writing a line of JavaScript.
Let's start out by getting an <h1> tag in our <body> tag:
<h1>Hello, World</h1>
If you view this in your browser, you should notice that Bootstrap has tidied up the default. We no longer have Times New Roman but instead Helvetica and those excess margins around the edge have been removed:
We now need to include our text input and also specify the model we want to use. Remember, a model can be any type, but in this case it will be a string that the input will return:
<input type="text" ng-model="name">
The ng-model attribute declares a model binding on that element, and anything we type into the input box will be automatically bound to it by Angular. Obviously this isn't going to be displayed on our page by magic; we need to tell the framework where we want it echoed. To display our model on the page, we just need to wrap the name of it in double curly braces:
{{name}}Pop this in place of World in your <h1> tag and refresh the page in your browser. If you pop your name in the input field, you'll notice that it's automatically displayed in your heading in real time. Angular is doing all of this for us and we haven't written a single line of JavaScript.
Now, while that's great, it would be nice if we could have a default in place so it doesn't look broken before a user has entered their name. What's awesome is that everything in between those curly braces is parsed as an AngularJS expression, so we can check and see if the model has a value, and if not, it can echo World. Angular calls this an expression and it's just a case of adding two pipe symbols as we would in JS:
{{name || 'World'}}Tip
Angular describes an expression as the following: "JavaScript-like code snippets that are usually placed in bindings such as {{ expression }}."
It's good to remember that this is JavaScript, and that's why we need to include the quotation marks here, to let it know that this is a string and not the name of a model. Remove them and you'll notice that Angular displays nothing again. That's because both the name and World models are undefined.
These models can be defined directly from within our HTML using an attribute as we've seen, but we can also assign a value to them from a controller. To do this, we're going to need to create a new JS file called controller.js and include it in our app:
<script type="text/javascript" src="js/controller.js"></script>
Pop this in after you've included Angular on your page to avoid any errors being thrown.
Controllers are just functions that Angular can utilize; let's take a look at one:
function AppCtrl($scope){
}Here, we've declared our controller (essentially just a plain JavaScript constructor function) and have injected the scope service into it. The scope is what we can access from within our view. There can be multiple controllers and multiple scopes on a single page. It's essentially a JavaScript object of our models and functions that Angular works its magic with, for example, the scope of our application so far looks like this:
{
name: "Stephen"
}The scope changes depending upon what's entered into the input field. This can then be accessed from our view as well as the controller.
Now that we've created our controller, we need to tell Angular we want to use it. For our application we only need a single controller, so let's add a second attribute to the <html> tag again:
ng-controller="AppCtrl"
This attribute tells Angular we want to use the AppCtrl function we've just created as our controller for the page. We could of course add this to any element on the page including the body if we so wish.
To check everything's working okay, we're going to specify an initial value for our model. This is as easy as setting a property on any object:
function AppCtrl($scope) {
$scope.name = "World";
}If you refresh your app in your browser, you'll notice that World is now pre-filled as the model's value. This is a great example of Angular's powerful two-way data binding. It allows us to use pre-defined data perhaps from an API or database and then change this in the view directly before picking it back up in the controller.
Now that we've created our Hello World application and everything is working as expected, it's time to get involved with Bootstrap and add a bit of style and structure to our app.
The application is currently misaligned to the left, and everything is looking cramped so let's sort that out first with a bit of scaffolding. Bootstrap comes with a great mobile first responsive grid system that we can utilize with the inclusion of a few divs and classes. First though, let's get a container around our content to clean it up immediately:
Tip
Mobile first is a way of designing/developing for the smallest screens first and adding to the design rather than taking elements away.
<div class="container">
<h1>Hello, {{name || 'World'}}</h1>
<input type="text" ng-model="name">
</div>If you resize your browser window, you should start to notice some of the responsiveness of the framework coming through and see it collapsing:
Now, I think it's a good idea to wrap this in what Bootstrap calls a
Jumbotron (in previous versions of Bootstrap this was a Hero Unit). It'll make our headline stand out a lot more. We can do this by wrapping our <h1> and <input> tags in a new div with the jumbotron class:
<div class="container">
<div class="jumbotron">
<h1>Hello, {{name || 'World'}}</h1>
<input type="text" ng-model="name">
</div>
</div>
It's starting to look a lot better but I'm not too happy about our content touching the top of the browser like that. We can make it look a lot nicer with a page header but that input field still looks out of place to me.
First, let's sort out that page header:
<div class="container">
<div class="page-header">
<h2>Chapter 1 <small>Hello, World</small></h2>
</div>
<div class="jumbotron">
<h1>Hello, {{name || 'World'}}</h1>
<input type="text" ng-model="name">
</div>
</div>
I've included the chapter number and title here. The <small> tag within our <h2> tag gives us a nice differentiation between the chapter number and the title. The page-header class itself just gives us some additional margin and padding as well as a subtle border along the bottom.
Tip
Downloading the example code
You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
The last thing I think we could improve upon is that input box. Bootstrap comes with some great input styles so let's include those. First, we need to add the class of form-control to the text input. This will set the width to 100% and also bring out some nice styling such as rounded corners and a glow when we focus on the element:
<input type="text" ng-model="name" class="form-control">
Much better, but to me it looks a little small when you compare it with the heading. Bootstrap provides two additional classes we can include that will either make the element smaller or larger: input-lg and input-sm respectively. In our case, the input-lg class is the one we want, so go ahead and add that to the input.
<input type="text" ng-model="name" class="form-control input-lg">
That's better but we still need to sort the spacing out, as it looks a bit snug against our <h1> tag. It's probably also a good idea that we add a label in so it's clear what the user should be entering in the box. Bootstrap allows us to kill two birds with one stone as it includes a margin on the label:
<label for="name">Enter Your Name</label> <input type="text" ng-model="name" class="form-control input-lg" id="name">
Our app's looking great and working exactly how it should, so let's recap what we've learnt in the first chapter.
To begin with, we saw just how easy it is to get AngularJS and Bootstrap installed with the inclusion of a single JavaScript file and stylesheet. We also looked at how an Angular application is initialized and started building our first application.
The Hello, World app we've created, while being very basic, demonstrates some of Angular's core features:
Expressions
Scopes
Models
Two-way data binding
All of this was possible without writing a single line of JavaScript, as the controller we created was just to demonstrate two-way binding and wasn't a required component of our app.
With Bootstrap, we utilized a few of the many available components such as the jumbotron and the page-header classes to give our application some style and substance. We also saw the framework's new mobile first responsive design in action without cluttering up our markup with unnecessary classes or elements.
In Chapter 2, Let's Build with AngularJS and Bootstrap we're going to explore some more AngularJS and Bootstrap fundamentals and introduce the project we're going to be building over the course of this book.
