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.
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 and copy paste below code. In below code we have defined ngRoute to configure your angular app.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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"; }); |
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.
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
Tags: angular js, angular js example, angularJS 2.0, angularjs single page, angularjs single page app, download single page application, single page application angularjs, single page application examples, single page application using angular js, single page application using angularjs, single page application with angularjs, spa example
