Views In AngularJs

Ng-View:-

ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

Requires the ngRoute module to be installed.

Source(angularjs.org)

Example:-

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

$routeProvider:-

It set the configuration of urls, map them with the corresponding html page or ng-template, and attach a controller with the same.

Example:-

var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
   $routeProvider.  
   when('/addStudent', {
    templateUrl: 'addStudent.htm', controller: 'AddStudentController'
   }).  
   when('/viewStudents', {
 templateUrl: 'viewStudents.htm', controller: 'ViewStudentsController'
   }).
   otherwise({
      redirectTo: '/addStudent'
   }); 
}]);

Following are the important points to be considered in above example.

• $routeProvider is defined as a function under config of mainApp module using key as '$routeProvider'.
• $routeProvider.when defines a url "/addStudent" which then is mapped to "addStudent.htm". addStudent.htm should be present in the same path as main html page.If htm page is not defined then ng-template to be used with id="addStudent.htm". We've used ng-template.
•  "otherwise" is used to set the default view.
•  "controller" is used to set the corresponding controller for the view.

Thanks!