AngularJS - Vistas

AngularJS admite la aplicación de una sola página a través de múltiples vistas en una sola página. Para hacer esto, AngularJS ha proporcionado directivas ng-view y ng-template, y servicios $ routeProvider.

Directiva ng-view

La directiva ng-view simplemente crea un marcador de posición donde se puede colocar una vista correspondiente (vista HTML o ng-template) según la configuración.

Uso

Defina un div con ng-view dentro del módulo principal.

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

</div>

Directiva ng-template

La directiva ng-template se usa para crear una vista HTML usando una etiqueta de script. Contiene el atributo id que usa $ routeProvider para mapear una vista con un controlador.

Uso

Defina un bloque de script con el tipo como ng-template dentro del módulo principal.

<div ng-app = "mainApp">
   ...
	
   <script type = "text/ng-template" id = "addStudent.htm">
      <h2> Add Student </h2>
      {{message}}
   </script>

</div>

Servicio $ routeProvider

$ RouteProvider es un servicio clave que establece la configuración de las URL, las asigna con la página HTML o ng-template correspondiente y adjunta un controlador con la misma.

Uso 1

Defina un bloque de script con el tipo como ng-template dentro del módulo principal.

<div ng-app = "mainApp"> 
   ... 
   <script type = "text/ng-template" id = "addStudent.htm"> 
      <h2> Add Student </h2> 
      {{message}} 
   </script>  
</div>

Uso 2

Defina un bloque de script con el módulo principal y establezca la configuración de enrutamiento.

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'
   });
	
}]);

Es importante considerar los siguientes puntos en el ejemplo anterior:

$ routeProvider se define como una función en la configuración del módulo mainApp usando la clave como '$ routeProvider'.
$ routeProvider.when define una URL "/ addStudent", que se asigna a "addStudent.htm". addStudent.htm debe estar presente en la misma ruta que la página HTML principal. Si la página HTML no está definida, entonces ng-template debe usarse con id = "addStudent.htm". Usamos ng-template.
"de lo contrario" se utiliza para establecer la vista predeterminada.
"controlador" se utiliza para establecer el controlador correspondiente para la vista.

Ejemplo

El siguiente ejemplo muestra el uso de todas las directivas mencionadas anteriormente.

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Views</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js">
      </script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp">
         <p><a href = "#addStudent">Add Student</a></p>
         <p><a href = "#viewStudents">View Students</a></p>
         <div ng-view></div>
         
         <script type = "text/ng-template" id = "addStudent.htm">
            <h2> Add Student </h2>
            {{message}}
         </script>
         
         <script type = "text/ng-template" id = "viewStudents.htm">
            <h2> View Students </h2>
            {{message}}
         </script>
      </div>
      
      <script>
         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'
            });
         }]);
         mainApp.controller('AddStudentController', function($scope) {
            $scope.message = "This page will be used to display add student form";
         });
         mainApp.controller('ViewStudentsController', function($scope) {
            $scope.message = "This page will be used to display all the students";
         });
      </script>
      
   </body>
</html>

Salida

Abra el archivo testAngularJS.htm en un navegador web y vea el resultado.