角度路由不能使用Express

我正在嘗試使用Angular創建單個頁面的應用程序。路由我在後端使用Node/Express。雖然Express正確地提供了我的靜態index.html，但我的部分.html頁面沒有被拉入我的ng-view中。角度路由不能使用Express

這裏就是視圖與通話的角度應用拖着走在HTML：

<body ng-app="app"> 
    <nav class="navbar navbar-inverse bg-inverse navbar-fixed-top topnav" role="navigation"> 
     <div class="container topnav"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand topnav" href="/">DtepDC</a> 
      </div> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li> 
         <a href="/movies">Movies App</a> 
        </li> 
        <li> 
         <a href="mailto:[email protected]">Contact</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

    <div ng-view></div>

這裏是我的角路由代碼：

 app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { 
     $routeProvider 
     .when("/", { 
      templateUrl: "intro-header.html" 
     }) 
     .when("/movies", { 
      templateUrl: "#!/movies.html", 
      controller: "moviesCtrl" 
     }). 
     otherwise({ 
      redirect: '/' 
     }); 
     $locationProvider.html5Mode(true); 
    }]);

這裏是我的Express服務器.js文件代碼：

var express = require('express'); 
var path = require('path'); 
var app = express(); 

app.set('port', 3000); 
app.use('/', express.static(__dirname + '/')); 

app.use(function(req, res) { 
res.sendFile(__dirname + '/index.html'); 
}); 

app.get('/', function(req, res) { 
    res.sendFile(path.join(__dirname + '/index.html')); 
}); 

var server = app.listen(app.get('port'), function() { 
var port = server.address().port; 
console.log('Running server at http://localhost:' + port + '/'); 
});

這裏是我的工廠代碼和我有包括調用應用角度：

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

app.factory("getMovie", ["$http",function($http){ 
    var obj = {}; 
    var url = "https://api.nytimes.com/svc/movies/v2/reviews/search.json"; 
    obj.getMovieInfo = function(title){ 
     return $http({ 
      url: url, 
      method: "GET", 
      params:{ 
       query: title, 
       api_key: "68094e1974e7984c256beb1653319915:3:33678189", 
       callback: "JSON_CALLBACK" 
      }, 
      headers: { 
       "Content-Type" : "application/json" 
      } 
      }).then(function successCallback(response) { 
        return response.data.results; 
      }, function errorCallback(response) { 
        console.log("Nothing to see here..."); 
      }); 
      } 
     return obj; 
}]);

這裏是我的控制器代碼：

 app.controller("moviesCtrl", ["$scope", "getMovie",  function($scope, getMovie){ 
    $scope.findMovie = function() { 
     getMovie.getMovieInfo($scope.title).then(function(response){ 
      $scope.results = response; 
     }); 
    }  
}]);

這是我與控制器HTML塊：

<h2>Movie Search</h2> 
     <!-- START row --> 
     <div ng-controller="moviesCtrl"> 
      <div> 
       <div class="col-sm-12" class="form-group">     
        <form name="myForm" class="form-inline"> 

         Find a NYTimes movie review based on its title (or part of a title): <input type="string" class="form-control" ng-model="title"> 
         <input type="submit" value="Search" class="btn btn-success" ng-click="findMovie()" /> 
        </form> 
       </div> 
      </div> 
       <div class="col-sm-6"> 
         <div ng-cloak ng-repeat="result in results | filter: { display_title: title }" class="row results"> 
          <img src="{{ result.multimedia.src }}" height="{{ result.multimedia.height }}" width="{{ result.multimedia.width }}" class="pull-left"/> 
          <div class="col-sm-6 pull-left"> 
           <div><strong><em><a href="{{ result.link.url }}">{{ result.display_title }}</a></em></strong></div> 
          {{ result.summary_short }}</div> 
          <div class="clearfix"></div> 
         </div> 
       </div> 
      </div>

提前感謝！

來源

2017-04-09 wdc_dt

你能告訴我們你的控制器和你的HTML， – Sorikairo

我剛剛更新了，感謝您的JS，讓我知道你需要什麼。謝謝！ –

使用ng_view的html部分可能會有用。 – Sorikairo

你可以簡單地添加到您的路線

/* ANGULAR MAIN ROUTE */ 
router.get('*', function(req, res) { 
    res.sendfile('./public/index.html'); 
});

來源

2017-04-10 06:20:17 JavaEvgen

角度路由不能使用Express

回答

相關問題