CODEWITHSUNDEEP
javascripthtmlangularjsnode.js
sam4444
sam4444

Reputation: 99

How to connect an angular app to your html

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:

|--Timer/
|  -browser/
|      -js/
|      -app.js --> This is where I declare my angular app like var app = anguler.module('app', []);
|      -scss/
|  -server/
|      -public/
|         -index.js --> 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

This is what I have in app.js

'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);
});

And this is index.html

<!DOCTYPE html>
<html>
    <head>
        <!-- Custom css style sheet -->
        <link rel="stylesheet" href="index.css">

        <!-- Include Angular from google cdn  -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

        <script type="text/javascript" src='index.js'> </script>
    </head>

    <body ng-app='PomodoroTimer'>
        <p>{{message}}</p>
    </body>
</html>

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 "require is undefined" since it can only be used on the server and not on the browser. Also, even in index.js I get the error that "require is not defined" but if express can't be required then how is it supposed to be used?

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.

GitHub link: https://github.com/sbernheim4/pomodoro-timer

Upvotes: 1

Views: 1721

Answers (2)

2ps
2ps

Reputation: 15926

Several questions in your post. Generally speaking you are confusing the files that are used by node as part of your appserver to serve webpages and the javascript that will be loaded in the user's browser. Once you remember to keep these two separate, it becomes easier to understand.

  1. 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 require is undefined since it can only be used on the server and not on the browser?

    This is correct—for now require is only used on the server-side and not in the browser (unless you are using something like AMD/require.js/bowserify). To use the angular keyword, you just use angular in your script without the require:

    'use strict'
// var angular = require('angular');     
var app = angular.module('PomodoroTimer', []);

    The angular keyword is available globally once you include the angular js libraries, and you can include it the same way that you were including index.js.

  2. Also, even in index.js I get the error that require is not defined but if express can't be required then how is it supposed to be used?

    The thing to remember here is that index.js is part of your server (and, thus, shouldn't be in the public directory). This means that you don't include index.js in your HTML. instead, you launch node by using node /path/to/index.js to start your webserver. Keep your server-side script separate and out of your HTML, and you will be good to go! Remember, you use your node-semantics on the server-side and you use browser javascript semantics in your scripts/HTML. You do not include your server-side JS in your index.html.

Upvotes: 1

nael
nael

Reputation: 1507

In the HTML template, it should say

<body ng-app='pomodoro-timer'>
        <p>{{message}}</p>
</body>

Upvotes: 0

Related Questions