Tutorial: 0 - angular-seed

You are now ready to build the phonecat application. In this step, you will become familiar with the most important source code files, learn how to start the development servers bundled with angular-seed, and run the application in the browser.

  1. In angular-phonecat directory, run this command:

    git checkout -f step-0

    This resets your workspace to step 0 of the tutorial app.

    You must repeat this for every future step in the tutorial and change the number to the number of the step you are on. This will cause any changes you made within your working directory to be lost.

  2. To see the app running in a browser, do one of the following:
    • For node.js users:
      1. In a separate terminal tab or window, run ./scripts/web-server.js to start the web server.
      2. Open a browser window for the app and navigate to http://localhost:8000/app/index.html
    • For other http servers:
      1. Configure the server to serve the files in the angular-phonecat directory.
      2. Navigate in your browser to http://localhost:[port-number]/[context-path]/app/index.html.
  1. Open msysGit bash and run this command (in angular-phonecat directory):

    git checkout -f step-0

    This resets your workspace to step 0 of the tutorial app.

    You must repeat this for every future step in the tutorial and change the number to the number of the step you are on. This will cause any changes you made within your working directory to be lost.

  2. To see the app running in a browser, do one of the following:
    • For node.js users:
      1. In a separate terminal tab or window, run node scripts\web-server.js to start the web server.
      2. Open a browser window for the app and navigate to http://localhost:8000/app/index.html
    • For other http servers:
      1. Configure the server to serve the files in the angular-phonecat directory.
      2. Navigate in your browser to http://localhost:[port-number]/[context-path]/app/index.html.
  1. In angular-phonecat directory, run this command:

    ./goto_step.sh 0

    This resets your workspace to step 0 of the tutorial app.

    You must repeat this for every future step in the tutorial and change the number to the number of the step you are on. This will cause any changes you made within your working directory to be lost.

  2. To see the app running in a browser, do one of the following:
    • For node.js users:
      1. In a separate terminal tab or window, run ./scripts/web-server.js to start the web server.
      2. Open a browser window for the app and navigate to http://localhost:8000/app/index.html
    • For other http servers:
      1. Configure the server to serve the files in the angular-phonecat sandbox directory.
      2. Navigate in your browser to http://localhost:[port-number]/[context-path]/app/index.html.
  1. Open windows command line and run this command (in angular-phonecat directory):

    goto_step.bat 0

    This resets your workspace to step 0 of the tutorial app.

    You must repeat this for every future step in the tutorial and change the number to the number of the step you are on. This will cause any changes you made within your working directory to be lost.

  2. To see the app running in a browser, do one of the following:
    • For node.js users:
      1. In a separate terminal tab or window, run node scripts\web-server.js to start the web server.
      2. Open a browser window for the app and navigate to http://localhost:8000/app/index.html
    • For other http servers:
      1. Configure the server to serve the files in the angular-phonecat sandbox directory.
      2. Navigate in your browser to http://localhost:[port-number]/[context-path]/app/index.html.

You can now see the page in your browser. It's not very exciting, but that's OK.

The static HTML page that displays "Nothing here yet!" was constructed with the HTML code shown below. The code contains some key angular elements that we will need going forward.

app/index.html:

<!doctype html>
<html xmlns:ng="http://angularjs.org/">
<head>
  <meta charset="utf-8">
  <title>my angular app</title>
  <link rel="stylesheet" href="css/app.css"/>
</head>
<body>


  Nothing here yet!


  <script src="lib/angular/angular.js" ng:autobind></script>
</body>
</html>

What is the code doing?

What are all these files in my working directory?

Most of the files in your working directory come from the angular-seed project which is typically used to bootstrap new angular projects. The seed project includes the latest angular libraries, test libraries, scripts and a simple example app, all pre-configured for developing a typical web app.

For the purposes of this tutorial, we modified the angular-seed with the following changes:

Summary

Now let's go to step 1 and add some content to the web app.