angular / angular-phonecat

Tutorial on building an angular application.

AngularJS Phone Catalog Tutorial Application

Overview

This application takes the developer through the process of building a web-application using AngularJS. The application is loosely based on the Google Phone Gallery, which no longer exists. Here is a historical reference: Google Phone Gallery on WayBack

Each tagged commit is a separate lesson teaching a single aspect of the framework.

The full tutorial can be found at https://docs.angularjs.org/tutorial.

Prerequisites

Git

• A good place to learn about setting up git is here.
• You can find documentation and download git here.

Node.js and Tools

• Get Node.js.
• Install the tool dependencies: npm install

Workings of the Application

• The application filesystem layout structure is based on the angular-seed project.
• There is no dynamic backend (no application server) for this application. Instead we fake the application server by fetching static JSON files.
• Read the Development section at the end to familiarize yourself with running and developing an AngularJS application.

Commits / Tutorial Outline

You can check out any point of the tutorial using:

git checkout step-?

To see the changes made between any two lessons use the git diff command:

git diff step-?..step-?

step-0 Bootstrapping

• Add the 'angular.js' script.
• Add the ngApp directive to bootstrap the application.
• Add a simple template with an expression.

step-1 Static Template

• Add a stylesheet file ('app/app.css').
• Add a static list with two phones.

step-2 AngularJS Templates

• Convert the static phone list to dynamic by:
  • Creating a PhoneListController controller.
  • Extracting the data from HTML into the controller as an in-memory dataset.
  • Converting the static document into a template with the use of the ngRepeat directive.
• Add a simple unit test for the PhoneListController controller to show how to write tests and run them using Karma.

step-3 Components

• Introduce components.
• Combine the controller and the template into a reusable, isolated phoneList component.
• Refactor the application and tests to use the phoneList component.

step-4 Directory and File Organization

• Refactor the layout of files and directories, applying best practices and techniques that will make the application easier to maintain and expand in the future:
  • Put each entity in its own file.
  • Organize code by feature area (instead of by function).
  • Split code into modules that other modules can depend on.
  • Use external templates in .html files (instead of inline HTML strings).

step-5 Filtering Repeaters

• Add a search box to demonstrate:
  • How the data-binding works on input fields.
  • How to use the filter filter.
  • How ngRepeat automatically shrinks and grows the number of phones in the view.
• Add an end-to-end test to:
  • Show how end-to-end tests are written and used.
  • Prove that the search box and the repeater are correctly wired together.

step-6 Two-way Data Binding

• Add an age property to the phone model.
• Add a drop-down menu to control the phone list order.
• Override the default order value in controller.
• Add unit and end-to-end tests for this feature.

step-7 XHR & Dependency Injection

• Replace the in-memory dataset with data loaded from the server (in the form of a static 'phone.json' file to keep the tutorial backend agnostic):
  • The JSON data is loaded using the $http service.
• Demonstrate the use of services and dependency injection (DI):
  • $http is injected into the controller through DI.
  • Introduce DI annotation methods: .$inject and inline array

step-8 Templating Links & Images

• Add a phone image and links to phone pages.
• Add an end-to-end test that verifies the phone links.
• Tweak the CSS to style the page just a notch.

step-9 Routing & Multiple Views

• Introduce the $route service, which allows binding URLs to views for routing and deep-linking:
  • Add the ngRoute module as a dependency.
  • Configure routes for the application.
  • Use the ngView directive in 'index.html'.
• Create a phone list route (/phones):
  • Map /phones to the existing phoneList component.
• Create a phone detail route (/phones/:phoneId):
  • Map /phones/:phoneId to a new phoneDetail component.
  • Create a dummy phoneDetail component, which displays the selected phone ID.
  • Pass the phoneId parameter to the component's controller via $routeParams.

step-10 More Templating

• Implement fetching data for the selected phone and rendering to the view:
  • Use $http in PhoneDetailController to fetch the phone details from a JSON file.
  • Create the template for the detail view.
• Add CSS styles to make the phone detail page look "pretty-ish".

step-11 Custom Filters

• Implement a custom checkmark filter.
• Update the phoneDetail template to use the checkmark filter.
• Add a unit test for the checkmark filter.

step-12 Event Handlers

• Make the thumbnail images in the phone detail view clickable:
  • Introduce a mainImageUrl property on PhoneDetailController.
  • Implement the setImage() method for changing the main image.
  • Use ngClick on the thumbnails to register a handler that changes the main image.
  • Add an end-to-end test for this feature.

step-13 REST and Custom Services

• Replace $http with $resource.
• Create a custom Phone service that represents the RESTful client.
• Use a custom Jasmine equality tester in unit tests to ignore irrelevant properties.

step-14 Animations

• Add animations to the application:
  • Animate changes to the phone list, adding, removing and reordering phones with ngRepeat.
  • Animate view transitions with ngView.
  • Animate changes to the main phone image in the phone detail view.
• Showcase three different kinds of animations:
  • CSS transition animations.
  • CSS keyframe animations.
  • JavaScript-based animations.

Development with angular-phonecat

The following docs describe how you can test and develop this application further.

Installing Dependencies

The application relies upon various JS libraries, such as AngularJS and jQuery, and Node.js tools, such as Karma and Protractor. You can install these by running:

npm install

This will also download the AngularJS files needed for the current step of the tutorial and copy them to app/lib.

Most of the scripts described below will run this automatically but it doesn't do any harm to run it whenever you like.

Note copying the AngularJS files from node_modules to app/lib makes it easier to serve the files by a web server.

Running the Application during Development

• Run npm start.
• Navigate your browser to http://localhost:8000/ to see the application running.

Unit Testing

We recommend using Jasmine and Karma for your unit tests/specs, but you are free to use whatever works for you.

• Start Karma with npm test.
• A browser will start and connect to the Karma server. Chrome and Firefox are the default browsers, others can be captured by loading the same URL or by changing the karma.conf.js file.
• Karma will sit and watch your application and test JavaScript files. To run or re-run tests just change any of your these files.

End-to-End Testing

We recommend using Protractor for end-to-end (e2e) testing.

It requires a webserver that serves the application. See the Running the Application during Development section, above.

• Serve the application with: npm start
• In a separate terminal/command line window run the e2e tests: npm run protractor.
• Protractor will execute the e2e test scripts against the web application itself. The project is set up to run the tests on Chrome directly. If you want to run against other browsers, you must modify the configuration at e2e-tests/protractor-conf.js.

Note: Under the hood, Protractor uses the Selenium Standalone Server, which in turn requires the Java Development Kit (JDK) to be installed on your local machine. Check this by running java -version from the command line.

If JDK is not already installed, you can download it here.

Application Directory Layout

app/                     --> all the source code of the app (along with unit tests)
  lib/...                --> 3rd party JS/CSS libraries, including AngularJS and jQuery (copied over from `node_modules/`)
  core/                  --> all the source code of the core module (stuff used throughout the app)
    checkmark/...        --> files for the `checkmark` filter, including JS source code, specs
    phone/...            --> files for the `core.phone` submodule, including JS source code, specs
    core.module.js       --> the core module
  img/...                --> image files
  phone-detail/...       --> files for the `phoneDetail` module, including JS source code, HTML templates, specs
  phone-list/...         --> files for the `phoneList` module, including JS source code, HTML templates, specs
  phones/...             --> static JSON files with phone data (used to fake a backend API)
  app.animations.css     --> hooks for running CSS animations with `ngAnimate`
  app.animations.js      --> hooks for running JS animations with `ngAnimate`
  app.config.js          --> app-wide configuration of AngularJS services
  app.css                --> default stylesheet
  app.module.js          --> the main app module
  index.html             --> app layout file (the main HTML template file of the app)

e2e-tests/               --> config and source files for e2e tests
  protractor.conf.js     --> config file for running e2e tests with Protractor
  scenarios.js           --> e2e specs

node_modules/...         --> 3rd party libraries and development tools (fetched using `npm`)

scripts/                 --> handy scripts
  private/...            --> private scripts used by the AngularJS Team to maintain this repo
  update-repo.sh         --> script for pulling down the latest version of this repo (!!! DELETES ALL CHANGES YOU HAVE MADE !!!)

karma.conf.js            --> config file for running unit tests with Karma
package.json             --> Node.js specific metadata, including development tools dependencies
package-lock.json        --> Npm specific metadata, including versions of installed development tools dependencies

Contact

For more information on AngularJS, please check out https://angularjs.org/.

angular-phonecat's Issues

Issue with index-async.html

Hello,
I tryed to use the async loader library, but I have exception if I use the dependency ngSanitize.

Try to add "lib/angular/angular-sanitize.js" as depency, and you will see this error :
angular
Any help ?

add zippy to the docs and hide git checkout instructions

End 2 End Test Errors.

Hi i was trying to use the end 2 end tests but apparently the url to the tests is wrong.
I'm using debian server and using a windows 7 with chrome to test the Karma, when i access the url "http://MY-SERVER:8000/test/e2e/runner.html" the url in the test/e2e/scenario.js is pointing to app/index.html and it causes the Karma to look for the url "http://MY-SERVER:8000/test/e2e/app/index.html" instead "http://MY-SERVER:8000/app/index.html".
The fix to this issue in my opinion is to fix the test/e2e/scenario.js in the url parameter use "/app/index.html" instead of "app/index.html"

Tutorial 10 Experiment, add button to partial at the start of step 2

Tutorial 10 Experiment step two says:

"Move the hello method from PhoneCatCtrl to PhoneListCtrl and you'll see that the button declared in index.html will stop working, while the one declared in the phone-list.html template remains operational."

There is no button in phone-list.html at this point in the experiment. I suggest having the reader add the button at the beginning of step two so step two reads:

"Add the the button snippet to the phone-list.html partial. Move the hello method from PhoneCatCtrl to PhoneListCtrl and you'll see that the button declared in index.html will stop working, while the one declared in the phone-list.html template remains operational."

That worked for me. Thanks again for these tutorials.

Unit testing services bit

Hello, I was looking at phonecat for an example of how I could unit test an angular service. But, the servicesSpec does not contain any unit test cases. Any help is appreciated.

Tutorial 9: Filters, Experiment 2 and a few plurals in filenames

Tutorial 9 experiment 2 says

    <input ng:model="userInput"> Uppercased: {{ userInput | uppercase }}

I had to add an input name to make a value show the result of the filter as I typed:

<input name="userInput" ng:model="userInput"> Uppercased: {{ userInput | uppercase }}

There are a few pluralization typos across the tutorials:

1. Tutorials 4,7, and 8 say "app/js/controller.js" but need to pluralize controller: "app/js/controllers.js"
2. Tutorial 4 says "test/unit/controllerSpec.js" but needs to pluralize controller: "test/unit/controllersSpec.js"

Thanks for the tutorials.

e2e tests failing out of the box on Windows - IE, firefox, chrome...

The e2e-test comes out with:

expect repeater '.phones li' count toBe 20
http://localhost:9877/test/test/e2e/scenarios.js:21:7
expected 20 but was 0

continues with

Selector [ng\:model="query"] did not match any elements.

and so on. When I checkout other steps, they also fail like there was nothing on the page.

Any ideas please? How can I find out what's wrong?

Thanks!

need the version into package.json

$ node --version
v0.8.8
$ npm --version
1.1.59
$ npm install
npm ERR! install Couldn't read dependencies
npm ERR! Error: no version
npm ERR!     at validVersion (/usr/local/nvm/v0.8.8/lib/node_modules/npm/node_modules/read-package-json/read-json.js:520:32)
npm ERR!     at final (/usr/local/nvm/v0.8.8/lib/node_modules/npm/node_modules/read-package-json/read-json.js:289:23)
npm ERR!     at /usr/local/nvm/v0.8.8/lib/node_modules/npm/node_modules/read-package-json/read-json.js:119:33
npm ERR!     at cb (/usr/local/nvm/v0.8.8/lib/node_modules/npm/node_modules/slide/lib/async-map.js:48:11)
npm ERR!     at /usr/local/nvm/v0.8.8/lib/node_modules/npm/node_modules/read-package-json/read-json.js:241:40
npm ERR!     at fs.readFile (fs.js:176:14)
npm ERR!     at fs.close (/usr/local/nvm/v0.8.8/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:92:5)
npm ERR!     at Object.oncomplete (fs.js:297:15)
npm ERR! If you need help, you may report this log at:
npm ERR!     <http://github.com/isaacs/npm/issues>
npm ERR! or email it to:
npm ERR!     <[email protected]>

npm ERR! System Darwin 12.5.0
npm ERR! command "/usr/local/nvm/v0.8.8/bin/node" "/usr/local/nvm/v0.8.8/bin/npm" "install"
npm ERR! cwd /Users/xxx/src/angular-phonecat
npm ERR! node -v v0.8.8
npm ERR! npm -v 1.1.59
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/xxx/src/angular-phonecat/npm-debug.log
npm ERR! not ok code 0

Step 8: app/partials/phone-details.html typo

Weigth --> Weight

web-server.js location

Isn't the scripts/web-server.js should be in the root folder of the app?
If the app run with this folder structure the app/index.html is not loading in the browser. But if the web-server.js run from the app folder everything works fine.

Step 10 is broken (no output)

Uncaught Error: [$injector:modulerr] Failed to instantiate module phonecatApp due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
http://errors.angularjs.org/1.2.0-rc.2/$injector/unpr?p0=%24routeProvider
at http://localhost:8000/app/lib/angular/angular.js:78:12
at http://localhost:8000/app/lib/angular/angular.js:2997:19
at getService (http://localhost:8000/app/lib/angular/angular.js:3119:39)
at Object.invoke (http://localhost:8000/app/lib/angular/angular.js:3140:13)
at http://localhost:8000/app/lib/angular/angular.js:3078:37
at Array.forEach (native)
at forEach (http://localhost:8000/app/lib/angular/angular.js:224:11)
at loadModules (http://localhost:8000/app/lib/angular/angular.js:3065:5)
at createInjector (http://localhost:8000/app/lib/angular/angular.js:3007:11)
at doBootstrap (http://localhost:8000/app/lib/angular/angular.js:1152:20)
http://errors.angularjs.org/1.2.0-rc.2/$injector/modulerr?p0=phonecatApp&p1…tp%3A%2F%2Flocalhost%3A8000%2Fapp%2Flib%2Fangular%2Fangular.js%3A1152%3A20)

Step 12: Animations in phone-detail Glitchy

Here are some steps you can take to fix the animation glitches on the phone detail.

First: the border-bottom on the H1 {{phone.name}} binding shows in the small space between the images as they are being slid up. This doesn't look nice 👎

Fix it by:
a) removing border-bottom from h1 in app.css

h1 {
  /*border-bottom: 1px solid gray;*/
}

or b) make the background of the phone-images block white in app.css

.phone-images {
  background-color: white; /*new */
  width: 450px;
  height: 450px;
  overflow: hidden;
  position: relative;
  float: left;
}

Second: Phone images are visible under each other and revealed as ghosts as the images scroll up/down. This more or less goes away once the user has cycled through all images.

To fix: Either make all but the first image opacity:0 on load, or make them all positioned outside of the container except for the first. ie: in app.css

img.phone {
  float: left;
  margin-right: 3em;
  margin-bottom: 2em;
  background-color: white;
  padding: 2em;
  height: 400px;
  width: 400px;
  position: absolute; /*new */
  top: 500px; /*new */
}

img.phone:first-child {
  top: 0;
}

Notice the position: absolute there.

code diff link has start and end ref the same

The code diff links (in the footer and header of the tutorial pages) do not work because the start and endpoint are the same.

e2e failed in /tutorial/step_05

in /tutorial/step_05 unit tests, $http is mocked and all the tests are refactored accordingly.
However, e2e tests are untouched, which cause e2e to failed.

tutorial/async version : changing image only works once

Using angular 1.2.11 and current angular-phonecat git, I have the following bug :
Chrome Version 33.0.1750.70 beta

In the async version only :
http://localhost:8000/app/index-async.html#/phones/motorola-xoom-with-wi-fi

Default image (first) loads OK
When clicking on each image on the right, the image on the left loads OK
If I click on any other image (already loaded once), it won't change the image on the left

In the JS console, I've got 👍

event.returnValue is deprecated. Please use the standard event.preventDefault() instead. 
jquery.min.js:14
ReferenceError: jQuery is not defined
    at Object.animateDown [as after] (http://localhost:8000/app/js/animations.js:37:5)
    at http://localhost:8000/app/lib/angular/angular-animate.js:796:33
    at Array.forEach (native)
    at forEach (http://localhost:8000/app/lib/angular/angular.js:303:11)
    at invokeRegisteredAnimationFns (http://localhost:8000/app/lib/angular/angular-animate.js:782:11)
    at onBeforeAnimationsComplete (http://localhost:8000/app/lib/angular/angular-animate.js:773:11)
    at progress (http://localhost:8000/app/lib/angular/angular-animate.js:813:13)
    at $provide.decorator.animationPhaseCompleted (http://localhost:8000/app/lib/angular/angular-animate.js:784:15)
    at Object.$animateProvider.register.beforeRemoveClass [as before] (http://localhost:8000/app/lib/angular/angular-animate.js:1464:11)
    at http://localhost:8000/app/lib/angular/angular-animate.js:796:33 angular.js:9419
ReferenceError: jQuery is not defined
    at Object.animateUp [as after] (http://localhost:8000/app/js/animations.js:16:5)
    at http://localhost:8000/app/lib/angular/angular-animate.js:796:33
    at Array.forEach (native)
    at forEach (http://localhost:8000/app/lib/angular/angular.js:303:11)
    at invokeRegisteredAnimationFns (http://localhost:8000/app/lib/angular/angular-animate.js:782:11)
    at onBeforeAnimationsComplete (http://localhost:8000/app/lib/angular/angular-animate.js:773:11)
    at progress (http://localhost:8000/app/lib/angular/angular-animate.js:813:13)
    at $provide.decorator.animationPhaseCompleted (http://localhost:8000/app/lib/angular/angular-animate.js:784:15)
    at Object.$animateProvider.register.beforeAddClass [as before] (http://localhost:8000/app/lib/angular/angular-animate.js:1436:11)
    at http://localhost:8000/app/lib/angular/angular-animate.js:796:33 

A simple Python alternative to Node.js webserver

From within the angular-phonecat folder, run:

python -m SimpleHTTPServer

index-async.html : Uncaught Error: No module: myApp

Running index-async.html throws this error:

Uncaught Error: No module: myApp index-async.html:30
(anonymous function) index-async.html:30
d index-async.html:30
(anonymous function) index-async.html:30
(anonymous function) angular.js:2699
forEach angular.js:110
loadModules angular.js:2695
createInjector angular.js:2637
bootstrap angular.js:927
(anonymous function) index-async.html:53
o index-async.html:41
e.onload.e.onerror.e.(anonymous function) index-async.html:41

Live demo steps broken (at least some): 404 for angular.js & other resources

Hi, the live demo steps after step-0 seem to be broken, at least angular.js link returns as 404.

For example, http://angular.github.io/angular-phonecat/step-1/app/index.html links to http://angular.github.io/angular-phonecat/step-1/app/lib/angular/angular.js that results as 404.

How about using PhantomJS instead of Chrome?

I develop on Windows and test on a Vagrant virtual machine. I tried installing Chrome with xvfb but ran into various issues (at least one seemingly intractable).

I suggest it would be very flexible for everyone (people with just a console available, as well as those that have a full GUI) if Karma was configured to use PhantomJS by default instead, as it is super comfortable to use in the command line, and quite trivial to install.

Tests don't work properly with current Karma version

There is a PR on the way for this issue here: angular/angular-seed#90

It would be great if this could be merged in when it is accepted as I suspect some people may not be able/bothered to solve the issue themselves and skip unit testing.

Step 7 is broken (no output)

If you update to step-7 (git checkout -f step-7) and load the index page, nothing renders. There is no redirect from index.html to index.html# and there are no errors in the browser console or in the node server console. The "live demo" behaves the same way:

http://angular.github.io/angular-phonecat/step-7/app/

This is as of 2013-10-09 11:40 PDT.

All 5 e2e tests fail as well.

License for using angular-phonecar

Hello,

We were looking to understand the license of the angular-phonecat application code. We need to understand this from viability of hosting a copy of this application for our developers to study inside the company.

Requesting a clarification on the same.

Possibly including the LICENSE file in the repository would be very helpful.

rename predicates to controls

Change predicates id to controls in index.html and css

If someone were to branch and volunteer to convert this to a 3.x Bootstrap would you guys accept the Pull Request?

I've had a couple of students (Beginners on everything) fail to understand why their work doesn't match the sample, until I go over the fact that this is an older version of bootstrap.

If you guys are interested, I will see if I can get a student or two to port this over.

Step 5 $http error

Step 12 animate cannot stop.

Line 22, 43 in animations.js, cannot work. Error info notice ' element has not stop() method.'
May change 'element.stop();' to 'jQuery(element).stop();'

Thanks

animation.css in step 12 have unsmooth fade.

Would recommend changing the z-index so the page entering doesn't overlap the other page before it even fades.

Like this:

.view-frame.ng-enter {
  -webkit-animation: 1.0s fade-in;
  -moz-animation: 1.0s fade-in;
  -o-animation: 1.0s fade-in;
  animation: 1.0s fade-in;
  z-index: 98;
}

.view-frame.ng-leave {
  -webkit-animation: 1.0s fade-out;
  -moz-animation: 1.0s fade-out;
  -o-animation: 1.0s fade-out;
  animation: 1.0s fade-out;
  z-index: 99;
}

Update to 1.0

Please update to 1.0rc3

Step 7 loops in IE 9

Opening http://angular.github.com/angular-phonecat/step-7/app in IE 9 causes a loop. The app keeps redirecting to http://angular.github.com/angular-phonecat/step-7/app/#/phones and back.

How do I create pull request for a fix in a certain step?

I want to fix something in step-4, but I'm not sure how to do it. Somehow the change must end up in step-4 and (probably) all later steps. Maybe someone could add a few lines to the readme for those who want to contribute?

HTML entities in phones.js should not be there

numerous phones in phones/*.json attempt to HTML-escape ampersands, for instance:
b271d77#L0R18

However these HTML entities are rendered literally, not turned into ampersands.

They should simply be ampersands, as this renders properly.

offset all <pre><code> blocks by 2em or so

margin-left: 2em;

Update test scripts to use Testacular

Step 4 controller data missing 'age' attrib

The controller json data in step 4 of the tutorial doesn't have 'age' attribs but the documentation claims that it should:

e.g. instead of:
{'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.'},

should have:
{'name': 'Nexus S',
'age': 1,
'snippet': 'Fast just got faster with Nexus S.'},

Note that this doesn't really cause any problems (other than confusion for the reader) since the implicit ordering in the array comes through, presumably because the null age attribs all sort the same and the implicit order ends up being expressed).

tutorial test fails - test.sh calls testacular instead of karma

Summary: When you try to run test.sh or test.bat you get an error because this line was not changed to call karma and there is no step to add an alias in the tutorial. Just breaks.
Steps to reproduce, call /scripts/test.sh
Expected result: it launches karma
Acutal result: it launches nothing and calls the wrong program

Suggested fix: please update this file - https://github.com/angular/angular-phonecat/blame/master/scripts/test.sh

Error installing karma

I am trying to run a command through command prompt.
npm install -g karma

and i am getting this error. what to do. I am stuck from last 8 hours.

verbose url resolving [ 'https://registry.npmjs.org/', './karma' ]
21 verbose url resolved https://registry.npmjs.org/karma
22 info trying registry request attempt 1 at 16:12:53
23 http GET https://registry.npmjs.org/karma
24 info retry will retry, error on last attempt: Error: tunneling socket could not be established, cause=connect ECONNREFUSED
25 info trying registry request attempt 2 at 16:13:04
26 http GET https://registry.npmjs.org/karma
27 info retry will retry, error on last attempt: Error: tunneling socket could not be established, cause=connect ECONNREFUSED
28 info trying registry request attempt 3 at 16:14:05
29 http GET https://registry.npmjs.org/karma
30 silly lockFile cd7961bb-karma karma@
31 silly lockFile cd7961bb-karma karma@
32 error Error: tunneling socket could not be established, cause=connect ECONNREFUSED
32 error at ClientRequest.onError (C:\Program Files\nodejs\node_modules\npm\node_modules\request\tunnel.js:161:17)
32 error at ClientRequest.g (events.js:175:14)
32 error at ClientRequest.EventEmitter.emit (events.js:95:17)
32 error at CleartextStream.socketErrorListener (http.js:1484:9)
32 error at CleartextStream.EventEmitter.emit (events.js:95:17)
32 error at Socket.onerror (tls.js:1355:17)
32 error at Socket.EventEmitter.emit (events.js:117:20)
32 error at net.js:426:14
32 error at process._tickCallback (node.js:415:13)
33 error If you need help, you may report this log at:
33 error http://github.com/isaacs/npm/issues
33 error or email it to:
33 error [email protected]
34 error System Windows_NT 5.1.2600
35 error command "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" "-g" "karma"
36 error cwd C:
37 error node -v v0.10.3
38 error npm -v 1.2.17
39 error code ECONNRESET
40 verbose exit [ 1, true ]

confusing "prototypically descendant" text

Tutorial step 2 says "The controller scope is a prototypically descendant of the root scope.."
I'm not sure what that means, seems like there's a word missing.

"... that was created when the application bootstrapped."
Passive voice is lifeless and without an agent it makes it harder to understand. Maybe "... that the AngularJS injector created at bootstrap".

Step 5 is broken js/controllers.js $http needs to be added as a parameter

Need to change ...

phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope) {

... to ...

phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope, $http) {

(js/controllers.js is not in sync with the code snippet in the tutorial text)

Step-5 : can't display phone list

error in app/js/controllers.js:7 $http is not defined

missing argument

function PhoneListCtrl($scope)  -> function PhoneListCtrl($scope, $http) 

Step 11 tests seem to be unrelated to the new service that was built in that step

Loved the tutorial, but ran into some confusion in the last step. In this step we created a new service, and the tutorial says:
"We have modified our unit tests to verify that our new service is issuing HTTP requests and processing them as expected."

unit/servicesSpec.js is empty, and the tests in controllersSpec.js don't make any reference to the built Phone() service. It would be most instructive if I'm missing something here, and if I'm not, it would very instructive to see tests written for the service.

Thanks for an incredible tool

Move controllers inside phonecat module

Leaving the controllers in global scope just seems like very bad practice, and likely encourages terrible code for people following the tutorial to learn Angular. It just looks really bad. Worse, the tests depend on this behavior, making the tutorial useless for trying to figure out how to write unit tests that load just the components needed for testing.

Building on this example...

I am presuming to post this here because I am building a piece of code based on this project. You may delete if you see fit.

I am endeavoring to migrate a project from backbone to angularjs involving the use of Google Maps. At this point I need to be able to switch between normal views (pages) and a Google Map View.

Here is the project: https://github.com/LarryEitel/node_angular_googlemaps_test.git

Here is a stackoverflow question as well: http://stackoverflow.com/questions/11180750/initialize-google-map-in-angularjs

I would appreciate any input.

Thank you :)

Missing JsTestDriver.jar

JsTestDriver.jar which is first used in step 2 is not included in a checkout of master.

step-2: PhoneListCtrl is not defined

with a fresh checkout of step-2 I get an error when I try to run the test: ./scripts/test.sh

 PhoneCat controllers PhoneListCtrl should create "phones" model with 3 phones FAILED
    ReferenceError: PhoneListCtrl is not defined
        at null.<anonymous> (controllersSpec.js:12:22)

step-4 and further e2e tests failed on IE9

http://angular.github.com/angular-phonecat/step-4/test/e2e/runner.html

this failed in IE9:

    should filter the phone list as user types into the search box
               expect repeater '.phones li' count toBe 1
                        expected 1 but was 3

    should be possible to control phone order via the drop down select box
               expect repeater 'Phone List ( .phones li )' column 'phone.name' toEqual ["Motorola XOOM™ with Wi-Fi","MOTOROLA XOOM™"]
                        expected ["Motorola XOOM™ with Wi-Fi","MOTOROLA XOOM™"] but was ["Nexus S","Motorola XOOM™ with Wi-Fi","MOTOROLA XOOM™"]

Step 5 broken, missing argument

needs the $http parameter.

See my fix here: GantMan/angular-phonecat@angular:step-5...step-5

I can't seem to PR a tag fix.

Step 1 - Improperly closed html

In Step1 of the exercise, all span tags are improperly closed:
<span>Nexus S<span>
instead of:
<span>Nexus S</span>

You can view this while comparing Step0.. Step1:
step-0...step-1

Tutorial step_4: Code from git is missing a unit test for controllersSpec.js

The tutorial doc shows 2 unit tests for controllersSpec.js but the code in git has only one of them. BTW, I'm really enjoying the tutorial.

one test fails on e2e tests in I/E

"should be possible to control phone order via the drop down select box"

fails because of this line
select('orderProp').option('alphabetical');
s/b
select('orderProp').option('name');

What is weird is that tests pass on FF/Chrome, maybe because it looks for value closest to 'alphabetical'

Tests are not running

In 716c09d tests are not running. The output of Karma is:

Executed 0 of 0 ERROR (0.606 secs / 0 secs)

To fix it, the following line should be included in karma.conf.js

exclude: ['app/lib/angular/angular-scenario.js'],

I'm not sure how to make a pull request to patch it, without break the step-x tags