AngularJS at this point of time is so famous that probably all of us have heard of/tried it by now.
It is the popularity of this technology that’s forcing most of the ecommerce websites to shift to it.
The benefits provided by it 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,
Step 2
The next step is to create three partial views for the three links that we have here: Home, About and Contact. I would not be putting much data in it, just simple text providing some information about the page. Details are as below:
Contact
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.
-
-
- var myApp = angular.module("myApp", ['ngRoute']);
-
- myApp.config(['$routeProvider', function($routeProvider)
- {
- $routeProvider
-
- .when('/',
- {
- templateUrl: 'Pages/home.html',
- controller: 'homeCtrl'
- })
-
- .when('/about',
- {
- templateUrl: 'Pages/about.html',
- controller: 'aboutCtrl'
- })
-
- .when('/contact',
- {
- templateUrl: 'Pages/contact.html',
- controller: 'contactCtrl'
- })
-
- .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 as myApp.js and let's 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.
Step 7
We Run this application and the output is as below.
Home
About
Contact