AngularJS - Görünümler

AngularJS, tek bir sayfada birden çok görünüm aracılığıyla Tek Sayfa Uygulamasını destekler. Bunu yapmak için, AngularJS ng-view ve ng-şablon yönergeleri ve $ routeProvider hizmetleri sağlamıştır.

ng-view Direktifi

Ng-view direktifi, konfigürasyona bağlı olarak karşılık gelen bir görünümün (HTML veya ng-şablon görünümü) yerleştirilebileceği bir yer tutucu oluşturur.

Kullanım

Ana modül içinde ng-görünümü ile bir div tanımlayın.

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

</div>

ng-şablon Direktifi

Ng-şablon yönergesi, betik etiketi kullanarak bir HTML görünümü oluşturmak için kullanılır. Bir denetleyiciyle bir görünümü eşlemek için $ routeProvider tarafından kullanılan id niteliği içerir .

Kullanım

Ana modül içinde türü ng-şablonu olarak bir betik bloğu tanımlayın.

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

</div>

$ routeProvider Hizmeti

$ RouteProvider, URL'lerin yapılandırmasını ayarlayan, bunları karşılık gelen HTML sayfası veya ng-şablonu ile eşleyen ve buna sahip bir denetleyici ekleyen önemli bir hizmettir.

Kullanım 1

Ana modül içinde türü ng-şablonu olarak bir betik bloğu tanımlayın.

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

Kullanım 2

Ana modül ile bir komut dosyası bloğu tanımlayın ve yönlendirme yapılandırmasını ayarlayın.

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

Yukarıdaki örnekte aşağıdaki noktaların dikkate alınması önemlidir -

$ routeProvider, mainApp modülünün konfigürasyonu altında, anahtarı '$ routeProvider' olarak kullanan bir işlev olarak tanımlanır.
$ routeProvider.when, "addStudent.htm" ile eşlenen bir URL "/ addStudent" tanımlar. addStudent.htm, ana HTML sayfasıyla aynı yolda bulunmalıdır. HTML sayfası tanımlanmamışsa, ng-şablonunun id = "addStudent.htm" ile kullanılması gerekir. Ng şablonu kullandık.
Varsayılan görünümü ayarlamak için "aksi takdirde" kullanılır.
"kontrolör", görünüm için ilgili kontrolörü ayarlamak için kullanılır.

Misal

Aşağıdaki örnek, yukarıda bahsedilen tüm direktiflerin kullanımını göstermektedir.

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>

Çıktı

Bir web tarayıcısında testAngularJS.htm dosyasını açın ve sonucu görün.