In this tutorial you will learn how to build a blog with angularjs from scratch . our 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
Let’s get started with the creation of our application. We’ll start by performing the following steps:
hl, short for “dunebook blog”.
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
Yfor the question, Would you like to include Twitter Bootstrap?.
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
npm pulling 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.
bower install angular-bootstrap
This will create the
angular-bootstrap folder within the
To be able to use Angular Bootstrap in our application, we need to include the JS file.
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-bootstrap folder, 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.