AngularJSを使用して単純な静的なWebサイトを作成しています。私はこの1つのように、異なるHTMLページへの私のテンプレート上NG-ビューをルーティングしています :最初のクリックでAngularJSルーティングがng-templateをロードしない
home.html:
<script type="text/ng-template" id="views/home.html">
You are in home
</script>
ここでは私のIndex.htmlと次のとおりです。
<!DOCTYPE html>
<html lang="en" ng-app="myApp" >
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<title>My Website</title>
<base href="/">
<meta name="author" content="Me">
</head>
<body ng-controller="ContentController">
<h1>My Website</h1>
<ul class="main-nav" id="main-nav">
<li><a href="home"><i class="fa fa-home"></i>Home</li>
<li><a href="portfolio"><i class="fa fa-comment"></i>Portfolio</li>
<li><a href="articles"><i class="fa fa-comment"></i>Articles</li>
<li><a href="books"><i class="fa fa-comment"></i>Books</li>
<li><a href="about"><i class="fa fa-shield"></i>About Me</li>
</ul>
<ng-view></ng-view>
</body>
</html>
マイルーティング私はリンク(ポートフォリオ、記事、...)のそれぞれをクリックする2回目の直後に動作します。 初めてリンクをクリックするとコントローラが実行されますが、HTMLコンテンツが表示されません(つまり、「あなたは在宅」は最初のクリックでは表示されません)。
index.htmlファイルにhome.htmlの内容を書き込むと、最初のクリックでも正しく動作します。 しかし、これらのリンクの1つ1つを初めてクリックすると正しく読み込まれない理由を理解したいと思います。
あなたは私を助けてくれますか?
ng-templateを別のファイルで使用する適切な方法はありますか?または、最初のクリック後にng-templateをリロードするために回避策を使用する必要がありますか?
ありがとうございました