Single Page Application using AngularJs Tutorial

  • The good thing about Angular is that it has a set of ready-to-use modules to simplify building of single page applications.
  • Then need to specify our module in ng-app attribute and controller in ng-controller attribute

    If you done this correctly, you should see:

    Since we have our module and controller set up and we know that Angular is working properly, we will start working on adding single page application support.

  • Since we are making a single page application and we don’t want any page refreshes, we’ll use Angular’s routing capabilities.
  • In our case, we will redirect user to the “/” route:

    Then we need to build controllers for every route (we already specified their names in routeProvider):

    Our pages will be simple:

    Note that we don’t need to use html, head, body tags in our page.

  • In this tutorial, you learned how to build a single page application using Angular.


AngularJs is a powerful javascript framework for building dynamic web applications. It became insanely popular nowadays. The good thing about Angular is that it has a set of ready-to-use modules to simplify building of single page applications.

@DamiOgunmola: Want to build single page application? Check this tutorial: SPA using AngularJs Step by Step

AngularJs is a powerful javascript framework for building dynamic web applications. It became insanely popular nowadays. The good thing about Angular is that it has a set of ready-to-use modules to simplify building of single page applications.

In this tutorial, we will show you how to build a simple single page application. Even though we will build a small app, you will learn the concepts and will be able to build larger apps.

Single page application (SPA) is a web application that fits on a single page. All your code (JS, HTML, CSS) is retrieved with a single page load. And navigation between pages performed without refreshing the whole page.

No page refresh

When you are using SPA, you don’t need to refresh the whole page, just load the part of the page which needs to be changed. Angular allows you to pre-load and cache all your pages, so you don’t need extra requests to download them.

Better user experience

SPA feels like a native application: fast and responsive.

Ability to work offline

Even if user loses internet connection, SPA can still work because all the pages are already loaded.

More complex to build

You need to write pretty much javascript, handle shared state between pages, manage permissions, etc.

To index your SPA app, search engine crawlers should be able to execute javascript. Only recently Google and Bing started indexing Ajax-based pages by executing JavaScript during crawling. You need to create static HTML snapshots specially for search engines.

Initial load is slow

SPA needs to download more resources when you open it.

Client should have javascript enabled

Of course, SPA requires javascript. But fortunately, almost everyone has javascript enabled.

Every angular application starts from creating a module. Module is a container for the different parts of your application: controllers, service, etc.

Lets define a simple controller:

After we created module and controller, we need to use them in our HTML.

First of all, we need to include angular script and app.js that we built.

Then need to specify our module in ng-app attribute and controller in ng-controller attribute

If you done this correctly, you should see:

Since we have our module and controller set up and we know that Angular is working properly, we will start working on adding single page application support.

Want to build single page application? Check this tutorial: SPA using AngularJs Step by Step Click To Tweet

ngRoute

Since we are making a single page application and we don’t want any page refreshes, we’ll use Angular’s routing capabilities.

We will use ngRoute module for that.

The ngRoute module provides routing, deeplinking services and directives for angular apps.

We need to include angular-route script after the main angular script.

Then we need to specify that our module depends on ngRoute module to be able to use it.

The next thing is to distinguish common HTML for every page. This HTML will be layout of the website.

Then we need to specify the place where HTML of each page will be placed in our layout. There is a ng-view directive for that.

ng-view is an Angular directive that will include the template of the current route (for example, /blog or /about) in the main layout file.

In plain words, it takes the file we specified for current route and injects it into the layout in the place of ng-view directive.

When HTML is ready, we need to configure our routes. We will use $routeProvider service from the ngRoute module.

For each route, we need to specify templateUrl and controller.

If user will try to go to the route that does not exist, we can handle this by using otherwise function. In our case, we will redirect user to the “/” route:

Then we need to build controllers for every route (we already specified their names in routeProvider):

Our pages will be simple:

home.html

blog.html

about.html

Note that we don’t need to use html, head, body tags in our page. This pages will always be used inside layout as partial HTML.

Lets add links that will switch our pages. The final HTML looks like this:

Browsers don’t support loading resources from disk using ajax, so you can use any HTTP server to serve static HTMLs.

python -m SimpleHTTPServer

If you don’t want to do this, you can include your partial HTMLs to index.html using script tag with type text/ng-template.

When angular see this templates, it will load its content to the template cache and will not perform ajax request to get their content.

In this tutorial, you learned how to build a single page application using Angular. Now you can go ahead and create more complex single page apps.

Single Page Application using AngularJs Tutorial

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.