starting a web server for angular nodejs app

Question

I am taking baby steps into the MEAN stack but can't figure out step 1, how to run my app. What do I use for a development web server and how do I start it in my directory?

If I just launch index.html as a file it will not work.

Here is my code

<!DOCTYPE html>
<html>

  <head lang="en">
    <meta charset="utf-8">
    <title>My Site</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js">    </script>
    <link rel="stylesheet" href="style.css">
<script>
  document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/3.2.1/css/bootstrap-combined.min.css"
rel="stylesheet">
  </head>

  <body ng-app="myApp" ng-controller="MainCtrl"> 
    <a class="btn" ng-click="visible = true">Show the Form</a>

    <div ng-show="visible">I used to be hidden!</div>

  </body>

</html>

app.js

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

app.controller( 'MainCtrl', function( $scope ) {
  $scope.visible = false;
});

Look [HERE](http://stackoverflow.com/questions/16333790/node-js-quick-file-server-static-files-over-http) for simple node http server. — artur grzesiak, Oct 15 '14 at 08:19

score 2 · Answer 1 · answered Oct 15 '14 at 08:49

If you simply want to explore AngularJS functionality(or any other front end library for that matter), you don't need a Node.js app.

Assuming you already have npm installed just follow these simple steps:

npm install http-server -g
go from your console to the folder containing your html files
enter http-server -c-1 -p 9000

That would start a simple web server on port 9000 with no caching on your specified directory. Then simply go to http://0.0.0.0:9000/your_page.html from a browser and voila.

If you want to explore more options on http-server

score 1 · Accepted Answer · answered Oct 15 '14 at 08:16

This code can run without a http server, just in the browser. Note that you are using a really outdated version of Angular (1.0.3), they just released version 1.3.0.

If you want to run your stuff on a local development server, you could use something like yeoman, which generates the app boilerplate for you and comes with a local node server and a build job (check for example https://github.com/yeoman/generator-webapp or https://github.com/yeoman/generator-gulp-webapp)

If you just want a super easy hhtp server and have python installed you can also use python -m SimpleHTTPServer to start up an http server in the current folder.

Here is your code in plunker and it works: http://plnkr.co/edit/j2SqmrP1yWqR68Gm3UCn?p=preview

score 0 · Answer 3 · answered Oct 15 '14 at 08:14

0

As you are using the MEAN stack, you should probably check node.js to implement your web server. Check http://www.nodebeginner.org/, it should allow you to code a very simple one.

answered Oct 15 '14 at 08:14

nsanglar

1,632
1
14
24

starting a web server for angular nodejs app

3 Answers3