How to connect an angular app to your html
<p>I'm trying to better understand how to connect the different parts of an application. I am now trying to figure out how to connect my angular app to my html file if the files are in separate folders. My folder structure is like this:</p>
<pre class="lang-none prettyprint-override"><code>|--Timer/
|  -browser/
|      -js/
|      -app.js --&gt; This is where I declare my angular app like var app = anguler.module('app', []);
|      -scss/
|  -server/
|      -public/
|         -index.js --&gt; using ExpressJS to handle routing here. Essienntially just send all requests to index.html since I plan on eventually using the UI-Router from Anguler for state changes
|         -index.css
|      -index.html
</code></pre>
<p>This is what I have in app.js</p>
<pre><code>'use strict'
var angular = require('angular'); //I don't know if this is the right way to use angular but otherwise I get an error saying angular is undefined. I have it installed through node as a dependency

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

app.controller('MainCtrl', function($scope) {
    $scope.message = 'THIS IS A MESSAGE';
});

app.config(function($locationProvider) {
    $locationProvider.html5Mode(true);
});
</code></pre>
<p>And this is index.html</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;!-- Custom css style sheet --&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;index.css&quot;&gt;

        &lt;!-- Include Angular from google cdn  --&gt;
        &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js&quot;&gt;&lt;/script&gt;

        &lt;script type=&quot;text/javascript&quot; src='index.js'&gt; &lt;/script&gt;
    &lt;/head&gt;

    &lt;body ng-app='PomodoroTimer'&gt;
        &lt;p&gt;{{message}}&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>How can I make it so that my index.html file references my app.js and loads my angular app? When I tried to use a script tag like in how I load index.js, I would get an error saying &quot;require is undefined&quot; since it can only be used on the server and not on the browser. Also, even in index.js I get the error that &quot;require is not defined&quot; but if express can't be required then how is it supposed to be used?</p>
<p>I looked into using browserify to get around the error with require but the loading time of my page shot way up. I know there are a lot of tools which do all this bootstrapping like yeomen generators but I want to understand how to do this myself from scratch.</p>
<p>GitHub link: <a href="https://github.com/sbernheim4/pomodoro-timer" rel="nofollow noreferrer">https://github.com/sbernheim4/pomodoro-timer</a></p>