The solution that ng-view in Angular cannot load JS code?

  node.js, question

Hello, everyone, today when building a website with MEAN stack, we created a universal template index.html. After creating < head >, < header > and < footer >, I want to use ng-view and other html files as the main content of the page.

When I was using ng-view to load a main.html on another page, I found that if I put JS code needed by main.html in index.html, the code would have run before main.html was loaded. At the end of main.html, JS will not be loaded due to ng-view’s feature.

The following is the code for 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>

The following is the code for 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>

I would like to ask you how you can solve this problem and let JS run successfully when you encounter this situation.

Thank you all!

If the js written by the host will affect this page, you can use lazy loading, a route to load a js file and view. This is what our project is currently using.https://github.com/Vanthink-UED/AngularAMD-Tutorial