Create Responsive blog with angularjs and bootstrap

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

Prototyping the Healthy Living website
Let’s get started with the creation of our application. We’ll start by performing the following steps:
  1. Create a folder named hl, short for “Healthy Living”.
  2. 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 

    Note

    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
  3. In the prompt, press Y for the question, Would you like to include Twitter Bootstrap?.
  4. For the question, Would you like to use Sass (with Compass)?, press N.
  5. 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.

  6. 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.

  7. 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.
Recommended :  Clean up your code in laravel using model binding

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