Scripts for running tests on Windows

README.md

@@ -1,101 +1,171 @@
-# angular-seed — the seed for <angular/> apps
+# <angular/> Phone Catalog Tutorial Application
 
-This project is an application skeleton for a typical [angular](http://angularjs.org/) web app. You
-can use it to quickly bootstrap your angular webapp projects and dev environment for these projects.
+# Overview
 
-The seed contains angular libraries, test libraries and a bunch of scripts all preconfigured for
-instant web development gratification. Just clone the repo (or download the zip/tarball), start up
-our (or yours) webserver and you are ready to develop and test your application.
+This application takes the developer thought the process of building a web-application using
+angular. The application is loosely based on
+[Google phone gallery](http://www.google.com/phone/). Each commit is a separate lesson
+teaching a single aspect of angular.
 
-The seed app doesn't do much, just shows how to wire two controllers and views together. You can
-check it out by opening app/index.html in your browser (might not work file `file://` scheme in
-certain browsers, see note below).
 
-_Note: While angular is client-side-only technology and it's possible to create angular webapps that
-don't require a backend server at all, we recommend hosting the project files using a local
-webserver during development to avoid issues with security restrictions (sandbox) in browsers. The
-sandbox implementation varies between browsers, but quite often prevents things like cookies, xhr,
-etc to function properly when an html page is opened via `file://` scheme instead of `http://`._
+# Prerequisites
 
+### Git
+- A good place to learn about setting up git is [here][git-github]
+- Git [home][git-home] (download, documentation)
 
-## How to use angular-seed
+### Node.js
+- Generic [installation instructions][node-generic].
+- Mac DMG [here][node-mac]
+- Windows download from [here][node-windows]. (You will also need
+  [7 Zip] to unzip the node archive)
+  (and don't forget to add `node.exe` to  your executable path)
 
-Clone the angular-seed repository and start hacking...
+### Java
+- http://www.java.com
 
+# Workings of the application
 
-### Running the app during development
+- The application filesystem layout structure is based on the [angular-seed] project.
+- There is no backend (no server) for this application. Instead we fake the XHRs by fetching
+  static json files.
+- Read the Development section at the end to familiarize yourself with running and developing
+  an angular application.
 
-You can pick one of these options:
+# Commits / Tutorial Outline
 
-* serve this repository with your webserver
-* install node.js and run `scripts/web-server.js`
+You can check out any point of the tutorial using
+    git checkout step-?
 
-Then navigate your browser to `http://localhost:<port>/app/index.html` to see the app running in
-your browser.
+To see the changes which between any two lessons use the git diff command.
+    git diff step-?..step-?
 
+## step-0
 
-### Running the app in production
+- Initial [angular-seed] project layout
 
-This really depends on how complex is your app and the overall infrastructure of your system, but
-the general rule is that all you need in production are all the files under the `app/` directory.
-Everything else should be omitted.
 
-angular apps are really just a bunch of static html, css and js files that just need to be hosted
-somewhere, where they can be accessed by browsers.
+## step-1
 
-If your angular app is talking to the backend server via xhr or other means, you need to figure
-out what is the best way to host the static files to comply with the same origin policy if
-applicable. Usually this is done by hosting the files by the backend server or through
-reverse-proxying the backend server(s) and a webserver(s).
+- We have converted the seed application by removing all of the boiler-plate code.
+- We have added single static HTML file which shows a static list of phones. (we will convert this
+  static page into dynamic one with the help of angular)
 
 
-### Running unit tests
+## step-2
 
-We recommend using [jasmine](http://pivotal.github.com/jasmine/) and
-[JsTestDriver](http://code.google.com/p/js-test-driver/) for your unit tests/specs, but you are free
-to use whatever works for you.
+- Converted static page into dynamic one by:
+  - create a root controller for the application
+  - extracting the data from HTML into a the controller as a mock dataset
+  - convert the static document into a template with the use of `ng:` [directive] (iterate over
+    mock data using [ng:repeat] and render it into a view)
+- Added unit test, which mostly shows how one goes about writing a unit test, rather then test
+  something of value on our mock dataset.
 
-Requires java and a local or remote browser.
 
-* start `scripts/test-server.sh`
-* navigate your browser to `http://localhost:9876/`
-* click on one of the capture links (preferably the "strict" one)
-* run `scripts/test.sh`
+## step-3
 
+- added a search box to demonstrate how:
+  - the data-binding works on input fields
+  - to use [$filter] function
+  - [ng:repeat] automatically shrinks and grows the number of phones in the view
+- added an end-to-end test to:
+  - show how end-to-end tests are written and used
+  - to prove that the search box and the repeater are correctly wired together
 
-### Continuous unit testing
 
-Requires ruby and [watchr](https://github.com/mynyml/watchr) gem.
+## step-4
+
+- replaced the mock data with data loaded from the server (in our case the JSON return is just a
+  static file)
+  - The JSON is loaded using the [$xhr] service
+- Demonstrate the use of [services][service] and [dependency injection][DI]
+  - The [$xhr] is injected into the controller through [dependency injection][DI]
+
+
+## step-5
+
+- adding phone image and links to phone pages
+- css to style the page just a notch
+
+
+## step-6
+
+- making the order predicate for catalog dynamic
+  - adding 'predicates' section to the view with links that control the order
+  - ordering defaults to 'age' property
+- css sugar
+
+
+## step-7
+
+- Introduce the [$route] service which allows binding URLs for deep-linking with views
+  - Replace content of root controller PhonesCtrl with [$route] configuration
+  - Map `/phones' to PhoneListCtrl and partails/phones-list.html
+  - Map `/phones/phone-id' to PhoneDetailCtrl and partails/phones-detail.html
+  - Copy deep linking parameters to root controller `params` property for access in sub controllers
+  - Replace content of index.html with [ng:view]
+- Create PhoneListCtrl view
+  - Move code which fetches phones data into PhoneListCtrl
+  - Move existing HTML from index.html to partials/phone-list.html
+- Create PhoneDetailsCtrl view
+  - Wire [$route] service to map `/phanes/phone-id` to map to this controller.
+  - Empty PhoneDetailsCtrl
+  - Place holder partials/phane-details.html
 
-* start JSTD server and capture a browser as described above
-* start watchr as `watchr scripts/watchr.rb`
-* in a different window/tab/editor `tail -f logs/jstd.log`
-* edit files in `app/` or `src/` and save them
-* watch the log to see updates
+## step-8
 
-There are many other ways to achieve the same effect. Feel free to use them if you prefer them over
-watchr.
+- Fetch data for and render phone detail view
+  - [$xhr] to fetch details for a specific phone
+  - template for the phone detailed view
+- CSS to make it look pretty
+- Detail data for phones in JSON format
 
+## step-9
 
-### End to end testing
+- replace [$xhr] with [$resource]
+  - demonstrate how a resource can be created using a [service]
 
-angular ships with a baked-in end-to-end test runner that understands angular, your app and allows
-you to write your tests with jasmine-like BDD syntax.
+# Development with angular-seed
 
-Requires a webserver, node.js or your backend server that hosts the angular static files.
+The following docs apply to all angular-seed projects and since the phonecat tutorial is a project
+based on angular-seed, the instructions apply to it as well.
 
-* create your end-to-end tests in `test/e2e/scenarios.js`
-* serve your project directory with your http/backend server or node.js + `scripts/web-server.js`
-* open `http://localhost:port/test/e2e/runner.html` in your browser
+## Running the app during development
 
+1. run `./scripts/web-server.js`
+2. navigate your browser to `http://localhost:8000/app/index.html` to see the app running in your
+   browser.
 
-### Receiving updates from upstream
+## Running unit tests
 
-When we upgrade angular-seed's repo with newer angular or testing library code, you can just
-fetch the changes and merge them into your project with git.
+Requires java.
 
+1. start `./scripts/test-server.sh`
+2. navigate your browser to `http://localhost:9876/`
+3. click on: capture strict link
+4. run `scripts/test.sh`
+5. edit files in `app/` or `src/` and save them
+6. go to step 4.
 
-## Directory Layout
+
+## Continuous unit testing
+
+Requires ruby and [watchr](https://github.com/mynyml/watchr) gem.
+
+1. start JSTD server and capture a browser as described above
+2. start watchr as `watchr scripts/watchr.rb`
+3. in a different window/tab/editor `tail -f logs/jstd.log`
+4. edit files in `app/` or `src/` and save them
+5. watch the log to see updates
+
+
+## End to end testing
+
+1. open `http://localhost:8000/test/e2e/runner.html` in your browser
+
+
+## Application Directory Layout
 
     app/                --> all of the files to be used in production
       css/              --> css files
@@ -114,8 +184,6 @@ fetch the changes and merge them into your project with git.
           angular-ie-compat.js  --> angular patch for IE 6&7 compatibility
           version.txt           --> version number
       partials/         --> angular view partials (partial html templates)
-        partial1.html
-        partial2.html
 
     config/jsTestDriver.conf    --> config file for JsTestDriver
 
@@ -145,3 +213,21 @@ fetch the changes and merge them into your project with git.
 ## Contact
 
 For more information on angular please check out http://angularjs.org/
+
+[7 Zip]: http://www.7-zip.org/
+[angular-seed]: https://github.com/angular/angular-seed
+[DI]: http://docs.angularjs.org/#!guide.di
+[directive]: http://docs.angularjs.org/#!angular.directive
+[$filter]: http://docs.angularjs.org/#!angular.Array.filter
+[git-home]: http://git-scm.com
+[git-github]: http://help.github.com/set-up-git-redirect
+[ng:repeat]: http://docs.angularjs.org/#!angular.widget.@ng:repeat
+[ng:view]: http://docs.angularjs.org/#!angular.widget.ng:view
+[node-mac]: http://code.google.com/p/rudix/downloads/detail?name=node-0.4.0-0.dmg&can=2&q=
+[node-windows]: http://node-js.prcn.co.cc/
+[node-generic]: https://github.com/joyent/node/wiki/Installation
+[java]: http://www.java.com
+[$resource]: http://docs.angularjs.org/#!angular.service.$resource
+[$rouet]: http://docs.angularjs.org/#!angular.service.$route
+[service]: http://docs.angularjs.org/#!angular.service
+[$xhr]: http://docs.angularjs.org/#!angular.service.$xhr

app/css/app.css

@@ -1,30 +1,92 @@
 /* app css stylesheet */
 
-.menu {
+a {
+  color: blue;
+}
+
+.predicates {
+  position: absolute;
+  width: 9em;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.phones {
+  margin-left: 11em;
+  padding: 0;
   list-style: none;
-  border-bottom: 0.1em solid black;
+}
+
+.phones .thumb img {
+  float: left;
+  margin: -1.5em 1em 1.5em 0em;
+  padding-bottom: 1em;
+  height: 100px;
+  width: 100px;
+}
+
+.phones li {
+  clear: both;
+}
+
+/** Detail View **/
+img.phone {
+  float: left;
+  border: 1px solid black;
+  margin-right: 3em;
   margin-bottom: 2em;
-  padding: 0 0 0.5em;
+  background-color: white;
+  padding: 2em;
+  height: 400px;
+  width: 400px;
 }
 
-.menu:before {
-  content: "[";
+ul.phone-thumbs {
+  margin: 0;
+  list-style: none;
 }
 
-.menu:after {
-  content: "]";
+ul.phone-thumbs li {
+  border: 1px solid black;
+  display: inline-block;
+  margin: 1em;
+  background-color: white;
 }
 
-.menu > li {
-  display: inline;
+ul.phone-thumbs img {
+  height: 100px;
+  width: 100px;
+  padding: 1em;
 }
 
-.menu > li:before {
-  content: "|";
-  padding-right: 0.3em;
+ul.phone-thumbs img:hover {
+  cursor: pointer;
 }
 
-.menu > li:nth-child(1):before {
-  content: "";
+
+ul.specs {
+  clear: both;
+  margin: 0;
   padding: 0;
+  list-style: none;
+}
+
+ul.specs > li{
+  display: inline-block;
+  width: 200px;
+  vertical-align: top;
+}
+
+ul.specs > li > span{
+  font-weight: bold;
+  font-size: 1.2em;
+}
+
+ul.specs dt {
+  font-weight: bold;
+}
+
+h1 {
+  border-bottom: 1px solid gray;
 }

app/index.html

@@ -2,21 +2,16 @@
 <html xmlns:ng="http://angularjs.org/">
 <head>
   <meta charset="utf-8">
-  <title>my angular app</title>
+  <title>Google Phone Gallery</title>
   <link rel="stylesheet" href="css/app.css"/>
 </head>
-<body>
-  <ul class="menu">
-    <li><a href="#/view1">view1</a></li>
-    <li><a href="#/view2">view2</a></li>
-  </ul>
+<body ng:controller="PhoneCatCtrl">
 
   <ng:view></ng:view>
 
   <script src="lib/angular/angular.js" ng:autobind></script>
-  <script src="js/services.js"></script>
   <script src="js/controllers.js"></script>
   <script src="js/filters.js"></script>
-  <script src="js/widgets.js"></script>
+  <script src="js/services.js"></script>
 </body>
 </html>