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 खोलें और परिणाम देखें।