TemplateURL, предоставляемый в угловых js-маршрутах, не загружает требуемый файл при получении ответа от узла

0

Я пытаюсь получить данные из mysql с помощью node (routes.js) и хотел, чтобы результат был введен в файл club.html, который динамически обновляется в index.html с помощью ng-view. Но когда я пытаюсь выполнить этот сценарий, я вижу, что ответ узла (т.е. Результаты, содержащие json), непосредственно отображается в браузере, а не вводится в club.html, а затем отображается

Ниже приведены следующие файлы:

appRoutes.js → для маршрутизации по угловой стороне

clubCtrl.js → клубный контроллер

clubService.js → клубный сервис для заполнения данных из узла

Routes.js → частичная выборка извлечения данных из базы данных и отправки ответа

club.html → файл частичного клуба

index.html → файл, на котором club.html будет динамически отображаться с помощью ng-view.

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']);
  • 0
    Измените свой маршрут с / club на / api / club на стороне узла и назовите его как return $ http.get ('/ api / club'); потому что когда вы вызываете свою страницу в браузере с помощью / club. сервер узла перехватывает его и отображает json как ответ.
  • 0
    это не работает. Я получаю Соединение установлено GET /club 404 12.481 ms - 17 как выход узла и Cannot Get /club in browser GET /club 404 12.481 ms - 17 Cannot Get /club in browser
Показать ещё 3 комментария
Теги:
express

1 ответ

0
Лучший ответ

Я предполагаю, что вы используете тот же порт.

Измените свой маршрут из /club в /api/club в боковом маршруте nodejs и назовите его как return $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');
        }
      };


}]);

Еще одна вещь, которую вы используете main.data в ng-repeat в view club.html, но я не могу видеть контроллер в пути, поэтому вам нужно добавить контроллер в угловой клубный маршрут или изменить модель в контроллере.

  • 0
    это не работает. Я получаю Connection established GET /club 404 12.481 ms - 17 качестве вывода узла и Cannot Get /club Connection established GET /club 404 12.481 ms - 17 Cannot Get /club в браузере.
  • 0
    мимо здесь полный URL / клуб, что вы пытаетесь
Показать ещё 9 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню