Angularjs meets Bootstrap – complete Guide for beginners

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.

Setting up

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.

Recommended :  Learn how to upload files with CodeIgniter

Installing angularjs and Bootstrap

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.

Installing Bootstrap

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.

Recommended :  learn how to create seeds in laravel

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">

Installing angularjs

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.

Recommended :  Creating a Newsletter Signup app with codeIgniter

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.

Tip

Angular also allows us to prefix these attributes with data- (for example, data-ng-app) should we be concerned about writing valid HTML5.

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest

Shares