{"id":46875,"date":"2019-01-13T09:39:24","date_gmt":"2019-01-13T04:09:24","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=46875"},"modified":"2020-01-31T10:45:53","modified_gmt":"2020-01-31T05:15:53","slug":"angularjs-ng-view","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/angularjs-ng-view\/","title":{"rendered":"AngularJS ng-view – Learn How to Implement View in AngularJS?"},"content":{"rendered":"

Angular technology<\/strong><\/a> 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.<\/p>\n

So, are you ready to learn ng view in AngularJS?<\/p>\n

\"ng-view<\/a>

ng-view implementation Process<\/p><\/div>\n

1. What is View in AngularJS (ng-View)?<\/h2>\n

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\u2019s choice, a view is shown. Using the combination of views and routes<\/strong>, an application can be divided in logical views and bind different views to controllers.<\/p>\n

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

\"ng<\/a>

Example of ng view in AngularJS<\/p><\/div>\n

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.<\/p>\n

Hence, we have two reference links in our application. One is #show<\/strong> and another is #new<\/strong>. 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.<\/p>\n

We have to make multiple controllers for multiple views. As every view have its corresponding controller<\/strong> that will control the business logic for that functionality.<\/p>\n

2. ng view in AngularJS<\/h2>\n

ng- view is a directive<\/strong><\/a> 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.<\/p>\n

3. How ng view Implements?<\/h2>\n

To implement ng-view in AngularJS follow this procedure:<\/p>\n