AngularJS 视图

AngularJS supporta le applicazioni single page (SPA) tramite più viste su una singola pagina. Per questo, AngularJS fornisce le istruzioni ng-view e ng-template e il servizio $routeProvider.

Instruzione ng-view

L'instruzione ng-view crea solo un segnaposto, in cui possono essere posizionate le viste corrispondenti (vista HTML o vista ng-template) secondo la configurazione.

Uso

Definire div utilizzando ng-view nel modulo principale.

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

Instruzione ng-template

L'instruzione ng-template viene utilizzata per creare viste HTML utilizzando tag script. ContieneidProprietà, utilizzata da $routeProvider per mappare le viste ai controller.

Uso

Definire il blocco di script nel modulo principale come ng-template.

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

Servizio $routeProvider

$routeProvider è un servizio chiave che può configurare la configurazione dell'URL, mappare a pagine HTML corrispondenti o ng-template, e aggiungere controllori ad essi.

Uso 1

Definire il blocco di script nel modulo principale come ng-template.

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

Uso 2

Utilizzare il blocco di script definito nel modulo principale e configurare la configurazione di routing.

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

In questo esempio, è importante notare i seguenti punti-

$routeProvider è definito come una funzione sotto la configurazione del modulo mainApp, utilizzando la chiave ‘$routeProvider’.
La definizione di $routeProvider.when per l'URL “/addStudent”，che mappa a “addStudent.htm”. addStudent.htm dovrebbe trovarsi sulla stessa percorso dell'homepage HTML. Se non è definita una pagina HTML, è necessario utilizzare ng-template insieme a id = "addStudent.htm". Abbiamo utilizzato ng-template.
"otherwise" viene utilizzato per impostare la vista predefinita.
"controller" viene utilizzato per impostare il controller corrispondente per la vista.

Esempio Online

Il seguente esempio mostra l'uso di tutte le istruzioni menzionate sopra.

testAngularJS.htm

Esempio

<html>
　　　<head>
　　　　　　<title>Visualizzazioni Angular JS</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>
　　　　　　</script>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>Esempio di Applicazione di Viste AngularJS</h2>
　　　　　　<div ng-app="mainApp">
　　　　　　　　　<p><a href="https://it.oldtoolbag.com/run/angularjs-views-1.html#addStudent" target="_self">Aggiungi Studente</a></p>
　　　　　　　　　<p><a href="https://it.oldtoolbag.com/run/angularjs-views-1.html#viewStudents" target="_self">Visualizza Studente</a></p>
　　　　　　　　　<div ng-view></div>
　　　　　　　　　
　　　　　　　　　<script type="text/ng-template" id="addStudent.htm">
　　　　　　　　　　　　<h2>Aggiungi Studente</h2>
　　　　　　　　　　　　{{message}}
　　　　　　　　　</script>
　　　　　　　　　
　　　　　　　　　<script type="text/ng-template" id="viewStudents.htm">
　　　　　　　　　　　　<h2>Visualizza Studente</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 = "此页面将用于显示添加学生表格";
　　　　　　　　　});
　　　　　　　　　mainApp.controller('ViewStudentsController', function($scope) {
　　　　　　　　　　　　$scope.message = "此页面将用于显示所有学生";
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

测试看看‹/›

输出结果

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

AngularJS Scope (作用域)AngularJS Ajax

Tutorial di base AngularJS