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 proporciona directivas NG-View y Ng-Plata, así como $ RoutepRovider Services.
visión ng
La etiqueta NG-View simplemente crea un marcador de posición, que es una vista correspondiente (Vista HTML o Ng-Template) que se puede colocar de acuerdo con la configuración.
usar
Defina una vista Div y Ng en el módulo principal.
<div ng-app = "mainapp"> ... <div ng-view> </div> </div>
plantilla
La directiva NG-Template se utiliza para crear vistas HTML usando etiquetas de script. Contiene una propiedad de "ID" para la vista del controlador asignada por $ Routeprovider.
usar
Defina el tipo como el bloque de script de la plantilla ng en el módulo principal.
<div ng-app = "mainapp"> ... <script type = "text/ng-template" id = "addStudent.html"> <h2> Agregar estudiante </h2> {{mensaje}} </script> </div>$ Routeprovider
$ Routeprovider es la configuración de las URL de grupo, las asigna a la página HTML correspondiente o una plantilla ng, y adjunta un servicio que utiliza las mismas claves para el controlador.
usar
Defina el tipo como el bloque de script de la plantilla ng en el módulo principal.
<div ng-app = "mainapp"> ... <script type = "text/ng-template" id = "addStudent.html"> <h2> Agregar estudiante </h2> {{mensaje}} </script> </div>usar
Defina el bloque de script del módulo principal y configure la configuración de enrutamiento.
var mainapp = angular.module ("mainapp", ['ngroute']); MainApp.Config (['' RoutepRoVider ', function ($ Routeprovider) {$ RoutepRoVider. When ('/addStudent ', {TemplateUrl:' addStudent.html ', controlador:' addStudentController '}). When ('/ViewStudents ', {TempateUrl:' ViewStudents.html ',her :htMl' ,her :hter :hter :hter :hter :hter :hter :hter :hter :her :her :her :her :her :her :her :her :her, ,her :her, ,her, ,her, ,her, ,her, ,her, ,her, ,her, wher, ,her, ,her 'ViewStudentsController'}).Los siguientes son temas importantes a considerar en el ejemplo anterior
$ Routeprovider se define como la función de configuración del módulo MainApp utilizando la palabra clave como '$ RoutepRovider';
$ Routeprovider Cuando se define la URL "/AddStudent", se mapea a "AddStudent.html". AddStudent.html debe existir en la misma ruta que la página HTML principal. Si la página HTM no está definida, entonces Ng-Template se usa por id = "AddStudent.html". Hemos usado ng-semplate;
"De lo contrario" es la vista predeterminada utilizada para establecer;
"Conllloer" se usa para establecer el controlador correspondiente de la vista;
ejemplo
Los siguientes ejemplos mostrarán todas las instrucciones anteriores.
testangularjs.html
<html> <cead> <title> Angular JS ve </title> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script <script <script " src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"> </script> <body> <h2> Angularjs Aplicación de muestra </h2> <div ng-app = "mainapp"> <p> <P> <a href = "#ViewStudents"> Ver estudiantes </a> </p> <div ng-view> </div> <script type = "text/ng-tempplate" id = "addstudent.html"> <h2> Agregar estudiante </h2> {{mensaje}}} </script> <script type = "Text/ng-template" " id = "ViewStudents.html"> <h2> View Students </h2> {{Message}} </script> <script> var mainapp = angular.module ("mainapp", ['ngroute']); MainApp.Config (['' RoutepRoVider ', function ($ Routeprovider) {$ RoutepRoVider. When ('/addStudent ', {TemplateUrl:' addStudent.html ', controlador:' addStudentController '}). When ('/ViewStudents ', {TempateUrl:' ViewStudents.html ',her :htMl' ,her :hter :hter :hter :hter :hter :hter :hter :hter :her :her :her :her :her :her :her :her :her, ,her :her, ,her, ,her, ,her, ,her, ,her, ,her, ,her, wher, ,her, ,her 'ViewStudentsController'}). MainApp.Controller ('AddStudentController', function ($ scope) {$ scope.message = "Esta página se usará para mostrar el formulario Agregar alumno";}); MainApp.Controller ('ViewStudentsController', function ($ scope) {$ scope.message = "Esta página se usará para mostrar a todos los estudiantes";}); </script> </body> </html>resultado
Abra textangularjs.html en un navegador web. Los resultados son los siguientes:
Lo anterior es una compilación de la información de la vista AngularJS. Continuaremos agregando información relevante en el futuro. ¡Gracias por su apoyo para este sitio web!