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:

  • Create a folder named hl, short for “dunebook blog”.
  • 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 Y for 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 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.

  • Fire the following command in the terminal:
    bower install angular-bootstrap

    This will create the angular-bootstrap folder within the app/bower_components folder.

    To be able to use Angular Bootstrap in our application, we need to include the JS file.

  • Let’s open up the app/index.html file 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.