Create single page website with angularjs

create-single-website-with-angularjs

how to install angularjHello World, Today we are going to discuss that how we can Create single page website with angularjs. This is very informative and easy tutorial. With the help of this tutorial you will be able to create single page application without reloading the page. It means you can easily navigate from one page to another without reloading the page. Following is the content of this tutorial.

  1. Introduction of AngularJs.
  2. Setup AngularJs with test app.
  3. Create Single Page Application.
  4. Test the application.

Introduction of AngularJs

Angularjs is a JavaScript framework that extends HTML by teaching it new syntax, making it suitable for developing really great web applications. With AngularJs you can introduce new HTML elements and custom attributes that carry special meaning. You can learn more about AngularJs From the following links:


Setup AngularJs with test app

  • Create project folder in your localhost.
  • Download AngularJs this link like following screenshot.

 

download-screen-1

download-screen-2

  • Download main angularjs file and save in project folder.
  • In this tutorial we will use route dependency of angularjs. Download this dependency as following screenshot.

route-download-screen-1

  • Click on the above link. You will see the list.
  • Download angular-route.min.js  file and save it in project folder.
  • Create script.js file in project folder.
  • Create index.html file in project with the following code.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- AngularJs -->
    <script src="angular.min.js"></script>
    <!-- Route File -->
    <script src="angular-route.min.js"></script>
    <!-- ScriptJs -->
    <script src="script.js"></script>
</head>
<body>
    <h1>This is AngularJs Application.</h1>
</body>
</html>

Here we have settled up application with angularjs. But how can we verify that angularjs is included in our application. Before starting our project we will create test app to confirm that angularjs has included in our application.

  • Replace the heading line with the following code.
<input ng-model="myInput" />
<h1>Hello {{ myInput }}</h1>
  • Add ng-app in html tag like following.
<html ng-app>
  • Now open the index.html file in browser and try to type text in input box. You will see the power of angularjs.

Please open file on your localhost server. If you open it directly then it will throw error.


Create single page website with angularjs

  • Open index.html file and replace the previous code with following code.
<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- AngularJs -->
    <script src="angular.min.js"></script>
    <!-- Route File -->
    <script src="angular-route.min.js"></script>
    <!-- ScriptJs -->
    <script src="script.js"></script>
</head>
<body>
   <ul>
        <li>
           <a href="#!">Home</a>
        </li>
        <li>
            <a href="#!/tasks">Tasks</a>
        </li>
        <li>
            <a href="#!/about">About</a>
        </li>
        <li>
            <a href="#!/contact">Contact</a>
        </li>
   </ul>
   <hr/>
   <div ng-view>
       
   </div>
</body>
</html>
  • Open script.js file and add the following code.
var sampleApp=angular.module('sampleApp',['ngRoute']);

// Route Configuration
sampleApp.config(function($routeProvider){
    $routeProvider
        .when('/',{
            controller:'HomeController',
            templateUrl:'templates/homePage.html'
        })
        .when('/tasks',{
            controller:'TaskController',
            templateUrl:'templates/taskPage.html'
        })
        .when('/about',{
            controller:'AboutController',
            templateUrl:'templates/aboutPage.html'
        })
        .when('/contact',{
            controller:'ContactController',
            templateUrl:'templates/contactPage.html'
        })
});

// Controllers
sampleApp.controller('HomeController',function($scope){
    $scope.pageTitle='Home Page';
});

sampleApp.controller('TaskController',function($scope){
    var taskList=[
        {
            title:'Task 1',
            description:'This is description of task 1'
        },
        {
            title:'Task 2',
            description:'This is description of task 2'
        },
        {
            title:'Task 3',
            description:'This is description of task 3'
        },
        {
            title:'Task 4',
            description:'This is description of task 4'
        },
        {
            title:'Task 5',
            description:'This is description of task 5'
        }
    ];
    $scope.pageTitle='Task List Page';
    $scope.taskList=taskList;
});

sampleApp.controller('AboutController',function($scope){
    $scope.pageTitle='About Page';
    
});

sampleApp.controller('ContactController',function($scope){
    $scope.pageTitle='Contact Page';
});
  • Create templates folder and create homePage.html, aboutPage.html, taskPage.html and contactPage.html files in this folder with following code.
<!-- homePage.html -->
<h2>{{pageTitle}}</h2>
<!-- aboutPage.html -->
<h2>{{pageTitle}}</h2>
<!-- taskPage.html -->
<h2>{{pageTitle}}</h2>
<ul>
    <li ng-repeat="task in taskList">
        <p>{{task.title}}</p>
        <small>{{task.description}}</small>
    </li>
</ul>
<!-- contactPage.html -->
<h2>{{pageTitle}}</h2>
  • Now run your application in localhost. You can see that all content are loading from the template without reloading the page.

 

Download Source Code From Below Link

[sociallocker id=”171″]Download Source Code [/sociallocker]

Leave a Reply