2016-12-15 5 views
1

角度ルーティングとエクスプレスを使用して部分的な表示に問題があります。私は物事を整えようとしているので、pug(以前はヒスイ)を使って短形のHTMLを書くことができます。私が言うことができる限り、すべてが機能し、エラーがなく、すべてが正しく引き出されているはずです。ここでExpress Routing templateUrlが動作しないExpressバックエンド

doctype html 
    html(ng-app='myapp') 
     head 
      base(href='/') 
      script(src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js") 
      script(src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.js") 

     body 
      header#main 

      .content(ng-view) 


      script(src="/js/app.js") 
      script(src="/js/controllers/adminController.js") 
      script(src="/js/routes.js") 

私のルートは

angular.module('myapp') 
.config(function ($routeProvider, $locationProvider) { 
    $routeProvider 
     .when('/admin', { 
      templateUrl: '/templates/admin', 
      controller: 'AdminController', 
      caseInsensitiveMatch: true 
     }) 
     .otherwise({ 
      template: '<h1>Page not found</h1>' 
     }) 
    ; 
    $locationProvider.html5Mode(true); 
}); 

そして最後に、速達ルートファイルされる:私は次のように私のメインページがある(API呼び出し、コントローラなど)作業アプリケーションの他のほとんどの部分を持っています:

router.get('/templates/:name', function(req, res, next) { 
    var name = 'templates/' + req.params.name; 
    console.log('Express: ' + name); 
    res.render(name, function(err, html){ 
     //this callback function can be removed. It's just for debugging. 
     if(err) 
      console.log("Error: " + err); 
     else 
      console.log("We're good!"); 
     res.send(html); 
    }); 
}); 

最後に、ここではノードサーバの出力は次のとおりです。

Express: index 
GET /admin 304 68.962 ms - - 
GET /js/app.js 304 0.994 ms - - 
GET /js/controllers/adminController.js 304 0.751 ms - - 
GET /js/routes.js 304 14.590 ms - - 
Express: templates/admin 
We're good! 
GET /templates/admin 304 368.081 ms - - 

ご覧のとおり、インデックスがロードされ、部分を呼び出し、テンプレートは期待どおりに呼び出されレンダリングされます。

問題は、ng-viewが置換または更新されていないことです。 templateUrlではなくテンプレートへのルートを変更してテキスト行を出力するだけで、すべてうまく動作するので、ルーティングが機能していることが分かります。これはアプリの設定上の問題ではありません。

私は数日間このことに悩まされています。エラーメッセージが表示されないまま、これがなぜ機能しないのかについては完全に暗いです。私は私のコントローラでは、以下の項目をチェックするとき

はまた、私は部分的に取得するので、それは正しくて来ている:私のルーティングにオプションを、私のコントローラを参照:「controllerAs」を追加することにより、固定

angular.module('buriedcinema.controllers') 
    .controller('AdminController', ['$templateCache', function(Movies, Users, $templateCache){ 
    console.log($templateCache.get('templates/admin')); 
} 
console: 
<h1> this is my partial </h1> 
+0

「GET/templates/admin」のレスポンスは、インスペクタなどのように見えます。あるいは 'curl http:// YOURSERVER:PORT/teplates/admin'を試して、何がレンダリングされているのか見てみましょう。 JSコンソールは何を言いますか?任意のエラー? – jigfox

+0

正常に動作し、エラーは発生しません。 – stevenamoore

+0

とサーバは何をレンダリングするのですか? – jigfox

答えて

0

をオブジェクト名で指定します。

.when('/admin', { 
      templateUrl: 'templates/admin', 
      controller: 'AdminController', 
      controllerAs: 'adminCtrl', 
      caseInsensitiveMatch: true 
     }) 

より技術的な説明は、私は状態を持つオブジェクトをインスタンス化し、それは更新されませんので、静的に私のコントローラを使用しようとしなかったことです。これが他の人を助けることができるといいですね。

関連する問題