Create your blog with Angularjs From Scratch

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 

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

    • dufferine

      Just a small heads up. ‘yo –help’ did not work.
      This is the message I get:
      “To see the 16 registered generators run yo with the `–help` option.”
      ‘yo –help’ works.

    • dufferine

      The code listed in page 8 for the star rating system does not work. You’re missing something somewhere.

      • Deven Rathore

        Let us find out

    • Javiere

      Is there any place where the whole code of the tutorial is available? It would be pretty useful.

    • Javiere

      The usage described of carousel is obsolete. It needs to be used as shown here: https://angular-ui.github.io/bootstrap/#/carousel

    • Kunal Ojha

      Has the whole code been published anywhere?

    • Ahkansha

      This is very excellent. The command lines and coding is nice. The tips are used in getting idea to create new post.

    • Niti rai

      The post is very nice. The features of angular tips is used to create new login. And then validators coding is getting some idea to login page to username and password.

    • Robin And Jay

      Since Angular changes often, can you please share some more info here? Maybe a gruntfile or package.json with specific versions, or even just a git repo we can check out and follow along? Step 4 is entirely broken as of today, since yo and angular-generator no longer generate a “hero” block.

    Pin It on Pinterest

    Shares