Simple Example of ng-view directive in AngularJS

Introduction:

This article explain you about  Single Page Application via multiple views on a single page using
AngularJS

Description:

AngularJS supports Single Page Application via multiple views on a single page. To do this AngularJS has provided ng-view directives and $routeProvider services.
To implement this we need to write the code like as shown below

ng-view directives:-

<div ng-app = "myApp">
   ...
   <div ng-view></div>

</div>    

$routeProvider :-

$routeProvider is the key service which set the configuration of urls, map them with the corresponding html page or ng-template, and attach a controller with the same.

 Points to be considered in example.

 Download  angular-route.js file .

 $routeProvider is defined as a function under config of mainApp module using key as routeProvider'.

 $routeProvider.when defines a url "/#Home" which then is mapped to "Home.html". Home.html  should be present in the same path as main html page.

"otherwise" is used to set the default view.

"controller" is used to set the corresponding controller for the view.

Index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angular JS</title>
    <link href="css/master.css" rel="stylesheet" />
    <link href="css/collapsemenu.css" rel="stylesheet" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="scripts-common/jquery-2.1.4.js"></script>
    <script src="scripts-angular/angular.js"></script>
    <script src="scripts-angular/angular-route.js"></script>

    <script src="scripts-ctrls/ng-main-ctrl.js"></script>

    <script src="scripts-ctrls/ng-menu.js"></script>
    <script type="text/javascript">
        var flag = 0;

        $(document).ready(function () {

            $('#containerview').css('height', ($(window).height() - 30) + 'px');
            $('#containerview').css('width', ($(window).width() - 170) + 'px');
            $('#containernavigation').css('height', ($(window).height() - 30) + 'px');

        });

        var slidedMenuId = "";
        function expand(menuid) {
            if (slidedMenuId != menuid) {
                $(".collapsemenu").slideUp(400);
                $('#' + menuid).slideDown(400);
                slidedMenuId = menuid;
            }
            else {
                $(".collapsemenu").slideUp(400);
                $('#' + menuid).slideUp(400);
                slidedMenuId = "";
            }
        }


    </script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            "use strict";
            $('#containernavigation').perfectScrollbar();
        });
    </script>
    <base href="/" />
</head>
<body>
    <div class="header">
        <div class="header_left">
        </div>
        <div class="header_middle">
        </div>
        <div class="header_right">

            <div class="header_userinfo_left">
            </div>

            <div class="header_userinfo_right">
                <div class="notification">
                </div>
                <div class="userphoto_panel">
                </div>
                <div class="logout">
                </div>
            </div>

        </div>
        <div class="clear"></div>
    </div>


    <div ng-app="myApp">
        <div id="sliderNavigation" style="border: 0px solid #000;">
            <div class="page_container_left font" style="border: 0px solid #000;" id="containernavigation">
                <div id="admin_menu" runat="server">
                    <div id="setting_tab" runat="server" clientidmode="Static" class="collapse_button collapse_button_gradient" onmouseover="this.className='collapse_button collapse_button_gradient_hover'" onmouseout="this.className='collapse_button collapse_button_gradient'" onclick="expand('setting_menu')">
                        <a class="setting_tab">Setting</a>
                    </div>
                    <div id="setting_menu" class="collapsemenu">
                        <a class="collapsemenu_item" href="#/Home">Home</a>
                        <a class="collapsemenu_item" href="#About">About</a>
                        <a class="collapsemenu_item" href="#Contact">Contact</a>

                    </div>

                    <div id="home_tab" runat="server" clientidmode="Static" class="collapse_button collapse_button_gradient" onmouseover="this.className='collapse_button collapse_button_gradient_hover'" onmouseout="this.className='collapse_button collapse_button_gradient'" onclick="expand('home_menu')">
                        <a class="setting_tab">Home</a>
                    </div>
                    <div id="home_menu" class="collapsemenu">
                        <a class="collapsemenu_item" href="#/Home">Home</a>
                        <a class="collapsemenu_item" href="#About">About</a>
                        <a class="collapsemenu_item" href="#Contact">Contact</a>
                    </div>

                    <div id="about_tab" runat="server" clientidmode="Static" class="collapse_button collapse_button_gradient" onmouseover="this.className='collapse_button collapse_button_gradient_hover'" onmouseout="this.className='collapse_button collapse_button_gradient'" onclick="expand('about_menu')">
                        <a class="setting_tab">About</a>
                    </div>
                    <div id="about_menu" class="collapsemenu">
                        <a class="collapsemenu_item" href="#/Home">Home</a>
                        <a class="collapsemenu_item" href="#About">About</a>
                        <a class="collapsemenu_item" href="#Contact">Contact</a>
                    </div>
                </div>
            </div>
            <%--Container Pages--%>
                <div style="border: 0px solid #000;" id="containerview" class="page_container font">
                    <div class="col-lg-12 ">
                        <div class="pagetittle">
                            : : 
                            <p ng-bind="pagetitle"></p>
                        </div>
                    </div>
                    <div class="col-lg-12 ">
                        <div ng-view class="content">
                        </div>
                    </div>
                </div>

        </div>
    </div>
    <div class="footer">
        © 2016 www.logicspark.in All Rights Reserved. The content is copyrighted to Muhammad Asif.
    </div>
</body>
</html>

Home.Html :

<div style="margin: auto; width: 50%;">
<h1>
{{home}}</h1>
</div>

About.Html:

<div style="margin: auto; width: 50%;">
<h1>
{{about}}</h1>
</div>

Contact.Html:

<div style="margin: auto; width: 50%;">
<h1>
{{contact}}</h1>
</div>

JavaScript:- menu.js

var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(function ($routeProvider) {

    $routeProvider.
    //settings
    when('/Home', {

        templateUrl: '../Pages/Home.html',
        controller: 'homectrl',

    }).
    when('/About', {

        templateUrl: '../Pages/About.html',
        controller: 'aboutctrl',

    }).
        when('/Contact', {

            templateUrl: '../Pages/Contact.html',
            controller: 'contactctrl',

        }).
    otherwise({
        redirectTo: '/'
    });

});

myApp.controller("homectrl", function ($scope) {
    $scope.home = 'WelCome to Home Page';
});
myApp.controller("aboutctrl", function ($scope) {
    $scope.about = 'WelCome to AboutUS Page';
});
myApp.controller("contactctrl", function ($scope) {
    $scope.contact = 'WelCome to ContactUS Page';
});


DEMO

ng-view

Blogger Tips and TricksLatest Tips And TricksBlogger Tricks