AngularJS ng-view – Learn How to Implement View in AngularJS?

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. Here, we will learn about ng view and its implementation process.

So, are you ready to learn ng view in AngularJS?

ng-view implementation Process

ng-view implementation Process

1. What is View in AngularJS (ng-View)?

AngularJS View is a content which is displayed to the user. According to a user request, the view of an application is displayed to the user. Since in one single page application, it can have a number of views. Therefore, according to the user’s choice, a view is shown. Using the combination of views and routes, an application can be divided in logical views and bind different views to controllers.

Our application become more manageable by dividing it into into different views and using routing to load different views of an application. For example, we have a registration application, in which an admin can add new students and view students.

ng view in AngularJS Example

Example of ng view in AngularJS

To implement this registration application, instead of creating two different web pages one for add student and another for view student, in angular we can create two different views on the same page.

Hence, we have two reference links in our application. One is #show and another is #new. Therefore, when the application goes to MyApp#show, it will show the view of view student but it will not leave the existing page. Similarly, when the application goes to MyApp#new, it will show the view of add student in the existing page.

We have to make multiple controllers for multiple views. As every view have its corresponding controller that will control the business logic for that functionality.

2. 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.

3. How ng view Implements?

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>
   <div ng-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.

Join DataFlair on Telegram
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>
     <meta chrset="UTF 8">
     <title> Registration</title>
     <script src="https://code.angularjs.org/1.5.9/angular-route.js"></script>
     <script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
     <script src="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>
     <div ng-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

Flow Chart for ng-view implementation

Flow Chart for ng-view implementation

Flow Chart for ng-view implementation

4. Conclusion

Hence, we learned all the steps for implementation of ng view in AngularJS with their syntax and examples. Hope, you liked our explanation. Furthermore, if you have any query, feel free to approach us through comment box. We will definitly come to you!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.