Question

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

以下是以下文件：

appRoutes.js - ＆gt;用于在角侧进行布线

clubCtrl.js - ＆gt;俱乐部控制员

clubService.js - ＆gt;俱乐部服务以填充来自节点的数据

Routes.js - ＆gt;从数据库中检索数据和发送响应的部分样本

club.html - ＆gt;部分俱乐部视图文件

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

app.js - ＆gt;注入所有模块

**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

我假设您正在使用相同的端口。

在nodejs侧路线中将您的路线从/ club更改为/ 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');
        }
      };


}]);

你在视图club.html中使用ng-repeat中的main.data还有一件事，但是我无法在路线中看到控制器，所以你必须在角度俱乐部路线中添加控制器，或者在控制器中更改模型。

角度js路由中提供的TemplateURL在从节点

1 个答案: