For this Tutorial, we are going to create a four-page clickable prototype of a pseudo website called Healthy living . The home page will consist of a fully functional carousel, hero unit, and three content sections with call to actions. The following screenshot is that of the home page
Here is the preview of our site
Let’s get started with the creation of our application. We’ll start by performing the following steps:
- Create a folder named
hl, short for “Healthy Living”.
- Assuming that you have already installed Yeoman, open up the terminal. Let’s create the scaffolding for our app using the following lines of code:
mkdir hl cd hl yo angular
Generator-Angular must be installed before you can run your Angular app. In case you haven’t installed it during Tutorial , Setting Up Your Rig, please install it using the following command:
sudo npm install –g generator-angular
- In the prompt, press
Yfor the question, Would you like to include Twitter Bootstrap?.
- For the question, Would you like to use Sass (with Compass)?, press N.
- For the third question, press Enter to accept the default settings.
Quick Tip for You
Using a CSS preprocessor such as SASS or LESS is always a good practice as it allows you to use variables and mixins in CSS, ensuring that your CSS remains modular and follows DRY (Don’t Repeat Yourself) principals. However, covering them is beyond the scope of this book.
You should be seeing
npmpulling a bunch of files and creating the scaffold of your app. Wait patiently until it is all done and you are returned back to the command prompt.
You should now be able to see the structure of your application with the default home page.
As we are going to be using UI-Bootstrap, let’s install it using Bower.
- Fire the following command in the terminal:
bower install angular-bootstrap
This will create the
angular-bootstrapfolder within the
To be able to use Angular Bootstrap in our application, we need to include the JS file.
- Let’s open up the
app/index.htmlfile and add the following highlighted line.
<script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
If you look into the
bower_components/angular-bootstrapfolder, you’ll notice there are the following two types of files along with their minified versions:
- ui-bootstrap.js: This contains all the directives, but it doesn’t contain any templates. It makes sense to use this file if you do not want to use the default templates but want to customize your templates from scratch.
- ui-bootstrap-tpls.js: This contains all the directives along with the default twitter bootstrap template code. If you are not looking to make any customization, then its best to include this file in your project.
- In the prompt, press