An AngularJS demo/boilerplate for a simple 3-page website, with pages loaded via Ajax.
JavaScript CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

What is this?

This is a little demo of an AngularJS-based 3-page website, with AJAX-loading of the pages and direct links to each page (with #fragment URLs).

It demonstrates the use of the Angular Routes.

Also, the site demonstrates one way to make the current page's link highlighted in the navigation. This is done via ng-class directive of Angular. (Probably not the most elegant way to implement this.)

Additionally, the demo uses Twitter Bootstrap for CSS styles.

How to see it in action?

Put the files into a web-accessible directory, and open the index.html file in your browser.

Or see it online, a slightly customized version.

How to use it?

This demo may serve as a step on the path of getting to know AngularJS. Angular has many powerful features, while this little demo only uses 2 or 3 of them. But it can show, how to make a nice mini-site, that is potentially useful.

If you want to understand how it works, here are the main files you should look at:

  • index.html -- the master html and the wrapper-template for the pages. Also, it defines the global Pages variable which lists the navigation items, the page URLs and the link names.
  • scripts/nav.js -- creates the navigation links in the page header based on the Pages variable.
  • scripts/app.js -- initializes the Angular App & configures it.
  • views/main.html and other html files in the views/ folder -- the partials, the page content.

I've put a lot of comments into these files, to make them easy to understand.

See also


I've used yeoman and bower to produce this demo.

(Both are great tools that I recommend.)


This demo contains more code by the others than my code. My code is in public domain.