Quick Contact


    AngularJSng-view

    Angular technology is known for making a single page application. It means multiple views is displayed on a single page without reloading the page. The new page gets displayed on the existing page. AngularJS has provided ng view, ng-template directives and $routeProvider service, for this purpose.

    ng view in AngularJS

    ng- view is a directive that works like a placeholder. It creates a placeholder where a corresponding view can be placed based on the configuration. Here, a view can be HTML or ng-template view.

    ng view Implementation

    To implement ng-view in AngularJS follow this procedure:

    Step – 1

    First, include the angular-route file as a script reference.

    < script src= “lib/angular-route.js”>< /script>

    This route file is necessary to make use of functionalities having multiple routes and views. It can be downloaded from AngularJS website.

    Step – 2

    In this step,

    1. Add HREF tags, which will represent links to “Adding a New Student” and “Displaying Student”.
    2. Then add a div tag with the ng view directive, which will represent the view. This will allow the corresponding view to be injected whenever the user clicks on either the “Add a New Student” or the “Displaying Student”.

    < div class="container">

    < ul>< li>< a href="#!NewEvent"> Add New Student< /a>< /li>

    < li>< a href="#!DisplayEvent"> Display Student< /a>< /li>< /ul>

    < divng-view>< /div>< /div>

    Step – 3

    In your script tag, add the following code.

    This section of code means that when the user clicks on the HREF tag “Add New Student” which was defined in the div tag earlier. It will go to the web page add_student.html, and will take the code from this particular web page and inject it into the view. Secondly, for processing the business logic for this view, go to the “AddStudentController”.

    This section of code means that when the user clicks on the HREF tag “DisplayStudent” which was defined in the div tag earlier. It will go to the web page show_student.html, take the code from there and inject it into the view. Secondly, for processing the business logic for this view, go to the “ViewStudentController”.

    The code written in otherwise method in below code means that the default view shown to the user is the DisplayStudent view.

    	var app = angular.module('sampleApp',["ngRoute"]);
    	app.config(function($routeProvider){
    	$routeProvider.
    	when("/NewStudent",{
    	templateUrl:"add_student.html",
    	controller: "AddStudentController"
    	}).
    	when("/DisplayStudent", {
    	templateUrl: "show_student.html",
    	controller: "ViewStudentController"
    	}).
    	otherwise({
    	redirectTo: '/DisplayStudent'
    	});
    	});
    	
    Step – 4

    Next step is to add controllers for both the “DisplayStudent” and “Add New Student” functionality. When the corresponding view will show to the user than the message will appear. Further, this will add to the process of business logic.

    	app.controller("AddStudentController", function($scope){
    	$scope.message = "This is to Add a new Student";
    	});
    	app.controller("ViewStudentController",function($scope){
    	$scope.message = "This is display an Student";
    	});
    	
    Step – 5

    Create pages called add_student.html and show_student.html.

    In our case, the add_student.html page will have a header tag along with the text “Add New Student” and have an expression to display the message “This is to Add a new Student”.

    Similarly, the show_student.html page will also have a header tag to hold the text “Display Student” and also have a message expression to display the message “This is to display students.”

    The value of the message variable will be injected based on the controller which is attached to that view.

    For each page, we are going to add the message variable, which can inject from each corresponding controller.

    i. add_student.html

    < h2>Add New Student< /h2>

    {{message}}

    ii. show_student.html

    < h2>Display Student< /h2>

    {{message}}

    Code for the scenario
    	< !DOCTYPE html>
    	< html>
    	< head>
    	< metachrset="UTF 8">
    	< title> Registration< /title>
    	< script src="https://code.angularjs.org/1.5.9/angular-route.js">< /script>
    	< scriptsrc="https://code.angularjs.org/1.5.9/angular.min.js">< /script>
    	< scriptsrc="lib/bootstrap.js">< /script>
    	< /head>
    	< body ng-app="sampleApp">
    	< div class="container">
    	< ul>< li>< a href="#!NewStudent"> Add New Student< /a>< /li>
    	< li>< a href="#!DisplayStudent"> Display Student< /a>< /li>
    	< /ul>
    	< divng-view>< /div>
    	< /div>
    	< script>
    	var app = angular.module('sampleApp',["ngRoute"]);
    	app.config(function($routeProvider){
    	$routeProvider.
    	when("/NewStudent",{
    	templateUrl:"add_student.html",
    	controller: "AddStudentController"
    	}).
    	when("/DisplayStudent", {
    	templateUrl: "show_student.html",
    	controller: "ViewStudentController"
    	}).
    	otherwise({
    	redirectTo: '/DisplayStudent'
    	});
    	});
    	app.controller("AddStudentController", function($scope){
    	$scope.message = "This is to Add a new Student";
    	});
    	app.controller("ViewStudentController",function($scope){
    	$scope.message = "This is to display Student";
    	});
    	< /script>
    	< /body>
    	< /html>
    	
    Output:
    • Add New Student
    • Display Student

    This is to add the new student

    If we want to display the display Student view the output will be:

    • Add New Student
    • Display Student

    This is to display student

    Enroll Yourself in Live Classes For Angular Training Online.

    Copyright 1999- Ducat Creative, All rights reserved.