AngularJS视图

AngularJS admite aplicaciones de una página única (Single Page Application) mediante múltiples vistas en una página. Para esto, AngularJS proporciona ng-view y ng-directiva templateUrl y el servicio $routeProvider.

ng-directiva view

ng-La directiva view solo crea un marcador de posición, en el cual se puede放置相应的视图（HTML o ng-vista de plantilla).

Uso

En el módulo principal, usar ng-view define div.

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

ng-directiva templateUrl

ng-La directiva templateUrl se utiliza para crear vistas HTML utilizando etiquetas de script. Contieneidpropiedades, que se utilizan en $routeProvider para mapear las vistas con los controladores.

Uso

Definir bloques de scripts en el módulo principal como ng-template.

<div ng-app "mainApp">
　　　...
　　　<script type "text/ng-template" id "addStudent.htm">
　　　　　　<h2> Añadir Estudiante </h2>
　　　　　　{{message}}
　　　</script>
</div>

servicio $routeProvider

$routeProvider es un servicio clave que puede configurar la configuración de URL, asociándolas con las páginas HTML correspondientes o ng-mapeo de plantilla, y agregarle un controlador.

Uso1

Definir bloques de scripts en el módulo principal como ng-template.

<div ng-app "mainApp">　
　　　...　
　　　<script type "text/ng-template" id "addStudent.htm">　
　　　　　　<h2> Añadir Estudiante </h2>　
　　　　　　{{message}}　
　　　</script>　　
</div>

Uso2

Utilizar bloques de scripts definidos en el módulo principal y configurar la configuración de rutas.

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

En el ejemplo anterior, los siguientes puntos son importantes-

$routeProvider definido como una función bajo el módulo mainApp de la configuración, utilizando la clave '$routeProvider'.
$routeProvider.when para definir la URL"/addStudent", que mapea a " addStudent.htm". addStudent.htm debe estar en la misma ruta que la página principal HTML. Si no se define la página HTML, se debe establecer ng-template se utiliza junto con id ="addStudent.htm". Utilizamos ng-template.
"otherwise" se utiliza para establecer la vista predeterminada.
"controller" se utiliza para establecer el controlador correspondiente para la vista.

Ejemplo en línea

El siguiente ejemplo muestra el uso de todas las instrucciones anteriores.

testAngularJS.htm

Ejemplo

<html>
　　　<head>
　　　　　　<title>Angular JS Vistas</title>
　　　　　　<script src "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script>
　　　　　　<script src "https://cdn.staticfile.org/angular.js/1.3.14/angular.-route.min.js">
　　　　　　</script>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS-Ejemplo de aplicación de vistas</h2>
　　　　　　<div ng-app "mainApp">
　　　　　　　　　<p><a href "https://es.oldtoolbag.com/run/angularjs-views-1.html#addStudent" target="_self">Agregar estudiante</a></p>
　　　　　　　　　<p><a href "https://es.oldtoolbag.com/run/angularjs-views-1.html#viewStudents" target="_self">Ver estudiantes</a></p>
　　　　　　　　　<div ng-view></div>
　　　　　　　　　
　　　　　　　　　<script type "text/ng-template" id "addStudent.htm">
　　　　　　　　　　　　<h2>Agregar estudiante</h2>
　　　　　　　　　　　　{{message}}
　　　　　　　　　</script>
　　　　　　　　　
　　　　　　　　　<script type "text/ng-template" id "viewStudents.htm">
　　　　　　　　　　　　<h2>Ver estudiantes</h2>
　　　　　　　　　　　　{{message}}
　　　　　　　　　</script>
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　var mainApp = angular.module("mainApp", ['ngRoute']);
　　　　　　　　　mainApp.config(['$routeProvider', function($routeProvider) {
　　　　　　　　　　　　$routeProvider
　　　　　　　　　　　　
　　　　　　　　　　　　.when('/addStudent', {
　　　　　　　　　　　　　　　templateUrl: 'addStudent.htm',
　　　　　　　　　　　　　　　controller: ''
　　　　　　　　　　　　})
　　　　　　　　　　　　.when('/viewStudents', {
　　　　　　　　　　　　　　　templateUrl: ''
　　　　　　　　　　　　　　　controller: ''
　　　　　　　　　　　　})
　　　　　　　　　　　　.otherwise({
　　　　　　　　　　　　　　　redirectTo: ''/addStudent
　　　　　　　　　　　　});
　　　　　　　　　});
　　　　　　　　　mainApp.controller('AddStudentController', function($scope) {
　　　　　　　　　　　　$scope.message = "此页面将用于显示添加学生表格";
　　　　　　　　　});
　　　　　　　　　mainApp.controller('ViewStudentsController', function($scope) {
　　　　　　　　　　　　$scope.message = "此页面将用于显示所有学生";
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

测试看看‹/›

输出结果

在网络浏览器中打开文件testAngularJS.htm并查看结果。

AngularJS作用域(Scope)AngularJS Ajax

Tutoriales básicos de AngularJS