--- title: "Single Page Application in AngularJS" description: "Single Page Application facilitates you to easily navigate between different views without refreshing the entire page." author: "Ashutosh Patel" published: 2024-06-24 updated: 2024-06-24 canonical: https://www.mindstick.com/articles/336207/single-page-application-in-angularjs category: "angular js" tags: ["javascript", "angular js", "angularjs routing"] reading_time: 6 minutes --- # Single Page Application in AngularJS #### AngularJS Single Page Application Building a Single Page Application (**SPA**) in AngularJS requires you to configure [your application](https://answers.mindstick.com/qa/97584/how-do-you-choose-the-correct-camera-for-your-application) to load all the necessary code (**HTML**, **CSS**, **[JavaScript](https://www.mindstick.com/forum/12869/how-to-c-sharp-and-javascript-email-validation-regex)**) into the first single page. AngularJS makes this easy by allowing you to define methods, templates, and [controllers](https://www.mindstick.com/forum/155596/how-do-asynchronous-controllers-work-in-asp-dot-net), and makes it easy to move between different views without having to refresh the entire page. Here's a step-by-step guide to creating a simple SPA using AngularJS, #### 1. Configure your AngularJS application First, add AngularJS to your HTML file. You can either download AngularJS or use the **CDN** link. ```html AngularJS SPA Example
``` #### 2. Define your AngularJS Module and configure Routing In your **main.js** (or any JavaScript file), define your AngularJS module, configure routing using `$routeProvider`, and create controllers for each view. ```javascript // Routing code for load view page .config(function($routeProvider){ $routeProvider // home page .when('/home', { templateUrl: 'Home.html', controller: 'homeController' }) // load when click on userdata .when('/userdata', { templateUrl : 'ng-RouteUserData.html', controller : 'userController' }) // laod when click on posts .when('/posts', { templateUrl : 'ng-RoutePosts.html', controller : 'postController' }) // default load for ng-route.html .otherwise({ redirectTo: '/' }); }) // controllers of all pages .controller("homeController", ["$scope", function($scope){ console.log("Home page"); }]) .controller('userController',['$scope', '$http', '$interval', function($scope, $http, $interval){ console.log("Home page"); }]) // Angular code for Posts.html page .controller('postController',['$scope', '$http', '$interval', function($scope, $http, $interval){ console.log("Home page"); }]); ``` #### 3. Create Your Views Create separate HTML files for each view (home.html and about.html) in the view folder. ## Home.html ```html

{{ message }}

This is the home page content.

``` ## ng-RoutePosts.html ```html

{{ message }}

This is the Posts page content.

``` ## ng-RouteUserData.html ```html

{{ message }}

This is the UserList page content.

``` #### 4. Set Up Navigation Add [navigation](https://answers.mindstick.com/qa/43106/what-was-the-purpose-of-the-navigation-acts) links ( tags) between views in your main HTML file. ```html
Home About
``` \ **In the example above**\ `ng-app="myApp"`: Describes the AngularJS application module.\ `ngRoute`: AngularJS module routing.\ `$routeProvider`: Configures routes using the .when() and .otherwise() methods.\ `ng-view`: A directive in which AngularJS will display the views associated with each method.\ `Controllers`: Define controllers for each view to handle logic and data specific to that view.\ `Navigation: Use ` to navigate between views. AngularJS will [handle routing](https://www.mindstick.com/forum/159961/how-do-you-handle-routing-in-express-js) without full page reload. **Also, Read:** [Explain Routing in AngularJS](https://www.mindstick.com/blog/304405/explain-routing-in-angularjs) ## Example- ## ng-route.html file (Index file) ```html AngularJS Routing

ngRoute

Home UserData Posts

``` ## Home.html ```html

Angular Routing Example

Here you learn about AngularJs Routing in details. Routing refers to the mechanism that allows you to define navigation paths within your application and map them to specific views or components that should be displayed based on the URL.

angular-1
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

angular-2
Card title

This card has supporting text below as a natural lead-in to additional content.

angular-3
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

``` ## ng-RoutePosts.html ```html

All Posts

{{post.id}}

{{post.title}}

{{post.body}}

``` ## ng-RouteUserData.html ```html

All Users

Current Time: {{currTime}}

{{user.id}} {{user.username}}

Name: {{user.name}}

Email ID: {{user.email}}

Phone No: {{user.phone}}

Address: {{user.address.street+' '+user.address.city+' - '+user.address.zipcode}}

``` ## main.js (Main JavaScript file) ```javascript angular.module("myApp", ["ngRoute"]) // Routing code for load view page .config(function($routeProvider){ $routeProvider // home page .when('/home', { templateUrl: 'Home.html', controller: 'homeController' }) // load when click on userdata .when('/userdata', { templateUrl : 'ng-RouteUserData.html', controller : 'userController' }) // laod when click on posts .when('/posts', { templateUrl : 'ng-RoutePosts.html', controller : 'postController' }) // default load for ng-route.html .otherwise({ redirectTo: '/' }); }) // controllers of all pages .controller("homeController", ["$scope", function($scope){ console.log("Home page"); }]) .controller('userController',['$scope', '$http', '$interval', function($scope, $http, $interval){ $interval(function(){ $scope.currTime = new Date().toLocaleTimeString(); }); // Angular code for userData page $scope.urlUser = "https://jsonplaceholder.typicode.com/users"; $http({ method: "GET", url : $scope.urlUser }).then(function(response){ $scope.Users = response.data; }).catch(function(error){ console.log("Error: ", error); }); }]) // Angular code for Posts.html page .controller('postController',['$scope', '$http', '$interval', function($scope, $http, $interval){ $scope.currTime = new Date().toLocaleTimeString(); $interval(function(){ $scope.currTime = new Date().toLocaleTimeString() }, 1000); $scope.urlData = "https://jsonplaceholder.typicode.com/posts"; $http({ method : "GET", url : $scope.urlData }).then(function Success(respnose){ $scope.myData = respnose.data.slice(0, 20); }).catch(function OnError(error){ console.log("Error : ", error); }); }]); ``` > Note- All above file keep in same folder or directory ## Output- ![Single Page Application in AngularJS](https://www.mindstick.com/mindstickarticle/972a985e-90f0-43e6-885d-32cf3ca44e74/images/3c67b0cc-a1cf-47b2-b115-28832cf8683e.png) This template provides the basic [framework](https://www.mindstick.com/interview/1105/what-is-a-framework) for a Single Page Application in AngularJS. [As your](https://answers.mindstick.com/qa/95660/how-do-you-remove-firefox-as-your-default-browser) application grows, you can add more views, controllers, and services to [handle complex](https://www.mindstick.com/forum/160789/how-to-handle-complex-data-binding-scenarios-in-knockout-js) use cases. **Also, Read:** [Fetch Data from RESTFul APIs in AngularJS](https://www.mindstick.com/articles/336200/fetch-data-from-restful-apis-in-angularjs) --- Original Source: https://www.mindstick.com/articles/336207/single-page-application-in-angularjs Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.