AngularJS - दृश्य

AngularJS एक पृष्ठ पर कई विचारों के माध्यम से एकल पृष्ठ अनुप्रयोग का समर्थन करता है। ऐसा करने के लिए, AngularJS ने एनजी-व्यू और एनजी-टेम्पलेट निर्देश और $ मार्गप्रोवाइडर सेवाएं प्रदान की हैं।

एनजी-व्यू डायरेक्टिव

एनजी-व्यू निर्देश केवल एक स्थान धारक बनाता है जहां एक संगत दृश्य (HTML या एनजी-टेम्पलेट दृश्य) कॉन्फ़िगरेशन के आधार पर रखा जा सकता है।

प्रयोग

मुख्य मॉड्यूल के भीतर एनजी-व्यू के साथ एक डिव को परिभाषित करें।

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

</div>

एनजी-टेम्पलेट निर्देश

स्क्रिप्ट टैग का उपयोग करके HTML दृश्य बनाने के लिए एनजी-टेम्पलेट निर्देश का उपयोग किया जाता है। इसमें आईडी विशेषता होती है जिसका उपयोग $ मार्गप्रोवाइडर द्वारा एक नियंत्रक के साथ एक दृश्य को मैप करने के लिए किया जाता है।

प्रयोग

मुख्य मॉड्यूल के भीतर एनजी-टेम्पलेट के प्रकार के साथ एक स्क्रिप्ट ब्लॉक को परिभाषित करें।

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

</div>

$ मार्गप्रोवाइडर सेवा

$ मार्गप्रोपाइडर एक महत्वपूर्ण सेवा है जो URLs के कॉन्फ़िगरेशन को सेट करता है, उन्हें संबंधित HTML पृष्ठ या एनजी-टेम्पलेट के साथ मैप करता है, और उसी के साथ एक नियंत्रक संलग्न करता है।

उपयोग 1

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

उपयोग २

मुख्य मॉड्यूल के साथ एक स्क्रिप्ट ब्लॉक को परिभाषित करें और रूटिंग कॉन्फ़िगरेशन सेट करें।

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

उपरोक्त उदाहरण में निम्नलिखित बातों पर विचार किया जाना आवश्यक है -

$ pathProvider को '$ pathProvider' की तरह इस्तेमाल करने वाले mainApp मॉड्यूल के कॉन्फिगरेशन के तहत एक फंक्शन के रूप में परिभाषित किया गया है।
$ pathProvider.when एक URL "/ addStudent" को परिभाषित करता है, जिसे "addStudent.htm" में मैप किया जाता है। addStudent.htm मुख्य HTML पृष्ठ के समान पथ में मौजूद होना चाहिए। यदि HTML पेज परिभाषित नहीं है, तो एनजी-टेम्पलेट को आईडी = "addStudent.htm" के साथ उपयोग करने की आवश्यकता है। हमने एनजी-टेम्पलेट का इस्तेमाल किया।
"अन्यथा" डिफ़ॉल्ट दृश्य सेट करने के लिए उपयोग किया जाता है।
"कंट्रोलर" का उपयोग व्यू के लिए संबंधित कंट्रोलर को सेट करने के लिए किया जाता है।

उदाहरण

निम्न उदाहरण सभी उपर्युक्त निर्देशों का उपयोग दर्शाता है।

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>

उत्पादन

एक वेब ब्राउज़र में फ़ाइल testAngularJS.htm खोलें और परिणाम देखें।