2015-10-11 7 views
5

साथ गुजर पैरामीटर यहाँ मेरीngroute

angularroute.html

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="AngularApp"> 
<head> 
    <title></title> 
    <script src="angular.js"></script> 
    <script src="angular-route.js"></script> 
    <script type="text/javascript"> 

     var AngApp = angular.module('AngularApp', ['ngRoute']); 
     AngApp.config(function ($routeProvider) { 
      $routeProvider 
       .when('/Route1/:ID', { 
        templateUrl:'Route1.html', 
        controller:'Route1' 

       }) 
       .when('/Route2', { 
        templateUrl: 'Route2.html', 
        controller:'Route2' 
       }) 

       .otherwise({ 
        redirectTo: '/' 
       }); 
     }); 

    </script> 

      </head> 
      <body> 

       <p>Routing Explained</p> 
       <a href="#Route1/100">Route1</a><br> 
       <a href="#Route2">Route2</a> 
       <div ng-view> 

       </div> 

       <script src="Route.js"></script>  


      </body> 
      </html> 

Route.js फ़ाइल है।

angular.module('Route1').controller('Route1', function ($scope, $routeParams) { 
    $scope.ID = $routeParams.ID; 
}); 

angular.module('Route2').controller('Route2', function() { 
}); 

Route1.html

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="Route1"> 
<head> 
    <title></title> 

</head> 
<body ng-controller="Route1"> 


    {{ID}} 

    {{4+10}} 

</body> 
</html> 

समस्या यह पृष्ठ लोड, लेकिन मैं, पैरामीटर मान प्राप्त route1.html पर प्राप्त नहीं कर सकता है, अभिव्यक्ति का भी मूल्यांकन नहीं मिलता है। समस्या क्या हो सकती है? धन्यवाद।

+0

हो सकता है कि अपने HTML पृष्ठ में Angular.js शामिल करने के लिए प्रयास करें। – jeerbl

उत्तर

9

अपने रूट टेम्पलेट से आवश्यक सभी चीज़ों को हटाएं। केवल आपके द्वारा टेम्पलेट के आपके शरीर में जो सामग्री जोड़ा गया है, वह आवश्यक है।

यह आपके रूट में कॉन्फ़िगर किए गए नियंत्रक के साथ एनजी-व्यू में कोणीय द्वारा शामिल किया जाएगा। यह आंशिक है और एक पूर्ण HTML फ़ाइल नहीं है।

इसके अलावा आपके route.js कोड सही नहीं है। आप मॉड्यूल angular.module('route', []).controller('route1Controller', function(){...}) बना सकते हैं और इसे अपने ऐप में निर्भरता के रूप में उपयोग कर सकते हैं।

आपके जैसे ब्रैकेट्स को आपके route.js में किया गया है, आपको एक मॉड्यूल मिल रहा है जो पहले ही परिभाषित है।

कृपया नीचे दिए गए अपने अपडेट किए गए कोड को देखें या इस fiddle पर।

var AngApp = angular.module('AngularApp', ['ngRoute']) 
 
\t .controller('Route1Controller', Route1Controller) 
 
\t .controller('Route2Controller', Route2Controller); 
 

 
AngApp.config(function ($routeProvider) { 
 
    $routeProvider 
 
     .when('/Route1/:ID', { 
 
     templateUrl:'Route1.html', 
 
     controller:'Route1Controller' 
 

 
    }) 
 
     .when('/Route2', { 
 
     templateUrl: 'Route2.html', 
 
     controller:'Route2Controller' 
 
    }) 
 

 
     .otherwise({ 
 
     redirectTo: '/' 
 
    }); 
 
}); 
 

 
function Route1Controller($scope, $routeParams) { 
 
    $scope.ID = $routeParams.ID; 
 
} 
 

 
function Route2Controller($scope) { 
 

 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.js"></script> 
 

 
<div ng-app="AngularApp"> 
 
    <script type="text/ng-template" id="Route1.html"> 
 
     Route1 
 
     {{ID}} 
 

 
     {{4+10}} 
 
    </script> 
 
    <script type="text/ng-template" id="Route2.html"> 
 
     Route2 
 

 
     {{4+10}} 
 
    </script> 
 
<p>Routing Explained</p> 
 
       <a href="#Route1/100">Route1</a><br/> 
 
       <a href="#Route2">Route2</a> 
 
       <div ng-view> 
 

 
       </div> 
 
    </div>

संबंधित मुद्दे