How to create a single page application using angularJS

Hi friends, hopeyou are doing good. In today’s tutorial i am going to explain how to create a single page application using angularJS. Angular JS is very famous front-end framework based on javascript.

You can create a SPA (Single Page Application) using angular JS to design a intractive web-apps. I have designed this tutorial specially for angular JS beginners, who just started angularJS.

single-page-webapp-architecture

See live demo Download script

What is single page application?

A SPA (single page application) is a web applications/websites which runs in single page. Them aim to create a single page application to prove the user experience like desktop application.

It is developed using HTML, CSS and javascript to retrieved whole application on a single page load. You can also create the SPA (single page application) using below below javascript frameworks:

1) AngularJS
2) Ember.js
3) Meteor.js
4) ExtJS and
5) React JS

Create script.js file

Create script.js file and copy paste below code. In below code we have defined ngRoute to configure your angular app.

var app = angular.module('single-page-app', ['ngRoute']);

app.config(function ($routeProvider) {

    $routeProvider
            .when('/', {
                templateUrl: 'home.html'
            })
            .when('/test', {
                templateUrl: 'test.html'
            })
            .when('/about', {
                templateUrl: 'about.html'
            });
});

app.controller('cfgController', function ($scope) {
    $scope.message = "Hello world";
});

var app = angular.module('single-page-app', ['ngRoute']);

app.config(function ($routeProvider) {

$routeProvider

.when('/', {

templateUrl: 'home.html'

})

.when('/test', {

templateUrl: 'test.html'

})

.when('/about', {

templateUrl: 'about.html'

});

app.controller('cfgController', function ($scope) {

$scope.message = "Hello world";

});

Conclusion

Above are the simple & easy steps to create a single page application in angularjs. Download the sample code and change as you want. Also feel free to add your comments in below comment sections. Do you like & share this article with your friends, and don’t forget to follow us on Facebook and Twitter to learn cool angularjs tutorials.

If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.

How to create a single page application using angularJS

What is single page application?

Create script.js file

Conclusion

Recommended Posts:

webmentor