angularjs-foundation / video-exercises

Exercises for the video application using AngularJS.

AngularJS Foundation - Hands On Exercises

Welcome to the hands on exercises for the Build a Strong AngularJS Foundation course.

The course was divided into three parts

1. Commentary on a specific AngularJS concept.
2. A live coding example to illustrate the concept.
3. Hands on exercises to reinforce the concept.

This is the third section of the course and it is time for us to work through the hands on exercises.

Each module has a set of exercises and a suite of failing unit tests. As you work through the exercises, the tests will start to pass. You will know that you have successfully completed the exercises when all of the tests are passing.

Checkout master from the angularjs-foundation/video-app repository to see the completed application and solutions to the exercises.

Prerequisites

• Git
• NodeJS (version v0.10.26 or greater)
• NPM (version 1.4.4 or greater)
• Make sure you have the following NPM plugins installed globally (via -g):
  • sudo npm install -g grunt
  • sudo npm install -g grunt-cli
  • sudo npm install -g karma
  • sudo npm install -g karma-cli
  • sudo npm install -g http-server

Installation

First run npm cache clear in the console (for Windows use the nodejs command prompt).

Windows

1. clone by repo: git clone https://github.com/angularjs-foundation/video-exercises.git
2. go to the directory: cd video-exercises
3. run the installation: scripts\install.cmd
4. run the server: scripts\server.cmd. **MAKE SURE that this is NOT run directly from inside of the scripts\ directory.
5. Visit the website at http://localhost:8088.

Mac / Linux

1. clone by repo: git clone https://github.com/angularjs-foundation/video-exercises.git
2. go to the directory: cd video-exercises
3. run the installation : ./scripts/install.sh
4. run the server: ./scripts/server.sh
5. Visit the website at http://localhost:8088.

Hands on Exercises

Open the Website

When the website is run there will be a series of modules to work through.

Choose a Module

Each module will have individual exercises to work through. (The hands on exercises will be installed inside of hands-on-exercises.)

Run the Tests

Each module starts with a series of failing tests.

Complete the Exercises

The goal is to work through the exercises until all the tests pass.

Success! All Tests are Passing

Issues

If you run into any problems, please file a GitHub Issue and we will address it immediately. Thanks!

video-exercises's Issues

Images for README

New YouTube API broke everything?

So after a few weeks I came back to doing the exercises and I think the app is broken because of changes in the YouTube API. The videos are no longer being shown but there's a link on the app page:

https://youtube.com/devicesupport

Will you update it?

No repo field for npm package.json

Hi,
Trying to start module 1 exercises, however I get a warning:

npm WARN package.json [email protected] No Repository field

Then trying to run grunt, it hangs on "Running "watch:assets" (watch) task
Waiting..."

New to npm and grunt, any help would be greatly apreciated.

Solutions

Are the authors solutions to hands on exercises available somewhere? I don't see them in the videos or in the repo and it would be nice to see how closely what I am doing matches up to a "canonical" solution. I am interested in not developing any bad practices as I learn.

./scripts/server.sh " Couldn't get a file descriptor referring to the console"

hi

When I run the the server.sh it got a problem with the message is "Couldn't get a file descriptor referring to the console" and I stuck at that point

[M4.1] Use `ng-include` on the related videos list to render the template for each video

(I put this in the book's errata before I thought of putting it here, so maybe you could take thie equivalent comment down from "errata")

For

there is a hint

In fact I wasted a couple of hours troubleshooting this, only to find that ng-include="/templates/video-listing.html" in fact can NOT be used here. Here is what happened:

If I add the suggested statement in the obvious way, like this

then I get

Error: [$parse:syntax] Syntax Error: Token 'templates' is an unexpected token at column 2 of the expression [/templates/video-listing.html] starting at [templates/video-listing.html].

After some trial and error, the working statement I needed was this this:

I don't understand why the first (suggested) attempt didn't work: I can only assume it's because there's a problem parsing a string in that location. Matias will no doubt be in a good position to confirm/refute this. I can see there's a problem with adding my solution as a hint as it requires a bit more background knowledge of the example code.

I feel the way I interpreted the hint was the obvious way that any reader would (but correct me if I'm wrong on this!), and the resulting intractable error message would start to make any reader lose confidence. Confidence is all-important when learning a subject like Angular which, more than most topics, requires a newcomer to keep a lot of plates spinning at the same time.

M7 ntAppAnimations module is called ntAnimations

I found this confusing. The M7.1 exercise asks the reader to "Attach the 'ntAppAnimations' module to 'ntApp'", but this doesn't work. What must be attached is 'ntAnimations', because the module and its filename differ.

Did you mean to call the module ntAnimations, the same as the file name?

M7 animations.css contains comment M3.2, M3.3 should be M7.2, M7.3

hands-on-exercises/M7/app/styles/animations.css is generated by the built script and contains M3.2, M3.3 comments that don't tie up with readme.md. Suggest changing to M7.2, M7.3
I can't find where this source file is on the repo or I'd change it and put in a pull request..

Trouble installing the prerequisites

Install fails on OSX

After cloning the repo and running ./scripts/install.sh I get the following error:

npm ERR! peerinvalid The package grunt does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants grunt@~0.4.0
npm ERR! peerinvalid Peer [email protected] wants grunt@~0.4.0
npm ERR! peerinvalid Peer [email protected] wants grunt@~0.4.0
npm ERR! peerinvalid Peer [email protected] wants [email protected]
npm ERR! peerinvalid Peer [email protected] wants grunt@~0.4.0
npm ERR! peerinvalid Peer [email protected] wants grunt@>=0.4.0
npm ERR! peerinvalid Peer [email protected] wants grunt@~0.4.0
npm ERR! peerinvalid Peer [email protected] wants grunt@^0.4.0
npm ERR! peerinvalid Peer [email protected] wants grunt@~0.4.1

npm ERR! System Darwin 13.3.0
npm ERR! command "node" "/usr/local/bin/npm" "i"
npm ERR! cwd /Users/luciano/projects/personal/video-exercises/hands-on-exercises
npm ERR! node -v v0.10.31
npm ERR! npm -v 2.0.0-beta.0
npm ERR! code EPEERINVALID
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/xyz/.../npm-debug.log
npm ERR! not ok code 0

Grunt version is:

$ npm list --depth=0 -g
/usr/local/lib
├── [email protected]
├── [email protected]
└── [email protected]

Missing tags from github

Tried to install via instructions in README.md but install script fails due to missing tags

$ git clone https://github.com/angularjs-foundation/video-exercises.git
Cloning into 'video-exercises'...
remote: Reusing existing pack: 1331, done.
remote: Total 1331 (delta 0), reused 0 (delta 0)
Receiving objects: 100% (1331/1331), 17.38 MiB | 1.53 MiB/s, done.
Resolving deltas: 100% (533/533), done.
Checking out files: 100% (799/799), done.
$ cd video-exercises/
$ git tag -l
$ ./scripts/install.sh
…
cp: ./video-exercises/in-video-exercises/M6/font-awesome/src/3.2.1/icon/xing-sign: unable to copy extended attributes to .././hands-on-exercises/M2/video-exercises/in-video-exercises/M6/font-awesome/src/3.2.1/icon/xing-sign: No such file or directory
…
+1000s more

Thanks
Richard