title: Express/AngularJs "angular is not defined"
body: <p>I am following the lessons on egghead.io trying to learn Angular. This lesson is about $http, and for some reason I can’t get a basic Expressjs/Angular app running.</p>
  
  <p>Lesson link: <a href="https://egghead.io/lessons/angularjs-http" rel="nofollow">https://egghead.io/lessons/angularjs-http</a></p>
  
  <p>Here is my directory stucture:</p>
  
  <pre><code>app.js
  public/
      index.html
      main.js
  package.json
  node_modules/
  bower_components/
  </code></pre>
  
  <p>Here are my files:</p>
  
  <p>public/index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang="en"&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Egghead Videos&lt;/title&gt;
    &lt;link rel="stylesheet" href="../vendor/foundation.min.css"&gt;
  &lt;/head&gt;
  &lt;body ng-app="app" ng-controller="AppCtrl as app"&gt;
  
  &lt;input type="text" ng-model="app.person.firstName" /&gt;
    &lt;input type="text" ng-model="app.person.lastName" /&gt;
    &lt;input type="button" ng-click="app.addPerson(app.person)" /&gt;
  
    &lt;ul&gt;
      &lt;li ng-repeat="person in app.people"&gt;
          {{person.firstName}} {{person.lastName}}
      &lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>var express = require('express');
  var http = require('http');
  var cors = require('cors');
  var bodyParser = require('body-parser');
  
  var app = express();
  
  app.use(bodyParser.urlencoded({
    extended: true
  }));
  app.use(cors());
  app.set('port', 3000);
  
  app.use(express.static(__dirname + '/public'));
  app.use(express.static(__dirname + '/bower_components'));
  
  var data = [
    {"firstName": "Jeff", "lastname": "Winger"},
    {"firstName": "Troy", "lastname": "Barnes"},
    {"firstName": "Britta", "lastname": "Perry"},
    {"firstName": "Abed", "lastname": "Nadir"}
  ];
  
  app.get('/users', function(req, res) {
      res.send(data);
  });
  app.post('/users', function(req, res) {
      res.send(req.body);
  });
  </code></pre>
  
  <p>public/main.js</p>
  
  <pre><code>var app = angular.module("app", []);
  
  app.controller("AppCtrl", function($http) {
      var app = this;
      $http.get("http://localhost:3000/users")
        .success(function(data) {
          app.people = data;
        })
  
      app.addPerson = function(person) {
          $http.post("http://localhost:3000/users", person)
            .success(function(data) {
              app.people = data;
            })
      }
  })
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "users-app",
    "description": "users test app",
    "version": "0.0.1",
    "private": true,
    "dependencies": {
      "express": "latest",
      "body-parser": "*",
      "cors": "*"
    }
  }
  </code></pre>
  
  <p>So I made some changes from last time based on the comments, but it is still not working.</p>
  
  <p>To run it I am typing "node app.js" in the command line. Is that correct, or should I be typing node “public/main.js” to run the app? I am a little confused about that part.</p>
  
  <p>When I type "node app.js" nothing happens and the browser says it can’t connect at localhost. When I type "node public/main.js" it says "angular not defined".</p>
  
  <p>Any ideas?</p>