2013-03-28 24 views
10

मैं पतली ग्राहक के लिए एचटीएमएल 5 एसपीए एप्लीकेशन विकसित करना चाहता हूं। इस पर कोई वेब सर्वर लॉन्च करने का कोई तरीका नहीं है। और मैं वेब सर्वर के बिना रूटिंग काम नहीं कर सकता।वेब सर्वर के बिना कोणीय जेएस रूटिंग

मेरे index.html

<!doctype html> 
    <html ng-app="app"> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script> 
    <script src="app.js"></script> 
    <title></title> 
</head> 
<body style="background-color: white;"> 
    <h1>Index</h1> 
    <a id="link" href="/login">Go to login</a> 
    <div ng-controller="HomeCtrl"> 
     <ul ng-repeat="number in numbers" > 
      <li>{{number}}</li> 
     </ul> 
    </div> 
</body> 
</html> 

मेरे app.js

angular.module('app', []). 
    config(function($routeProvider) { 
    $routeProvider. 
     when('/', {controller: HomeCtrl, templateUrl: 'index.html'}). 
     when('/login', {controller: LoginCtrl, templateUrl: 'login.html', resolve: function() {}}). 
     otherwise({redirectTo:'/'}); 
    }); 

function HomeCtrl($scope) { 
    $scope.numbers = [1,2,3,4,5]; 
} 

function LoginCtrl($scope) { 

} 

मैं क्रोम में अपने कंप्यूटर पर स्थानीय रूप से इस कोड का परीक्षण कर रहा हूँ। डेटा बाध्यकारी एक आकर्षण की तरह काम कर रहा है, लेकिन लॉगिन पेज से लिंक नहीं है। यह {X}: \ login की ओर अग्रसर है। तो मेरे प्रश्न हैं: क्या यह वेब सर्वर के साथ काम करना संभव है? और दूसरी बात यह है कि मुझे यह करने के लिए क्या याद आ रही है?

उत्तर

4

थोड़ी देर के बाद, मैंने इसे काम किया।

सबसे पहले, मैं

<div ng-controller="HomeCtrl"> 
    <ul ng-repeat="number in numbers" > 
     <li>{{number}}</li> 
    </ul> 
</div> 

दूसरी बात अलग फ़ाइल में इस टुकड़े ले जाया गया, index.html में मैं इस div

<div ng-view></div> 

यह एक दृश्य प्लेसहोल्डर के रूप में प्रयोग किया जाता है जोड़ दिया है।

अब index.html "मास्टर पेज" या "लेआउट" के रूप में उपयोग किया जाता है यदि आप एएसपीनेट से परिचित हैं। जब आप लिंक पर क्लिक करते हैं, तो टेम्पलेट यूआरएल फ़ाइल की सामग्री प्लेसहोल्डर div में डाली जा रही है।

इस का एक दोष यह है तो यह एक वेब सर्वर की जरूरत नहीं है कि यूआरएल चाहिए इस <a href="#/login"></a>

+1

यह मानक कोणीय दृष्टिकोण है। दस्तावेज़ साइट – charlietfl

+0

हाँ पर ट्यूटोरियल के माध्यम से जाओ, धन्यवाद। अब मैं समझ गया। – dantix

+1

यह मेरे लिए काम नहीं किया। आपके उत्तर में उल्लिखित उपर्युक्त संशोधनों में से, सर्वर से अनुरोध को किसने रोक दिया? मेरे लिए ऐप वेब सर्वर के बिना काम नहीं करता था। –

1

यहाँ http://docs.angularjs.org/api/ng। से $ मार्ग कुछ कोड

// configure html5 to get links working on jsfiddle 
$locationProvider.html5Mode(true); 

मुझे लगता है कि एक ही आप के लिए काम करेंगे।

+0

नहीं, मैंने यह कोशिश की है। मुझे यह वास्तव में काम मिल गया है। मैं कुछ मिनटों में जवाब पोस्ट करूंगा। – dantix

2

कोणीय तरह लग रहा है, एक क्लाइंट-साइड जे एस रूपरेखा है। एनजी-व्यू को जोड़ने के अलावा (जैसा कि आप पहले ही पता लगा चुके हैं), जब तक आप html5mode का उपयोग नहीं कर रहे हैं, तब तक आपको लिंक में हैशबैंग (#/login) की आवश्यकता होती है।

तो, यूआरएल में हैशबैंग होने से कोई कमी नहीं है, यह एक विकल्प है।

+0

बहुत उपयोगी है, लेकिन अलग-अलग ग्राहक ऐप तक कैसे पहुंच सकते हैं .... क्या हमें उन्हें प्रत्येक ग्राहक को मोटी क्लाइंट जैसे एप्लिकेशन क्लाइंट कोड भेजना चाहिए? – Jay

1

इस समस्या का समाधान [Cross origin requests are only supported for HTTP] मेरे लिए काम करता है।
लेकिन मुझे वास्तव में यह नहीं मिलता है कि आप इसे ngView और ngRoute का उपयोग कर वेब सर्वर के बिना कैसे काम कर सकते हैं?
आप index.html के बाहर login.html प्राप्त करने के लिए ngRoute कॉन्फ़िगर करते हैं, इसका मतलब है कि आप फ़ाइल लोड करने के लिए AJAX सेवा का उपयोग कर रहे हैं, लेकिन AJAX सेवा वेब सर्वर के बिना काम नहीं कर सकती है। यही कारण है कि मुझे अपना मुद्दा मिला।

+0

आप सीओआरएस और उसी मूल नीति को अनदेखा करने के लिए क्रोम-डिस्प्ले-वेब-सुरक्षा ध्वज के साथ क्रोम चला सकते हैं, लेकिन इसे देखभाल के साथ करें। जब मैं यह सवाल पूछ रहा था, तो मैं डिवाइस पर एम्बेड ब्राउज़र के लिए एप्लिकेशन विकसित कर रहा था जिसमें डेस्कटॉप/मोबाइल ब्राउज़र के रूप में ऐसी सख्त सुरक्षा सीमाएं नहीं हैं, इसलिए यह मेरे लिए कोई मुद्दा नहीं था। – dantix

+0

धन्यवाद, डांटिक्स। आईई के बारे में क्या? –

+0

आईई के लिए एक ही तरीका है, आप वेब सुरक्षा को अक्षम कर सकते हैं –

5

आपको स्क्रिप्ट टैग का उपयोग करके index.html में अपने टेम्पलेट्स को स्वयं रखना होगा ताकि कोणीय को AJAX अनुरोधों को लाने के लिए अब आवश्यकता न हो।

<script type="text/ng-template" id="home.html"> 
    This is the content of the template 
</script> 
संबंधित मुद्दे