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 the 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 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:
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
As you can see, it’s quite ordinary header. Now – the header with the navigation:
The ordinary logo, the menu is the usual UL-LI menu. Next section is more interesting – ‘Contact Us’ form:
Finally, the last key element: the main content section:
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.
Stage 2. CSS
In this rather large section you can find all the styles used
css/style.css
Please note, that CSS3 transitions are used, it means that our demonstration will only work in most modern browsers (FF, Chrome, IE10+ etc)
Stage 3. JavaScript
As I mentioned before, our main controller and the model are separated. The navigation menu can be handled here, and we also can operate with the contact form.
js/app.js
Pay attention, when we request a page, it loads an appropriate page from the ‘pages’ folder: about.html, privacy.html, index.html. Depending on selected product, it opens one of product pages: product1.html, product2.html, product3.html or product4.html
In the second half there are functions to slide the contact form and to handle with it’s submit process (to the sendemail.php page). Next is the controller file:
js/controllers.js
It is empty, because we have nothing to use here at the moment
Stage 4. Additional pages
AngularJS loads pages asynchronous, thereby increasing the speed. Here are templates of all additional pages used in our project:
pages/about.html
pages/privacy.html
pages/footer.html
pages/index.html
Finally, the product pages. All of them are prototype, so I decided to publish only one of them.
pages/index.html
Finishing touches – responsive styles
All of these styles are needed to make our results look equally well on all possible mobile devices and monitors:
Live Demo
download in package
Conclusion
That’s all for today, thanks for your patient attention, and if you really like what we did today – share it with all your friends in your social networks using the form below.