HTML5 Zone is brought to you in partnership with:

I was born in 1981 in one little city. Since I was 10y/o I programmed in different languages. My first languages were basic, then C++/MFC, after .Net (C#, VB.Net, J#, ASP.Net), XSL+XML processing). In the last 5 years I worked with web languages (HTML, CSS, PHP, SQL, XML, XSL, JavaScript). After university I worked in several different companies, eventually becoming a blogger. This is my hobby too. Andrey is a DZone MVB and is not an employee of DZone and has posted 109 posts at DZone. You can read more from them at their website. View Full User Profile

Tutorial: How to Create a Responsive Website with AngularJS

10.10.2013
| 41781 views |
  • submit to reddit
Responsive website using AngularJS

In today’s tutorial, I’m going to show you the process of creating almost an entire website with a new library – AngularJS. However, firstly, I would like to introduce to you AngularJS. AngularJS is a magnificent framework for creating Web applications. This framework lets you extend HTML’s syntax to express your application’s components clearly and succinctly, and lets you use standard HTML as your main template language. Plus, it automatically synchronizes data from your UI with your javascript objects through 2-way data binding. If you’ve ever worked with jQuery, the first thing to understand about Angular is that this is a completely different instrument. jQuery is a library, but AngularJS is framework. When your code works with the library, it decides when to call a particular function or operator. In the case of the framework, you implement event handlers, and the framework decides at what moment it needs to invoke them.

Using this framework allows us to clearly distinguish between templates (DOM), models and functionality (in controllers). Let’s come back to our template, take a look at our result:

template preview


Live Demo
download in package

Description

This template is perfect for business sites. It consists of several static pages: the list of projects, privacy and about pages. Each product has its own page. There is also a contact form for communication. That is – all that is necessary for any small website. Moreover, it is also responsive template, thus it looks good on any device.

I hope you liked the demo, so if you’re ready – let’s start making this application. Please prepare a new folder for our project, and then, create next folders in this directory:

  • css – for stylesheet files
  • images – for image files
  • js – for javascript files (libraries, models and controllers)
  • pages – for internal pages

Stage 1. HTML

The main layout consists of four main sections: header with navigation, hidden ‘contact us’ form, main content section and footer. First at all we have to prepare a proper header:

index.html

<head>
    <meta charset="utf-8" />
    <meta name="author" content="Script Tutorials" />
    <title>Responsive website using AngularJS | Script Tutorials</title>
    <meta name="description" content="Responsive website using AngularJS - demo page">

    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

    <!-- add styles -->
    <link href="css/style.css" rel="stylesheet" type="text/css" />

    <!-- add javascripts -->
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
</head>

As you can see, it’s a quite ordinary header. Now – the header with the navigation:

<header>
    <div class="wrap">
        <!-- logo -->
        <a href="#!"><img class="logo" src="images/logo.png" /></a>

        <!-- navigation menu -->
        <nav>
            <ul>
                <li><a id="workBtn" href="#!/" ng-class="{activeSmall:part == 'projects'}" >Our Projects</a></li>
                <li><a id="privacyBtn" href="#!/privacy" ng-class="{activeSmall:part == 'privacy'}">Privacy & Terms</a></li>
                <li><a id="aboutBtn" href="#!/about" ng-class="{activeSmall:part == 'about'}">About</a></li>
                <li style="margin-right:0px"><a id="contactBtn" class="active" href="javascript: void(0)" ng-click="showForm()">Contact Us</a></li>
            </ul>
        </nav>
    </div>
</header>

It's an ordinary logo, and the menu is the usual UL-LI menu. The next section is more interesting – ‘Contact Us’ form:

<!-- contact us form -->
<div class="paddRow contactRow">
    <div class="wrap">
        <div class="head">Contact Us</div>
        <img class="close" src="images/close.png" ng-click="closeForm()" />
        <form ng-submit="save()" class="contactForm" name="form" ng-hide="loaded">
            <input class="input" required="required" type="text" name="name" placeholder="your name" ng-model="message.name" />
            <input class="input email" required="required" type="email" name="email" value="" placeholder="your email" ng-model="message.email" /><br />
            <textarea class="textarea" rows="5" required="required" placeholder="your message" ng-model="message.text" ></textarea>
            <button class="btn green">send message</button>
        </form>

        <!-- contact us form response messages -->
        <div ng-show="process" style="text-align:center">
            <img class="loader" src="images/loader.png" />
        </div>
        <div ng-show="success"><p>Your message has been sent, thank you.</p></div>
    </div>
</div>

Finally, the last key element is the main content section:

<!-- main content -->
<div style="position:relative">
    <div style="width:100%" ng-view ng-animate="{enter: 'view-enter', leave: 'view-leave'}"></div>
</div>

Have you noticed the numerous ‘ng-’ directives? All these directives allow us to do various actions directly in the DOM, for example:

  • ng-class – the ngClass allows you to set CSS classes on HTML an element, dynamically, by databinding an expression that represents all classes to be added.
  • ng-click – the ngClick allows you to specify custom behavior when element is clicked.
  • ng-hide – the ngHide directive shows and hides the given HTML element conditionally based on the expression provided to the ngHide attribute.
  • ng-include – fetches, compiles and includes an external HTML fragment.
  • ng-model – is a directive that tells Angular to do two-way data binding.
  • ng-show – the ngShow directive shows and hides the given HTML element conditionally based on the expression provided to the ngShow attribute.
  • ng-submit – enables binding angular expressions to onsubmit events.
Published at DZone with permission of Andrey Prikaznov, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)