DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Single Page Application in AngularJS

Single Page Application in AngularJS

Single page applications are steadily regaining popularity, since not every site needs to be dynamic. Here's how to create on in AngularJS.

Vipul Malhotra user avatar by
Vipul Malhotra
·
Jul. 12, 16 · Web Dev Zone · Tutorial
Like (8)
Save
Tweet
9.95K Views

Join the DZone community and get the full member experience.

Join For Free

AngularJS at this point in time is so famous that probably all of us have heard of or tried it by now. It is the popularity of this technology that’s forcing most eCommerce websites to shift to it. 

The benefits provided are fabulous: fast routing, two-way data binding, etc.

Today we are going to try and make a Single Page application using AngularJS in Visual Studio 2013.

Step 1

Let’s create HTML for the Default page of our application. I am using the default layout of an MVC application as below,

Image title

Step 2

The next step is to create three partial views for the three links that we have here: Home, About, and Contact. I won't be putting much data in it, just simple text providing some information about the page. Details are as below:

About 

Image title

Contact

Image title

Step 3

The next step is to create a configuration file (named config.js) which will handle all the routing that is needed for this application. The code of the file is as below. Please see through the comments as everything is pretty much well explained in it. 

/// <reference path="angular.js" />    
//we have created an app for the ng-app mentioned in our page and included the ngRoute for routing configuration  
var myApp = angular.module("myApp", ['ngRoute']);  
//start configuring routes  
myApp.config(['$routeProvider', function($routeProvider)  
{  
    $routeProvider  
    //when the home page is requested then call the view "home.html" and at the same time dynamically assign the controller "homeCtrl" to the page  
    .when('/',  
    {  
        templateUrl: 'Pages/home.html',  
        controller: 'homeCtrl'  
    })  
    //when the requested url is "/about" then call the view "about.html" and assign the controller "aboutCtrl" to it  
    .when('/about',  
    {  
        templateUrl: 'Pages/about.html',  
        controller: 'aboutCtrl'  
    })  
    //when the requested url is '/contact then call the view "contact.html" and assign the controller "contactCtrl" to it  
    .when('/contact',  
    {  
        templateUrl: 'Pages/contact.html',  
        controller: 'contactCtrl'  
    })  
    //in case any other url is requested then direct the user to home page  
    .otherwise(  
    {  
        redirectTo: '/'  
    });  
}])  

The configuration had been done for the three URLs that we expect to be requested including the HTML file that it will request and also the associated controller with it.

Step 4

Include the above generated file in your default.html page.

Step 5

In this step we will create another JS file, which will contain information regarding the controller of each of the pages mentioned above: Home, About, and Contact. Let’s name this file myApp.js and code it as below. 

myApp.controller('homeCtrl', ['$scope', function ($scope) {  
    $scope.message = "this is message from Home Page controller";  

}]);  


myApp.controller('aboutCtrl', ['$scope', function ($scope) {  
    $scope.message = "this is message from About Page controller";  

}]);  

myApp.controller('contactCtrl', ['$scope', function ($scope) {  
    $scope.message = "this is message from Contact Page controller";  

}]);  

Step 6

Please make sure that this file is included in the index.html, i.e. our main page.

The final outcome of the index.html page is as below.

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="myApp">  
<head>  
    <title>AngularJs Single Page App</title>  
    <script src="Scripts/angular.js"></script>  
    <script src="Scripts/angular-route.js"></script>  
    <script src="Scripts/config.js"></script>  
    <script src="Scripts/myApp.js"></script>  
    <link href="Css/site.css" rel="stylesheet" />  
</head>  
<body>  
    <header>  

        <div class="content-wrapper">  

            <div class="float-right">  
                <nav>  
                    <ul id="menu">  
                        <li><a href="#/">Home</a></li>  
                        <li><a href="#/about">About</a></li>  
                        <li><a href="#/contact">Contact</a></li>  
                    </ul>  
                </nav>  
            </div>  
        </div>  
    </header>  
    <div id="body">  
          <div ng-view></div>  

    </div>    

</body>  
</html>  

The final project structure is as below.

Image title

Step 7

We run this application and the output is as below.

Home

Image title

About

Image title

Contact

Image title

application AngularJS

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Understanding Cursors in Apache Pulsar
  • Here Is Why You Need a Message Broker
  • API Security Weekly: Issue 173
  • A Guide to Natural Language Processing (Part 2)

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo