sf-wdi-labs / tunely-angular

[angular 1, mean, node, express, mongodb]

tunely-angular

Full CRUD single page app (SPA) with MEAN stack. A refactor of tunely with an Angular front end.

Objectives

This lab begins with just HTML and CSS on the front end and a fully built out back end. Each sprint in the project has its own objectives. As you work through the project, you'll:

• see how to set up an Express server to serve an Angular front end
• consume a JSON API using Angular's $http
• update Angular views using 2-way data binding and Angular's client-side templating
• CRUD albums and embedded songs
• build your toolbox of Angular modules, services, and directives

Prerequisites

Before starting this lab, developers should have some familiarity with...

• Express server routes for HTML and static assets
• Express server routes for JSON (/api routes), including the controller pattern (see docs/controllers_example.md)
• RESTful route design
• AJAX
• Git and GitHub, including branches

Getting Started

• fork and clone this repository
• read this document
• follow the branching instructions here

Sprints

Sprint 1

Sprint 1: set up a simple Angular app with hard-coded data

Sprint 2

Sprint 2: GET and POST album data with the Express back-end

Sprint 3

Sprint 3: UPDATE and DELETE album data with the Express back-end

Sprint 4

Sprint 4: refactor app to use ngRoute and view templates

Sprint 5

Sprint 5: add ability to CRUD songs

tunely-angular's Issues

finish sprint 5 write-up

remove `findWithAttr` and replace with `indexOf`/`splice`

Change in sprint3.md and solutions

Pass in album object instead of id for easy searching:

var index = vm.albums.indexOf(album);
vm.albums.splice(index,1)

fix sprint2.md collapsed code-blocks

controller naming doesn't follow styleguide

tunely:

<script src="scripts/controllers/AlbumsIndexController.js"></script>

styleguide: https://github.com/SF-WDI-LABS/angular_style_guide#filenames-identify-component-separated-by-

The above should be:

<script src="scripts/controllers/AlbumsIndex.controller.js"></script>

Not sure about the caps

catchall route hard to debug

Lots of confusing bugs emerge due to the catchall/wildcard/splat route serving HTML. The most common example is /wrong/path/to/some.js raising "SyntaxError: unexpected token <" in the client.

Recommendation:

• limit catchall to only known route patterns (e.g. /albums, /albums/:id, /albums/:id/songs, etc).
• but add a final catchall that responds with a status 404.

Use full `/path/to/template.html` (do not skip extension)

The shorthand

{templateUrl: '/templates/albums'}

is not as clear as the longhand

{templateUrl: '/templates/albums.html'}

and can lead to infinite-recursion problems when running alternate servers (i.e. budo).

$http.put() shorthand leads to nested `data` confusion

Saw a couple examples where students mistakenly pass a config object with a data property to the shorthand:

$http.put("/foo", { data: {name: "foo", artistName: "bar"}})

Instead of the actual data (the album):

$http.put("/foo", {name: "foo", artistName: "bar"})

(or the recommended longhand):

$http({url: "/foo", method: "put", data: {name: "foo", artistName: "bar"}} )

Spelling error readme for Sprint 5

"Rememeber"

prefix paths with "/"

Seeing problems pop up when scripts/stylesheets are loaded from a relative path, e.g. /example (/example/vendor/scripts/jQuery.js)

remove old tunely README intro, skip straight to angular section + intro

Remove docs for the original version of tunely

All of the readmes for the original tunely are still populating the docs folder. To get to the tunely-angular documentation, you ned to go one directory deeper to the angular folder.

data- attributes were removed from the styleguide; remove them from tunely

data-ng-app should be come ng-app now.