Wednesday, 26 April 2017

Single page application in angularjs


Step by step approach for creating a single page application using angularjs.
1.       Lets take the Index.html  as the master page and rest of the pages are child page.
You need to include all the resource file reference to that page only.
For single page application you need to include  angular-route.min.js along with angular.min.js.

In below code snippet we included the bootstrap also to make the application responsive.




Code snippet :

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8" />

    <title>Single Page Application</title>

    <!--Outside CSS and JS you need to download from respective source -->
    <!--<link href="Style/bootstrap.min.css" rel="stylesheet" />-->
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <!--<script src="scripts/jquery.min.js"></script>-->
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="scripts/angular.min.js"></script>
    <!--<script src="scripts/route.js"></script>-->
    <script src="Scripts/angular-route.min.js"></script>
  

    <!-- Application using JS and CSS -->
    <script src="Scripts/application.js"></script>
    <link href="Content/Site.css" rel="stylesheet" />
    <!--<script src="Scripts/index.js"></script>-->
    <!--<script src="Scripts/application.js"></script>-->
    <script src="Scripts/application/Home.js"></script>
    <script src="Scripts/application/About.js"></script>
    <script src="Scripts/application/Contact.js"></script>
    <script src="Scripts/application/Events.js"></script>
    <script src="Scripts/application/Places.js"></script>
    <script src="Scripts/application/RathoreDetail.js"></script>
    <script src="Scripts/application/Gallary.js"></script>


</head>
<body>
    <header>
        <nav class="navbar navbar-default">
            <div class="container-fluid" >
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header" style="height:60px;" >
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><img  width="50" src="images/rathore-rajput-logo-wallpapers.jpg" style="border: solid 2px #ebed5d"  /><!--Khatriya Rathore--></a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" data-toggle="collapse" id="bs-example-navbar-collapse-1" style="font-size:18px;padding-top:10px">
                    <ul class="nav navbar-nav">
                        <!--<li><a href="#">Action</a></li>-->
                        <li><a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#Home">Home</a></li>
                        <li><a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#About">About</a></li>
                        <li><a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#RathoreDetail">Rathore Detail</a></li>
                        <li><a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#Gallary">Gallary</a></li>
                        <li><a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#Events">Events</a></li>
                        <li><a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#Places">Places</a></li>
                        <li><a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#Contact">Contact</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </header>

    <!-- MAIN CONTENT AND INJECTED VIEWS -->
    <div id="main" >

        <!-- angular templating -->
        <!-- this is where content will be injected -->
        <div ng-view></div>

    </div>
       

</body>
</html>

2.       Code for making the route for application which is written in application.js.
See the below code snippet;

       
        .when('/About', {
            templateUrl: 'About.html',
            controller: 'About'
        })

TemplateUrl is the URL for page which you want to show.
Controller is the name of controller which you want to bind for that page.

Code Snippet

var app = angular.module('myApp', ['ngRoute']);

// configure our routes
app.config(function ($routeProvider) {
    $routeProvider

        .when('/', {
            templateUrl: 'Home.html',
            controller: 'Home'
        })

        // route for the FixedDeposit page
        .when('/About', {
            templateUrl: 'About.html',
            controller: 'About'
        })

        // route for the Loan page

         .when('/Home', {
             templateUrl: 'Home.html',
             controller: 'Home'
         })

        
        .when('/Events', {
            templateUrl: 'Events.html',
            controller: 'Events'
        })

         
        .when('/Places', {
            templateUrl: 'Places.html',
            controller: 'Places'
        })

        .when('/Contact', {
            templateUrl: 'Contact.html',
            controller: 'Contact'
        })
         
        .when('/Gallary', {
            templateUrl: 'Gallary.html',
            controller: 'Gallary'
        })
        .otherwise({
            redirectTo: '/',
            templateUrl: 'Home.html',
            controller: 'Home'
        });
});


3.       How there is code in one page that how we will display the page


Below code snippet for controller it is for contact page
// Controller for Loan
app.controller('Contact', function ($scope) {
    $scope.message = 'Check the details about Loan.';
});



Below code snippet for HTML page
<div ng-controller="Contact">
    <div class="form-group">
        <div class="row">
            <div class="col-md-10 col-md-offset-1 headerText">
                Contacts
            </div>
        </div>
        <div class="row">

            <div class="col-md-1"> </div>
            <div class="col-md-10">
                You can see the list of contacts.
            </div>
            <div class="col-md-1"> </div>
        </div>

    </div>

</div>



No comments:

Post a Comment

Others

You will like to read it