从节点获取响应时，Angular JS路由中提供的TemplateURL不会加载所需的文件

Question

我试图使用node（routes.js）从mysql获取数据，并希望将结果注入club.html文件中，该文件使用ng-view在index.html中动态更新。 但是当我尝试这种情况时，我看到节点响应（即包含结果的json）直接显示在浏览器上，而不是注入club.html然后显示

以下是以下文件：

appRoutes.js->用于在角侧进行路由

clubCtrl.js->俱乐部控制器

clubService.js->俱乐部服务以填充节点中的数据

Routes.js->从数据库检索数据并发送响应的部分示例

club.html->部分俱乐部视图文件

index.html->使用ng-view动态显示club.html的文件。

app.js->注入所有模块

**appRoutes.js**   
angular.module('appRoutes', []).config(['$routeProvider',  function($routeProvider) {
    $routeProvider

        // home page
        .when('/', {
            templateUrl: 'views/home.html',
            controller: 'MainController'
        })

        // nerds page that will use the NerdController
        .when('/club', {
            templateUrl: 'views/club.html',
            controller: 'ClubController'
        }); 

}]);


**ClubCtrl.js**

angular.module('ClubCtrl', []).controller('ClubController', [ '$http','Club', function($http, Club) {
    var club = this;
    club.data = {};
    Club.getClubData().then(function(response){
        club.data = response.data;
    });
}]);

**ClubService.js**
angular.module('ClubService', []).factory('Club', ['$http', function($http) {

    return {
        getClubData : function() {
            return $http.get('/club');
        }
      };


}]);

**Routes.js**
module.exports = function(app) {
    app.get('/', function(req, res) {
            console.log("routes send get(*)");
            res.sendFile(path.resolve('public/index.html')); // load our public/index.html file
        });
    app.get('/club', function(req, res){
        console.log("routes send get /club");
    con.query("select * from club_data", function(err, rows,field) {
    if (!err)
    {
        console.log('The solution is: ', rows);
        res.json(rows);
    }
    else
        console.log('Error while performing Query. ', err);
        });
    });

};

**Club.html**
    </div>
          <div class="row " >
            <div class="col-md-3 col-sm-6 image-feature" ng-repeat='dat in main.data'>
                <div class="thumbnail">
                    <img ng-src="images/club/{{dat.imagename}}"alt="">
                    <div class="caption">
                        <h3>{{ dat.name }}</h3>
                        <p>{{dat.desccription}}</p>
                        <p>{{dat.date}}</p>
                        <p>
                            <a href="#" class="btn btn-primary">I'm Going!</a>
                        </p>
                    </div>
                </div>
            </div>


**index.html**
<body ng-app="staygala" ng-controller="MainController">

    <!-- ANGULAR DYNAMIC CONTENT -->
    <div ng-view></div>
</body>

**app.js**
angular.module('staygala', ['ngRoute', 'appRoutes', 'MainCtrl', 'ClubCtrl', 'ClubService']);

Answer 1

我假设您使用的是同一端口。

将您的路由从/ club更改为nodejs旁路径中的/ api / club，并像return $http.get('/api/club');一样调用它$http.get('/api/club'); 在角度服务中，即在ClubService.js中，因为当您使用/ club在浏览器中调用页面时。 节点服务器将其捕获并呈现json作为响应。

所以这是您必须进行的更改：

在Routes.js中

module.exports = function(app) {
    app.get('/', function(req, res) {
            console.log("routes send get(*)");
            res.sendFile(path.resolve('public/index.html')); // load our public/index.html file
        });
    app.get('/api/club', function(req, res){
        console.log("routes send get /club");
    con.query("select * from club_data", function(err, rows,field) {
    if (!err)
    {
        console.log('The solution is: ', rows);
        res.json(rows);
    }
    else
        console.log('Error while performing Query. ', err);
        });
    });

};

和在ClubService.js中

angular.module('ClubService', []).factory('Club', ['$http', function($http) {

    return {
        getClubData : function() {
            return $http.get('/api/club');
        }
      };


}]);

您还要在view club.html的ng-repeat中使用main.data，但我无法在路线中看到controllerAs，因此您必须在角度俱乐部路线中添加controllerAs或在controller中更改模型。