大家好，今天在用 MEAN 堆栈做一个网站的时候，创建了一个通用的模版 index.html。把 <head>、<header> 以及 <footer> 都创建好了，想用 ng-view 和其他的一些 html 文件来作为页面主要的内容。
我在用 ng-view 加载一个其他页面 main.html 的时候，发现如果把 main.html 所需要的 JS 代码放在 index.html 里面的话，还没加载出 main.html 的时候代码就已经运行了；而放在 main.html 末尾的话，由于 ng-view 的特性 JS 不会被加载。
以下是 index.html 的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/style.css">
<link rel="icon" href="images/Steering-wheel.png">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700,500' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.js"></script>
<script src="javascripts/TYDApp.js"></script>
</head>
<body ng-app="TYDApp">
<header>
<div id="logo">
<p>Teach Yourself Driving</p>
</div>
<nav>
<a href="#">Home</a>
<a href="#/game">Game</a>
<a href="#/rules">Game Rules</a>
<a href="#/promotion">Promotion</a>
<a href="#/references">References</a>
<a href="#/account"><img src="images/account.png"></a>
</nav>
</header>
<div ng-view></div>
<footer>
<div class="footer-left">
<ul>
<li>Last Modified Date: <span id="lastMo"></span></li>
<li>Current Date: <span id="cDate"></span></li>
</ul>
</div>
<div class="footer-right">
<p>Teach Yourself Driving</p>
</div>
</footer>
<script src="javascripts/dateNTime.js"></script>
</body>
以下是 main.js 的代码：
<div class="home-table">
<div class="table-row">
<div class="table-cell main-cell">
<article class="text">
<h2>Are you beginning to drive?</h2>
<p>This website is built to help people who have need in enhancing road rules. Typically the people who are new to dirving and have troubles in dealing with complex traffic in real life.</p>
<h2>Are you tired of memorizing rules?</h2>
<p>Learning via a game is much more effective than memorizing only, it can help you abosorb knowledges much quickly without feeling bored.</p>
<h2>You have come to the right place!</h2>
<p>Get rid of the boring text version of road rules, let's try "Teach Yourself Driving" now! Click the steering wheel on the right.</p>
</article>
</div>
<aside id="startAside" class="table-cell game-cell text box game-div">
<a href="game"><img src="images/steering-wheel-bg.png" alt="Start background"></a>
</aside>
</div>
</div>
<script src="javascripts/startGame.js"></script>
我想请问一下大家遇到这样的情况，如何才能解决这样的问题，让 JS 能够成功运行呢？
谢谢大家！
如果楼主写的这个js会造成了本页面的影响，可以采用惰性加载啊，一个路由加载某个js文件和view。我们项目目前用的是这个 https://github.com/Vanthink-UED/AngularAMD-Tutorial
ng-route很鸡肋，现在都是用的ui-route,看你的用angular1.2.x。还是用的ui-route吧。ng-route不能嵌套，会出现死循环。