एक्सप्रेस और एंगुलरजेएस - होम पेज

Question

खोलने का प्रयास करते समय वेब पेज फ्रीज करता है मैं जितना संभव हो उतना विस्तार से इस मुद्दे को समझाऊंगा।

मैं एक्सप्रेस के साथ एंगुलरजेएस का उपयोग करने का प्रयास कर रहा हूं और परेशानी में भाग रहा हूं। मैं एचटीएमएल फाइलों को प्रदर्शित करना चाहता हूं (एक टेम्पलेटिंग इंजन का उपयोग नहीं कर रहा हूं)। इन HTML फ़ाइलों में AngularJS निर्देश होंगे।
हालांकि, मैं एक साधारण HTML फ़ाइल को प्रदर्शित करने में सक्षम नहीं हूं!

Root 
---->public 
-------->js 
------------>app.js 
------------>controllers.js 
---->views 
-------->index.html 
-------->partials 
------------>test.html 
---->app.js 

public/js/app.js की सामग्री है:

angular.module('myApp', []). 
    config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/', {templateUrl: 'partials/test.html', controller: IndexCtrl}); 
$routeProvider.otherwise({redirectTo: '/'}); 
}]); 

public/js/controllers/js की सामग्री है:

function IndexCtrl() { 
} 

शरीर टैग की सामग्री

निर्देशिका संरचना इस प्रकार है views/index.html में है:

<div ng-view></div> 

यही है।

This is the test page! 

पैरा टैग के भीतर संलग्न: views/partials/test.html जिनकी सामग्री रहे हैं - उम्मीद है कि AngularJS test.html साथ ऊपर दृश्य विकल्प होगा है। बस!

अंत में, ROOT/app.js फ़ाइल की सामग्री है:

var express = require('express'); 

var app = module.exports = express(); 

// Configuration 

app.configure(function(){ 
    app.set('views', __dirname + '/views'); 
    app.engine('html', require('ejs').renderFile); 
    app.use(express.bodyParser()); 
    app.use(express.methodOverride()); 
    app.use(express.static(__dirname + '/public')); 
    app.use(app.router); 
}); 

app.configure('development', function(){ 
    app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); 
}); 

app.configure('production', function(){ 
    app.use(express.errorHandler()); 
}); 

// routes 

app.get('/', function(request, response) { 
    response.render('index.html'); 
}); 

// Start server 

app.listen(3000, function(){ 
    console.log("Express server listening on port %d in %s mode", this.address().port, app.settings.env); 
}); 

अब, जब मैं रूट फ़ोल्डर में $node app.js करते हैं, सर्वर किसी भी त्रुटि के बिना शुरू होता है। हालांकि यदि मैं ब्राउज़र में localhost:3000 पर जाता हूं, तो URL localhost:3000/#/ में बदल जाता है और पृष्ठ अटक जाता है/फ्रीज हो जाता है। मैं क्रोम में कंसोल लॉग भी नहीं देख सकता!
यह समस्या है जिसका मैं सामना कर रहा हूं। मैं क्या गलत कर रहा हूँ के बारे में कोई सुराग?

Answer 1

अंत में यह पता चला - बाल खींचने के कई गहन क्षणों के बाद !!

1. उपयोगकर्ता स्थानीय होस्ट की शुरूआत: 3000
2. यह '/'
3. एक्सप्रेस के लिए एक्सप्रेस सर्वर का अनुरोध करता है index.html
रेंडर
कारण है कि पेज जमा क्योंकि (कदम से समझाया कदम) है
4. AngularJS टेम्पलेट 'partials/test.html' प्रस्तुत करेगा।
5. यहां, मैं एक जंगली अनुमान ले रहा हूं - AngularJS ने पृष्ठ 'partials/test.html' के लिए HTTP अनुरोध किया है।

6. हालांकि, आप देख सकते हैं कि एक्सप्रेस या ऐप.जेएस के पास इस जीईटी अनुरोध के लिए हैंडलर नहीं है। यही है, निम्न कोड गुम है:

   ऐप।प्राप्त करें ('आंशिक/नाम', फ़ंक्शन (अनुरोध, प्रतिक्रिया) {
   var name = request.params.name;
   प्रतिक्रिया.रेंडर ('आंशिक /' + नाम);
   });

रूट निर्देशिका के app.js के अंदर। एक बार जब मैं यह कोड जोड़ूं, पृष्ठ अपेक्षित के रूप में प्रस्तुत करता है।

Answer 2

this working fiddle में डिज़ाइन पैटर्न का पालन करने का प्रयास करें। नीचे दिखाया गया कोड। आप टेम्पलेट विकल्प को टेम्पलेट यूआरएल के साथ प्रतिस्थापित कर सकते हैं और इसे अभी भी ठीक काम करना चाहिए।

var app = angular.module('app', []); 

app.config(['$routeProvider', function($routeProvider){ 
    $routeProvider.when('/', {template: '<p>Index page</p>', controller: 'IndexCtrl'}); 
    $routeProvider.otherwise({redirect:'/'}); 
}]); 

app.controller('IndexCtrl', function(){ 

});