Question

我正在使用NodeJS-Express-Jade-AngularJS，当我输入http：localhost：3000时，我得到的页面上的每一行都有一个带有选择按钮的表格。当用户点击相应行的选择按钮时，我调用http get并将所选行的ID作为url字符串传递。我的服务器返回一个新页面，但我不知道如何在浏览器中加载新页面

server.js代码

app.get('/', function(req, res) {
  console.log('Home Page GET Request');  
  res.render('HomePage', { title: 'Demo App'});  
});
app.get('/id=:id', function (req, res) {  
  res.render('DetailPage', { title: 'Demo App'}); 
});

controller.js

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

myApp.controller('AppCtrl', ['$scope', '$http', '$location', function($scope, $http, $location) {
    var refresh = function() {
        $http.get('/HomePage').success(function(response) {
            $scope.list = response;
        });
    };

    refresh();

    $scope.select = function(id) {
        console.log(id);     
        $http.get('/id=' + id).success(function(response) {    
            // My response contains html code but how to display it in browser
        });      
    };
}]);

HomePage.jade

body
    .container(ng-controller='AppCtrl')
      h1 My List
      table.table
        thead
          tr
            th ID
            th Name
            th Action
            th  
        tbody
          tr(ng-repeat='contact in contactlist')
            td {{contact.Id}}
            td {{contact.Name}}
            td
              button.btn.btn-info(ng-click='select(contact.Id)') Select

DetailPage.jade

html(ng-app='myApp')


head
    // Latest compiled and minified CSS
    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css')
    // Optional theme
    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css')
    title!= title
  body    
    .panel.panel-default
      .panel-heading
        h3.panel-title!= Paneltitle
      .panel-body
        | Panel content
    script(src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js')  
    script(src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-route.min.js')     
    script(src='/controllers/controller.js')

使用NodeJS和AngularJS进行路由

0 个答案: