2017-01-13 8 views
0

私は以前Angularで作業しましたが、しばらく経っていますので少し錆びます。私はAngular ui-routerに自分の州のHTMLテンプレートをロードできないようです。これは非常に単純なアプリです。 ajax呼び出しを必要とせず、単にui-router経由のhtmlテンプレートです。私が現在到達しようとしているのは/ projectsの状態ですが、/#/ projectsを入力すると、空白のページしか表示されません。同様に、/#の後のパスは#!#%2Fprojectsになります。これが正常かどうかはわかりません。コンソールにエラーが表示されず、状態とコントローラに入力したすべてのログがログアウトしているように見え、正しくロードされていることを示します。したがって、AngularはtemplateUrlを見つけられませんが、どうしていいのかわかりません。Angular 1.6を使用しています。ここでは、関連するすべてのファイルは、以下のとおりです。 server.jsAngular-ui-routerがビューを読み込んでいません

'use strict'; 
/* eslint-disable global-require */ 

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

app.use("/", express.static(__dirname)); 

var port=app.listen(process.env.PORT || 8080); 
app.listen(port, function(){ 
    console.log("Server working!"); 
}) 

app.get('*', function(request, response){ 
    console.log(request); 
    response.sendFile(__dirname+'/browser/index.html'); 
}) 

私のindex.htmlファイル:

<html> 
<head> 
<title> My Portfolio</title> 
<script src="/node_modules/angular/angular.js" defer></script> 
<script src="/node_modules/angular-ui-router/release/angular-ui-router.js" defer></script> 
<script src="browser/js/app.js" defer></script> 
<script src="browser/js/projects/projects_controller.js" defer></script> 
<script src="browser/js/projects/projects_state.js" defer></script> 
</head> 
<body ng-app="app"> 
<div id="main"> 
<ui-view></ui-view> 
</div> 
</body> 
</html> 

私app.js

'use strict'; 

var app = angular.module('app', ['ui.router']); 

app.run(function($rootScope) { 
    $rootScope.$on("$stateChangeError", console.log.bind(console)); 
}); 

私のプロジェクトの状態:

'use strict';

console.log("project state"); 
app.config(function($stateProvider){ 
    $stateProvider.state('projects', { 
     url:'/projects', 
     templateUrl: '/js/projects/projects.html', 
     controller: 'projects_ctrl' 
    }) 
}) 
console.log("state out!") 

プロジェクトコントローラ:

'use strict'; 

console.log("controller"); 
app.controller('projects_ctrl', function($scope){ 
    console.log("hi!") 
}) 

そしてprojects.htmlページ(到達されることはありません...)

<div> 
<h1>Hi, this is the projects page!</h1> 
</div> 

助けてください! 1)$state.go()を呼び出します。

+0

ブラウザからビュー(つまり/js/projects/projects.html)を読み込むことはできますか? –

+0

@JB Nizetいいえ、表示できません。それが私の全面的な問題です。 – Wallaceness

+0

それはサーバーの問題です。角度の問題ではありません。サーバーがビューへのアクセスを許可していない場合、どのように角度を表示できますか? NodeJSで質問にタグを付け、サーバーの構造を投稿してください。私はNodeJSに関して有能ではありませんが、NodeJSのタグが付けられていない場合は、あなたの質問を見てNodeJS開発者を取得しません。 –

答えて

0

私はこの問題を解決しました。問題は、templateUrlでパスを正しく指定しなかったことです。正しいパスは、js/projects/projects.htmlではなく、browser/js/projects/projects.htmlでした。奇妙なことに、私は前にそれを試していたと誓っていたかもしれませんが、今は魔法のように働いていました。私が以前に思ったように、読み込まれたindex.htmlからではなく、サーバーで提供される静的パスからの角のナビゲーションが学んだと思います。

0

は状態をアクティブにするには、3つの主要な方法があります1.5.xのに戻って復元し、ルートに

+0

これは機能しませんでした。私は1.5.9に戻って#を使ってみましたが、違いはありませんでした。 – Wallaceness

+0

bowerインストールログを読みます。 bower.jsonでは、この "解像度"のような解像度を追加することができます:{ "angular": "1.5.11" } – pravs

0

を#を使用します。 2)<a ui-sref="stateName">State</a> のようなui-srefを含むリンクをクリックします。 に関連付けられた特定のURLに移動します。状態をアクティブにするコードが存在しないため、コードはproject.html まで到達できませんでした。リンク:

https://plnkr.co/edit/AVhuZJsO8ujySLZQG4TL?p=preview 
+0

手動で/#/ projectsページに移動しました。答えをありがとう、残念ながら、これは問題を解決しませんでした。たとえ私がui-srefを置いても、ページはまだプロジェクトのページにはないからです。不思議なことだが、それをクリックした後、2番目の「プロジェクト」リンクが追加された。 – Wallaceness

関連する問題