2015-09-06 12 views
5

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

किसी कारण से, जब पृष्ठ लोड होता है, तो टेम्पलेट ng-view स्थान में नहीं दिखाया जाता है। यह क्यों नहीं दिखाया गया है, और इसे कैसे ठीक किया जाए?

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script> 
    <script src="routCtrl.js"></script> 
</head> 
<body ng-app='ngRouteTest'> 
    <div ng-view></div> 
</body> 

और स्क्रिप्ट फ़ाइल:

var ngRouteTest = angular.module('ngRouteTest',['ngRoute']); 
ngRouteTest.config(function($routeProvider){ 
    $routeProvider 
.when('/', 
    {templateUrl : '/routView1.html'}) 
}); 
+0

डेवलपर कंसोल क्या कहता है? कोई त्रुटि/चेतावनियां? –

+0

निम्न त्रुटि: "टेम्पलेट लोड करने में विफल"। –

+0

तब समस्या यह है कि आप HTML फ़ाइल के लिए गलत पथ प्रदान कर रहे हैं। आपका routView1.html कहां है? आपकी फ़ोल्डर संरचना कैसी दिखती है? –

उत्तर

0

ठीक है पहले आपको सर्वर से अपना कोड चलाने की आवश्यकता है, ताकि स्थानीय रूप से http-server का उपयोग करके परीक्षण किया जा सके जो वास्तव में तैयार करना आसान है।

{templateUrl : '/routView1.html'} 

लिए:

तो फिर तुम से अपने templateUrl पथ को बदलना होगा

{templateUrl : './routView1.html'} 
2

आप उस पृष्ठ पर रीडायरेक्ट करने, ताकि मार्ग पता है जो पेज ng-view निर्देश के अंदर प्रस्तुत करने के लिए आ जाएगा की जरूरत है।

ऐसा करने के कई तरीके हैं।

  1. / पर रीडायरेक्ट करने के लिए एक औरथा परिभाषित करें।

    $routeProvider.otherwise({redirectTo: '/'}) 
    
  2. पेज कि / पर रीडायरेक्ट करेगा करने के लिए लंगर जोड़ें।

    <body ng-app='ngRouteTest'> 
        <a href="#/">Home Page</a> 
        <div ng-view></div> 
    </body> 
    
  3. <head> टैग में पृष्ठ पर डिफ़ॉल्ट यूआरएल के बाद।

    <base href="/"/> 
    
+0

उत्तर के लिए धन्यवाद, विकल्पों में से कोई भी मदद नहीं की। मुझे "अन्यथा" जोड़ने के बाद पूर्ववर्ती रूटिंग दिखाई देती है लेकिन एनजी-व्यू टेम्पलेट लोड नहीं करता है। उपरोक्त पूछे गए कंसोल पर जाकर मुझे निम्न त्रुटि दिखाई देती है: "टेम्पलेट लोड करने में विफल"। मुझे लगता है कि समस्या यह है कि फ़ाइलों को स्थानीय रूप से संग्रहीत किया जाता है और परिणामस्वरूप सुरक्षा समस्याएं होती हैं - मैं एक सर्वर शुरू करूंगा और देख सकता हूं कि मुझे एक अलग परिणाम मिलता है या नहीं। –

+1

आपको सर्वर पर अपना कोड होस्ट करने की आवश्यकता है .. अन्यथा टेम्पलेट नहीं चलेगा .. –

0

एक स्थानीय मेजबान शुरू करने और वहाँ से कोड को बर्बाद कर के बाद यह बिल्कुल ठीक काम किया।

जब आप स्थानीय AJAX कॉल करते हैं तो यह समस्या क्रोम से संबंधित सुरक्षा के साथ थी। क्रोम में

1.Disable वेब सुरक्षा:

तो एक इस समस्या को निम्नलिखित बातों में से एक करना चाहिए है। 2. परीक्षण करने के लिए स्थानीय होस्ट प्रारंभ करें।

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