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

Weigth --> Weight

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.

Please update to 1.0rc3

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

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)

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.

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

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

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

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.

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.

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)

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.

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 ]

From within the angular-phonecat folder, run:

python -m SimpleHTTPServer

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

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.

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

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.

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 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".

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)

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

missing argument

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

Change predicates id to controls in index.html and css

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™"]

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 ?

"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'

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.

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.

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?

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.

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!

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.

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).

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;
}

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.

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.

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.

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 :)

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"

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

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.

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.

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