Final commit, without Bootstrap.

.gitignore

@@ -0,0 +1 @@
+/bootstrap

.idea/.name

@@ -0,0 +1 @@
+ng-codeschool

.idea/encodings.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Encoding" useUTFGuessing="true" native2AsciiForPropertiesFiles="false" />
+</project>
+

.idea/misc.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" />
+</project>
+

.idea/modules.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/ng-codeschool.iml" filepath="$PROJECT_DIR$/.idea/ng-codeschool.iml" />
+    </modules>
+  </component>
+</project>
+

.idea/ng-codeschool.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
+

.idea/scopes/scope_settings.xml

@@ -0,0 +1,5 @@
+<component name="DependencyValidationManager">
+  <state>
+    <option name="SKIP_IMPORT_STATEMENTS" value="false" />
+  </state>
+</component>

.idea/vcs.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="" />
+  </component>
+</project>
+

.idea/workspace.xml

@@ -0,0 +1,547 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="07c24921-b424-4b8d-81bc-0ab87db1d8b6" name="Default" comment="" />
+    <ignored path="ng-codeschool.iws" />
+    <ignored path=".idea/workspace.xml" />
+    <ignored path=".idea/dataSources.local.xml" />
+    <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
+    <option name="TRACKING_ENABLED" value="true" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="CreatePatchCommitExecutor">
+    <option name="PATCH_PATH" value="" />
+  </component>
+  <component name="FavoritesManager">
+    <favorites_list name="ng-codeschool" />
+  </component>
+  <component name="FileEditorManager">
+    <leaf />
+  </component>
+  <component name="FindInProjectRecents">
+    <findStrings>
+      <find>app.js</find>
+    </findStrings>
+    <dirStrings>
+      <dir>$PROJECT_DIR$/51</dir>
+    </dirStrings>
+  </component>
+  <component name="FindManager">
+    <FindUsagesManager>
+      <setting name="OPEN_NEW_TAB" value="true" />
+    </FindUsagesManager>
+  </component>
+  <component name="JsBowerSettings">
+    <exe-path>/usr/bin/bower</exe-path>
+    <config-path />
+  </component>
+  <component name="JsBuildToolGruntFileManager" detection-done="true" sorting="DEFINITION_ORDER" />
+  <component name="JsBuildToolPackageJson" detection-done="true" sorting="DEFINITION_ORDER" />
+  <component name="JsGulpfileManager">
+    <detection-done>true</detection-done>
+    <sorting>DEFINITION_ORDER</sorting>
+  </component>
+  <component name="NodeModulesDirectoryManager">
+    <handled-path value="$PROJECT_DIR$/bootstrap/node_modules" />
+  </component>
+  <component name="PhpServers">
+    <servers />
+  </component>
+  <component name="PhpWorkspaceProjectConfiguration" backward_compatibility_performed="true" />
+  <component name="ProjectFrameBounds" extendedState="6">
+    <option name="x" value="64" />
+    <option name="y" value="-3" />
+    <option name="width" value="1857" />
+    <option name="height" value="1203" />
+  </component>
+  <component name="ProjectReloadState">
+    <option name="STATE" value="0" />
+  </component>
+  <component name="ProjectView">
+    <navigator currentView="ProjectPane" proportions="" version="1">
+      <flattenPackages />
+      <showMembers />
+      <showModules />
+      <showLibraryContents />
+      <hideEmptyPackages />
+      <abbreviatePackageNames />
+      <autoscrollToSource />
+      <autoscrollFromSource ProjectPane="true" />
+      <sortByType />
+      <manualOrder />
+      <foldersAlwaysOnTop value="true" />
+    </navigator>
+    <panes>
+      <pane id="Scope" />
+      <pane id="ProjectPane">
+        <subPane>
+          <expand>
+            <path>
+              <item name="ng-codeschool" type="b2602c69:ProjectViewProjectNode" />
+              <item name="ng-codeschool1" type="2a2b976b:PhpTreeStructureProvider$1" />
+            </path>
+            <path>
+              <item name="ng-codeschool" type="b2602c69:ProjectViewProjectNode" />
+              <item name="ng-codeschool1" type="2a2b976b:PhpTreeStructureProvider$1" />
+              <item name="51" type="2a2b976b:PhpTreeStructureProvider$1" />
+            </path>
+            <path>
+              <item name="ng-codeschool" type="b2602c69:ProjectViewProjectNode" />
+              <item name="ng-codeschool1" type="2a2b976b:PhpTreeStructureProvider$1" />
+              <item name="51" type="2a2b976b:PhpTreeStructureProvider$1" />
+              <item name="images" type="2a2b976b:PhpTreeStructureProvider$1" />
+            </path>
+            <path>
+              <item name="ng-codeschool" type="b2602c69:ProjectViewProjectNode" />
+              <item name="ng-codeschool1" type="2a2b976b:PhpTreeStructureProvider$1" />
+              <item name="angular" type="2a2b976b:PhpTreeStructureProvider$1" />
+            </path>
+            <path>
+              <item name="ng-codeschool" type="b2602c69:ProjectViewProjectNode" />
+              <item name="ng-codeschool1" type="2a2b976b:PhpTreeStructureProvider$1" />
+              <item name="angular" type="2a2b976b:PhpTreeStructureProvider$1" />
+              <item name="angular.js" type="620a8d5e:NestingTreeNode" />
+            </path>
+          </expand>
+          <select />
+        </subPane>
+      </pane>
+      <pane id="Scratches" />
+    </panes>
+  </component>
+  <component name="PropertiesComponent">
+    <property name="WebServerToolWindowFactoryState" value="true" />
+    <property name="DefaultHtmlFileTemplate" value="Html5" />
+    <property name="FullScreen" value="false" />
+    <property name="options.lastSelected" value="editor" />
+    <property name="options.splitter.main.proportions" value="0.3" />
+    <property name="options.splitter.details.proportions" value="0.2" />
+    <property name="LayoutCode.rearrangeEntriesHTML" value="false" />
+    <property name="HbShouldOpenHtmlAsHb" value="" />
+  </component>
+  <component name="RecentsManager">
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$" />
+    </key>
+  </component>
+  <component name="RunDashboard">
+    <option name="ruleStates">
+      <list>
+        <RuleState>
+          <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
+        </RuleState>
+        <RuleState>
+          <option name="name" value="StatusDashboardGroupingRule" />
+        </RuleState>
+      </list>
+    </option>
+  </component>
+  <component name="RunManager">
+    <configuration default="true" type="js.build_tools.gulp" factoryName="Gulp.js">
+      <node-interpreter>project</node-interpreter>
+      <node-options />
+      <gulpfile />
+      <tasks />
+      <arguments />
+      <envs />
+    </configuration>
+    <configuration default="true" type="JavaScriptTestRunnerKarma" factoryName="Karma" config-file="">
+      <envs />
+      <method />
+    </configuration>
+    <configuration default="true" type="JavascriptDebugType" factoryName="JavaScript Debug">
+      <method />
+    </configuration>
+    <configuration default="true" type="NodeJSConfigurationType" factoryName="Node.js" working-dir="">
+      <method />
+    </configuration>
+    <configuration default="true" type="PHPUnitRunConfigurationType" factoryName="PHPUnit">
+      <TestRunner />
+      <method />
+    </configuration>
+    <configuration default="true" type="PhpBehatConfigurationType" factoryName="Behat">
+      <BehatRunner />
+      <method />
+    </configuration>
+    <configuration default="true" type="PhpLocalRunConfigurationType" factoryName="PHP Console">
+      <method />
+    </configuration>
+    <configuration default="true" type="PhpUnitRemoteRunConfigurationType" factoryName="PHPUnit on Server">
+      <method />
+    </configuration>
+    <configuration default="true" type="cucumber.js" factoryName="Cucumber.js">
+      <option name="cucumberJsArguments" value="" />
+      <option name="executablePath" />
+      <option name="filePath" />
+      <method />
+    </configuration>
+  </component>
+  <component name="ShelveChangesManager" show_recycled="false">
+    <option name="remove_strategy" value="false" />
+  </component>
+  <component name="SvnConfiguration">
+    <configuration />
+  </component>
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="07c24921-b424-4b8d-81bc-0ab87db1d8b6" name="Default" comment="" />
+      <created>1414067171689</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1414067171689</updated>
+      <workItem from="1511727551644" duration="1506000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TimeTrackingManager">
+    <option name="totallyTimeSpent" value="1506000" />
+  </component>
+  <component name="ToolWindowManager">
+    <frame x="0" y="23" width="1436" height="877" extended-state="6" />
+    <editor active="true" />
+    <layout>
+      <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="10" side_tool="false" content_ui="tabs" />
+      <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" />
+      <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
+      <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="false" weight="0.33" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
+      <window_info id="Mongo Explorer" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
+      <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
+      <window_info id="Remote Host" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
+      <window_info id="Project" active="true" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.276901" sideWeight="0.5" order="5" side_tool="false" content_ui="combo" />
+      <window_info id="Docker" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
+      <window_info id="Database" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
+      <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
+      <window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.24964131" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
+      <window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
+      <window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="true" content_ui="tabs" />
+      <window_info id="Changes" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
+      <window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="8" side_tool="false" content_ui="tabs" />
+      <window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
+      <window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="SLIDING" type="SLIDING" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
+      <window_info id="Application Servers" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="11" side_tool="false" content_ui="tabs" />
+      <window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="9" side_tool="false" content_ui="tabs" />
+      <window_info id="Command Line Tools Console" active="true" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.32983795" sideWeight="0.5" order="12" side_tool="false" content_ui="tabs" />
+      <window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="combo" />
+      <window_info id="Metrics" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
+      <window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
+    </layout>
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="1" />
+  </component>
+  <component name="Vcs.Log.UiProperties">
+    <option name="RECENTLY_FILTERED_USER_GROUPS">
+      <collection />
+    </option>
+    <option name="RECENTLY_FILTERED_BRANCH_GROUPS">
+      <collection />
+    </option>
+  </component>
+  <component name="VcsContentAnnotationSettings">
+    <option name="myLimit" value="2678400000" />
+  </component>
+  <component name="XDebuggerManager">
+    <breakpoint-manager />
+    <watches-manager />
+  </component>
+  <component name="editorHistoryManager">
+    <entry file="file://$PROJECT_DIR$/51/app.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/11/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/11/app.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="9" column="38" lean-forward="false" selection-start-line="9" selection-start-column="38" selection-end-line="9" selection-end-column="38" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/angular/angular.min.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="246" column="0" lean-forward="false" selection-start-line="246" selection-start-column="0" selection-end-line="246" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/11/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="14" column="0" lean-forward="false" selection-start-line="14" selection-start-column="0" selection-end-line="14" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/11/notes.txt">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="3" column="0" lean-forward="false" selection-start-line="3" selection-start-column="0" selection-end-line="3" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/11/app.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="11" column="0" lean-forward="false" selection-start-line="11" selection-start-column="0" selection-end-line="11" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/13/app.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="15" column="0" lean-forward="false" selection-start-line="15" selection-start-column="0" selection-end-line="15" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/13/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="18" column="0" lean-forward="false" selection-start-line="18" selection-start-column="0" selection-end-line="18" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/15/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="17" column="31" lean-forward="false" selection-start-line="17" selection-start-column="31" selection-end-line="17" selection-end-column="31" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/15/app.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="4" column="17" lean-forward="false" selection-start-line="4" selection-start-column="17" selection-end-line="4" selection-end-column="17" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/bootstrap/dist/css/bootstrap.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="4401" column="8" lean-forward="false" selection-start-line="4401" selection-start-column="1" selection-end-line="4401" selection-end-column="8" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/bootstrap/README.md">
+      <provider editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/21/app.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/bootstrap/dist/css/bootstrap.min.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="6" column="46" lean-forward="false" selection-start-line="6" selection-start-column="46" selection-end-line="6" selection-end-column="46" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/21/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="11" column="7" lean-forward="false" selection-start-line="11" selection-start-column="7" selection-end-line="11" selection-end-column="7" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/21/notes.txt">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="9" column="0" lean-forward="false" selection-start-line="9" selection-start-column="0" selection-end-line="9" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/21/app.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="27" column="25" lean-forward="false" selection-start-line="27" selection-start-column="25" selection-end-line="27" selection-end-column="25" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/26/app.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="16" column="5" lean-forward="false" selection-start-line="16" selection-start-column="5" selection-end-line="16" selection-end-column="5" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/26/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="35" column="55" lean-forward="false" selection-start-line="35" selection-start-column="55" selection-end-line="35" selection-end-column="55" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/31/app.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="12" column="6" lean-forward="false" selection-start-line="12" selection-start-column="6" selection-end-line="12" selection-end-column="6" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/31/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="51" column="46" lean-forward="false" selection-start-line="51" selection-start-column="46" selection-end-line="51" selection-end-column="46" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/31/app.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="86" column="0" lean-forward="false" selection-start-line="86" selection-start-column="0" selection-end-line="86" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/35/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="35" column="0" lean-forward="false" selection-start-line="35" selection-start-column="0" selection-end-line="35" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/35/app.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="18" column="0" lean-forward="false" selection-start-line="18" selection-start-column="0" selection-end-line="18" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/38/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="40" column="31" lean-forward="false" selection-start-line="40" selection-start-column="31" selection-end-line="40" selection-end-column="31" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/38/app.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="87" column="22" lean-forward="false" selection-start-line="87" selection-start-column="22" selection-end-line="87" selection-end-column="22" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/38/app.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="27" column="5" lean-forward="false" selection-start-line="27" selection-start-column="5" selection-end-line="27" selection-end-column="5" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/41/product-title.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="2" column="0" lean-forward="false" selection-start-line="2" selection-start-column="0" selection-end-line="2" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/41/product-specs.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="8" column="0" lean-forward="false" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/41/product-panels.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="28" column="56" lean-forward="false" selection-start-line="28" selection-start-column="56" selection-end-line="28" selection-end-column="56" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/41/app.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="40" column="29" lean-forward="false" selection-start-line="40" selection-start-column="29" selection-end-line="40" selection-end-column="29" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/41/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="23" column="0" lean-forward="false" selection-start-line="23" selection-start-column="0" selection-end-line="23" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/38/notes.txt">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="9" column="0" lean-forward="false" selection-start-line="9" selection-start-column="0" selection-end-line="9" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/35/notes.txt">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="9" column="0" lean-forward="false" selection-start-line="9" selection-start-column="0" selection-end-line="9" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/41/notes.txt">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/51/products.json">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/51/notes.txt">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="11" column="0" lean-forward="false" selection-start-line="11" selection-start-column="0" selection-end-line="11" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/51/products.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="38" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="38" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/51/app.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="10" column="6" lean-forward="false" selection-start-line="7" selection-start-column="31" selection-end-line="10" selection-end-column="6" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/51/images/gem-01.gif">
+      <provider selected="true" editor-type-id="images">
+        <state />
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/51/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="60">
+          <caret line="4" column="32" lean-forward="true" selection-start-line="4" selection-start-column="32" selection-end-line="4" selection-end-column="32" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+  </component>
+</project>

11/app.js

@@ -0,0 +1,11 @@
+/**
+ * @file
+ *
+ *
+ * User: marand
+ * Date: 23/10/14
+ * Time: 14:46
+ */
+
+var app = angular.module('store', []);
+

11/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html ng-app="store">
+<head lang="en">
+  <meta charset="UTF-8">
+  <title></title>
+  <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css" />
+</head>
+<body>
+  <script type="text/javascript" src="../angular/angular.min.js"></script>
+  <script type="text/javascript" src="app.js"></script>
+
+  <p>I am {{4 + 6 }}</p>
+</body>
+</html>

11/notes.txt

@@ -0,0 +1,3 @@
+ng-app
+  - est une directive qui a pour effet d'exécuter le module dont on lui passe le nom:
+

13/app.js

@@ -0,0 +1,15 @@
+
+(function () {
+  var app = angular.module('store', []);
+
+  app.controller('StoreController', function () {
+    this.product = gem;
+  });
+
+  var gem = {
+    name: "Dodecahedron",
+    price: 2.95,
+    description: 'Some gems have hidden qualities beyond their luster, beyond their shine... Dodeca is one of those gems.'
+  };
+
+})();

13/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html ng-app="store">
+<head lang="en">
+  <meta charset="UTF-8">
+  <title></title>
+  <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css" />
+</head>
+<body>
+  <script type="text/javascript" src="../angular/angular.min.js"></script>
+  <script type="text/javascript" src="app.js"></script>
+
+  <div ng-controller="StoreController as store">
+    <h1>{{ store.product.name }}</h1>
+    <h2>${{ store.product.price }}</h2>
+    <p>{{ store.product.description }}</p>
+  </div>
+</body>
+</html>

15/app.js

@@ -0,0 +1,24 @@
+(function () {
+  var app = angular.module('store', []);
+
+  app.controller('StoreController', function () {
+    this.products = gems;
+  });
+
+  var gems = [
+    {
+      name: "Dodecahedron",
+      price: 2.95,
+      description: "Some gems have hidden qualities beyond their luster, beyond their shine... Dodeca is one of those gems.",
+      soldOut: false,
+      canPurchase: true
+    },
+    {
+      name: 'Pentagonal gem',
+      price: 5.95,
+      description: " . . . ",
+      canPurchase: false
+    }
+  ];
+
+})();

15/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html ng-app="store">
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>AngularJS Store</title>
+  <link rel="stylesheet"
+        type="text/css"
+        href="../bootstrap/css/bootstrap.min.css"/>
+  <script type="text/javascript" src="../angular/angular.min.js"></script>
+  <script type="text/javascript" src="app.js"></script>
+</head>
+<body ng-controller="StoreController as store">
+<!-- Products Container -->
+<div class="list-group" ng-hide="store.product.soldOut">
+
+  <!-- Product container -->
+  <div class="list-group-item" ng-repeat="product in store.products">
+    <h1>{{ product.name }}</h1>
+    <h2>${{ product.price }}</h2>
+    <p>{{ product.description }}</p>
+    <button ng-show="store.product.canPurchase"> Add to cart</button>
+  </div>
+</div>
+</body>
+</html>

21/app.css

@@ -0,0 +1,86 @@
+
+body{
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+a {
+  color: #ac005f;
+}
+a:hover,
+a:focus {
+  text-decoration: underline;
+}
+
+ul{
+  padding: 0;
+}
+
+li{
+  list-style: none;
+}
+
+li.small-image{
+  width: 50px;
+}
+
+li.small-image img{
+  width: 100%;
+}
+
+img{
+  max-width: 230px;
+  max-height: 230px;
+}
+
+.img-wrap {
+  background: #f8f8f8;
+  height: 200px;
+  margin: 0 auto 20px;
+  padding: 10px;
+  width: 200px;
+}
+
+.img-thumbnail {
+  background: none;
+  border: 0;
+  height: auto;
+  max-width: 100%;
+}
+
+.img-thumbnails {
+  margin: 0 auto 10px;
+  width: 200px;
+}
+
+.img-thumbnails .thumbnail {
+  background: #f8f8f8;
+  border: 0;
+  margin-right: 25px;
+  min-height: 50px;
+}
+
+.img-thumbnails .thumbnail:last-child {
+  margin-right: 0;
+}
+
+.nav-pills {
+  margin-bottom: 30px;
+}
+
+.nav-pills > li > a:hover,
+.nav-pills > li > a:focus{
+  color: #ac005f;
+}
+
+.nav-pills > li.active > a,
+.btn-primary,
+.btn-primary:focus {
+  background: #ac005f;
+  border: 0;
+}
+
+.nav-pills > li.active > a:hover,
+.btn-primary:hover {
+  background: #ac005f;
+}

21/app.js

@@ -0,0 +1,44 @@
+(function() {
+  var app = angular.module('gemStore', []);
+
+  app.controller('StoreController', function() {
+    this.products = gems;
+  });
+
+  var gems = [{
+    name: 'Azurite',
+    description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.",
+    shine: 8,
+    price: 110.50,
+    rarity: 7,
+    color: '#CCC',
+    faces: 14,
+    images: [ ]
+  }, {
+    name: 'Bloodstone',
+    description: "Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.",
+    shine: 9,
+    price: 22.90,
+    rarity: 6,
+    color: '#EEE',
+    faces: 12,
+    images: [
+      "images/gem-01.gif",
+      "images/gem-03.gif",
+      "images/gem-04.gif"
+    ]
+  }, {
+    name: 'Zircon',
+    description: "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.",
+    shine: 70,
+    price: 1100,
+    rarity: 2,
+    color: '#000',
+    faces: 6,
+    images: [
+      "images/gem-06.gif",
+      "images/gem-07.gif",
+      "images/gem-09.gif"
+    ]
+  }];
+})();

21/index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html ng-app="gemStore">
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>AngularJS Store</title>
+  <link rel="stylesheet"
+        type="text/css"
+        href="../bootstrap/dist/css/bootstrap.min.css"/>
+  <link rel="stylesheet" type="text/css" href="app.css"/>
+  <script type="text/javascript" src="../angular/angular.min.js"></script>
+  <script type="text/javascript" src="app.js"></script>
+</head>
+
+<body ng-controller="StoreController as store">
+<!-- Products Container -->
+<div class="list-group" ng-hide="store.product.soldOut">
+
+  <!-- Product container -->
+  <div class="list-group-item" ng-repeat="product in store.products">
+    <h3>
+      {{product.name}}
+      <em class="pull-right">{{product.price | currency}}</em>
+    </h3>
+    <section ng-init="tab = 1">
+      <ul class="nav nav-pills">
+        <li ng-class="{ active:tab === 1 }"><a ng-click="tab = 1">Description</a></li>
+        <li ng-class="{ active:tab === 2 }"><a ng-click="tab = 2">Specifications</a></li>
+        <li ng-class="{ active:tab === 3 }"><a ng-click="tab = 3">Reviews</a></li>
+      </ul>
+
+      <div class="panel" ng-show="tab === 1">
+        <p>{{ product.description }}</p>
+      </div>
+
+      <div class="panel" ng-show="tab === 2">
+        <p>None yet</p>
+      </div>
+
+      <div class="panel" ng-show="tab === 3">
+        <p>None yet</p>
+      </div>
+
+    </section>
+
+    <!-- Image Gallery  -->
+    <div class="gallery" ng-show="product.images.length">
+      <img class="img img-circle img-thumbnail center-block"
+           ng-src="{{product.images[0]}}"/>
+      <ul class="clearfix">
+        <li class="small-image pull-left thumbnail"
+            ng-repeat="image in product.images"><img ng-src="{{image}}"/></li>
+      </ul>
+    </div>
+  </div>
+
+</div>
+</body>
+</html>

21/notes.txt

@@ -0,0 +1,9 @@
+filtres utiles:
+  - "date: 'MM/dd/yyyy @ h:mma'"
+  - "uppercase"
+  - "limitTo: 8"  (nombre de caractères, nombre d'éléments d'un tableau si on l'applique à ng-repeat)
+  - "orderBy: '-price'" (pour un ng-repeat)
+
+ng-class: { active:tab === 3 }
+                ^nom de la classe à positionner si la condition suivante est vérifiée
+

26/app.css

@@ -0,0 +1,86 @@
+
+body{
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+a {
+  color: #ac005f;
+}
+a:hover,
+a:focus {
+  text-decoration: underline;
+}
+
+ul{
+  padding: 0;
+}
+
+li{
+  list-style: none;
+}
+
+li.small-image{
+  width: 50px;
+}
+
+li.small-image img{
+  width: 100%;
+}
+
+img{
+  max-width: 230px;
+  max-height: 230px;
+}
+
+.img-wrap {
+  background: #f8f8f8;
+  height: 200px;
+  margin: 0 auto 20px;
+  padding: 10px;
+  width: 200px;
+}
+
+.img-thumbnail {
+  background: none;
+  border: 0;
+  height: auto;
+  max-width: 100%;
+}
+
+.img-thumbnails {
+  margin: 0 auto 10px;
+  width: 200px;
+}
+
+.img-thumbnails .thumbnail {
+  background: #f8f8f8;
+  border: 0;
+  margin-right: 25px;
+  min-height: 50px;
+}
+
+.img-thumbnails .thumbnail:last-child {
+  margin-right: 0;
+}
+
+.nav-pills {
+  margin-bottom: 30px;
+}
+
+.nav-pills > li > a:hover,
+.nav-pills > li > a:focus{
+  color: #ac005f;
+}
+
+.nav-pills > li.active > a,
+.btn-primary,
+.btn-primary:focus {
+  background: #ac005f;
+  border: 0;
+}
+
+.nav-pills > li.active > a:hover,
+.btn-primary:hover {
+  background: #ac005f;
+}

26/app.js

@@ -0,0 +1,56 @@
+(function() {
+  var app = angular.module('gemStore', []);
+
+  app.controller('StoreController', function () {
+    this.products = gems;
+  });
+
+  app.controller('PanelController', function () {
+    this.tab = 1;
+
+    this.selectTab = function (setTab) {
+      this.tab = setTab;
+    };
+
+    this.isSelected = function (checkTab) {
+      return this.tab === checkTab;
+    }
+  });
+
+  var gems = [{
+    name: 'Azurite',
+    description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.",
+    shine: 8,
+    price: 110.50,
+    rarity: 7,
+    color: '#CCC',
+    faces: 14,
+    images: [ ]
+  }, {
+    name: 'Bloodstone',
+    description: "Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.",
+    shine: 9,
+    price: 22.90,
+    rarity: 6,
+    color: '#EEE',
+    faces: 12,
+    images: [
+      "images/gem-01.gif",
+      "images/gem-03.gif",
+      "images/gem-04.gif"
+    ]
+  }, {
+    name: 'Zircon',
+    description: "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.",
+    shine: 70,
+    price: 1100,
+    rarity: 2,
+    color: '#000',
+    faces: 6,
+    images: [
+      "images/gem-06.gif",
+      "images/gem-07.gif",
+      "images/gem-09.gif"
+    ]
+  }];
+})();

26/index.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html ng-app="gemStore">
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>AngularJS Store</title>
+  <link rel="stylesheet"
+        type="text/css"
+        href="../bootstrap/dist/css/bootstrap.min.css"/>
+  <link rel="stylesheet" type="text/css" href="app.css"/>
+  <script type="text/javascript" src="../angular/angular.min.js"></script>
+  <script type="text/javascript" src="app.js"></script>
+</head>
+
+<body ng-controller="StoreController as store">
+<!-- Products Container -->
+<div class="list-group" ng-hide="store.product.soldOut">
+
+  <!-- Product container -->
+  <div class="list-group-item" ng-repeat="product in store.products">
+    <h3>
+      {{product.name}}
+      <em class="pull-right">{{product.price | currency}}</em>
+    </h3>
+    <section ng-controller="PanelController as panel">
+      <ul class="nav nav-pills">
+        <li ng-class="{ active:panel.isSelected(1) }"><a ng-click="panel.selectTab(1)">Description</a></li>
+        <li ng-class="{ active:panel.isSelected(2) }"><a ng-click="panel.selectTab(2)">Specifications</a></li>
+        <li ng-class="{ active:panel.isSelected(3) }"><a ng-click="panel.selectTab(3)">Reviews</a></li>
+      </ul>
+
+      <div class="panel" ng-show="panel.isSelected(1)">
+        <h4>Description</h4>
+        <p>{{ product.description }}</p>
+      </div>
+
+      <div class="panel" ng-show="panel.isSelected(2)">
+        <h4>Specifications</h4>
+        <p>None yet</p>
+      </div>
+
+      <div class="panel" ng-show="panel.isSelected(3)">
+        <h4>Reviews</h4>
+        <p>None yet</p>
+      </div>
+
+    </section>
+
+    <!-- Image Gallery  -->
+    <div class="gallery" ng-show="product.images.length">
+      <img class="img img-circle img-thumbnail center-block"
+           ng-src="{{product.images[0]}}"/>
+      <ul class="clearfix">
+        <li class="small-image pull-left thumbnail"
+            ng-repeat="image in product.images"><img ng-src="{{image}}"/></li>
+      </ul>
+    </div>
+  </div>
+
+</div>
+</body>
+</html>

26/notes.txt

@@ -0,0 +1,9 @@
+filtres utiles:
+  - "date: 'MM/dd/yyyy @ h:mma'"
+  - "uppercase"
+  - "limitTo: 8"  (nombre de caractères, nombre d'éléments d'un tableau si on l'applique à ng-repeat)
+  - "orderBy: '-price'" (pour un ng-repeat)
+
+ng-class: { active:tab === 3 }
+                ^nom de la classe à positionner si la condition suivante est vérifiée
+

31/app.css

@@ -0,0 +1,86 @@
+
+body{
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+a {
+  color: #ac005f;
+}
+a:hover,
+a:focus {
+  text-decoration: underline;
+}
+
+ul{
+  padding: 0;
+}
+
+li{
+  list-style: none;
+}
+
+li.small-image{
+  width: 50px;
+}
+
+li.small-image img{
+  width: 100%;
+}
+
+img{
+  max-width: 230px;
+  max-height: 230px;
+}
+
+.img-wrap {
+  background: #f8f8f8;
+  height: 200px;
+  margin: 0 auto 20px;
+  padding: 10px;
+  width: 200px;
+}
+
+.img-thumbnail {
+  background: none;
+  border: 0;
+  height: auto;
+  max-width: 100%;
+}
+
+.img-thumbnails {
+  margin: 0 auto 10px;
+  width: 200px;
+}
+
+.img-thumbnails .thumbnail {
+  background: #f8f8f8;
+  border: 0;
+  margin-right: 25px;
+  min-height: 50px;
+}
+
+.img-thumbnails .thumbnail:last-child {
+  margin-right: 0;
+}
+
+.nav-pills {
+  margin-bottom: 30px;
+}
+
+.nav-pills > li > a:hover,
+.nav-pills > li > a:focus{
+  color: #ac005f;
+}
+
+.nav-pills > li.active > a,
+.btn-primary,
+.btn-primary:focus {
+  background: #ac005f;
+  border: 0;
+}
+
+.nav-pills > li.active > a:hover,
+.btn-primary:hover {
+  background: #ac005f;
+}

31/app.js

@@ -0,0 +1,56 @@
+(function() {
+  var app = angular.module('gemStore', []);
+
+  app.controller('StoreController', function () {
+    this.products = gems;
+  });
+
+  app.controller('PanelController', function () {
+    this.tab = 1;
+
+    this.selectTab = function (setTab) {
+      this.tab = setTab;
+    };
+
+    this.isSelected = function (checkTab) {
+      return this.tab === checkTab;
+    }
+  });
+
+  var gems = [{
+    name: 'Azurite',
+    description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.",
+    shine: 8,
+    price: 110.50,
+    rarity: 7,
+    color: '#CCC',
+    faces: 14,
+    images: [ ]
+  }, {
+    name: 'Bloodstone',
+    description: "Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.",
+    shine: 9,
+    price: 22.90,
+    rarity: 6,
+    color: '#EEE',
+    faces: 12,
+    images: [
+      "images/gem-01.gif",
+      "images/gem-03.gif",
+      "images/gem-04.gif"
+    ]
+  }, {
+    name: 'Zircon',
+    description: "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.",
+    shine: 70,
+    price: 1100,
+    rarity: 2,
+    color: '#000',
+    faces: 6,
+    images: [
+      "images/gem-06.gif",
+      "images/gem-07.gif",
+      "images/gem-09.gif"
+    ]
+  }];
+})();

31/index.html

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html ng-app="gemStore">
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>AngularJS Store</title>
+  <link rel="stylesheet"
+        type="text/css"
+        href="../bootstrap/dist/css/bootstrap.min.css"/>
+  <link rel="stylesheet" type="text/css" href="app.css"/>
+  <script type="text/javascript" src="../angular/angular.min.js"></script>
+  <script type="text/javascript" src="app.js"></script>
+</head>
+
+<body ng-controller="StoreController as store">
+<!-- Products Container -->
+<div class="list-group" ng-hide="store.product.soldOut">
+
+  <!-- Product container -->
+  <div class="list-group-item" ng-repeat="product in store.products">
+    <h3>
+      {{product.name}}
+      <em class="pull-right">{{product.price | currency}}</em>
+    </h3>
+    <section ng-controller="PanelController as panel">
+      <ul class="nav nav-pills">
+        <li ng-class="{ active:panel.isSelected(1) }"><a ng-click="panel.selectTab(1)">Description</a></li>
+        <li ng-class="{ active:panel.isSelected(2) }"><a ng-click="panel.selectTab(2)">Specifications</a></li>
+        <li ng-class="{ active:panel.isSelected(3) }"><a ng-click="panel.selectTab(3)">Reviews</a></li>
+      </ul>
+
+      <div class="panel" ng-show="panel.isSelected(1)">
+        <h4>Description</h4>
+        <p>{{ product.description }}</p>
+      </div>
+
+      <div class="panel" ng-show="panel.isSelected(2)">
+        <h4>Specifications</h4>
+        <p>None yet</p>
+      </div>
+
+      <div class="panel" ng-show="panel.isSelected(3)">
+        <h4>Reviews</h4>
+        <blockquote ng-repeat="review in product.reviews">
+          <b>Stars: {{ review.stars }}</b>
+          {{ review.body }}
+          <cite>by: {{ review.author }}</cite>
+        </blockquote>
+
+        <form name="reviewForm">
+          <b>Stars: {{ review.stars }}</b>
+          {{ review.body }}
+          <cite>by: {{ review.author }}</cite>
+          <select ng-model="review.stars">
+            <option value="1">1 star</option>
+            <option value="2">2 stars</option>
+            <option value="3">3 stars</option>
+            <option value="4">4 stars</option>
+            <option value="5">5 stars</option>
+          </select>
+          <textarea ng-model="review.body"></textarea>
+          <label>by:</label>
+          <input type="email" ng-mode="review.author" />
+          <input type="submit" value="Submit" />
+        </form>
+      </div>
+
+    </section>
+
+    <!-- Image Gallery  -->
+    <div class="gallery" ng-show="product.images.length">
+      <img class="img img-circle img-thumbnail center-block"
+           ng-src="{{product.images[0]}}"/>
+      <ul class="clearfix">
+        <li class="small-image pull-left thumbnail"
+            ng-repeat="image in product.images"><img ng-src="{{image}}"/></li>
+      </ul>
+    </div>
+  </div>
+
+</div>
+</body>
+</html>

31/notes.txt

@@ -0,0 +1,9 @@
+filtres utiles:
+  - "date: 'MM/dd/yyyy @ h:mma'"
+  - "uppercase"
+  - "limitTo: 8"  (nombre de caractères, nombre d'éléments d'un tableau si on l'applique à ng-repeat)
+  - "orderBy: '-price'" (pour un ng-repeat)
+
+ng-class: { active:tab === 3 }
+                ^nom de la classe à positionner si la condition suivante est vérifiée
+

35/app.css

@@ -0,0 +1,86 @@
+
+body{
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+a {
+  color: #ac005f;
+}
+a:hover,
+a:focus {
+  text-decoration: underline;
+}
+
+ul{
+  padding: 0;
+}
+
+li{
+  list-style: none;
+}
+
+li.small-image{
+  width: 50px;
+}
+
+li.small-image img{
+  width: 100%;
+}
+
+img{
+  max-width: 230px;
+  max-height: 230px;
+}
+
+.img-wrap {
+  background: #f8f8f8;
+  height: 200px;
+  margin: 0 auto 20px;
+  padding: 10px;
+  width: 200px;
+}
+
+.img-thumbnail {
+  background: none;
+  border: 0;
+  height: auto;
+  max-width: 100%;
+}
+
+.img-thumbnails {
+  margin: 0 auto 10px;
+  width: 200px;
+}
+
+.img-thumbnails .thumbnail {
+  background: #f8f8f8;
+  border: 0;
+  margin-right: 25px;
+  min-height: 50px;
+}
+
+.img-thumbnails .thumbnail:last-child {
+  margin-right: 0;
+}
+
+.nav-pills {
+  margin-bottom: 30px;
+}
+
+.nav-pills > li > a:hover,
+.nav-pills > li > a:focus{
+  color: #ac005f;
+}
+
+.nav-pills > li.active > a,
+.btn-primary,
+.btn-primary:focus {
+  background: #ac005f;
+  border: 0;
+}
+
+.nav-pills > li.active > a:hover,
+.btn-primary:hover {
+  background: #ac005f;
+}

35/app.js

@@ -0,0 +1,68 @@
+(function() {
+  var app = angular.module('gemStore', []);
+
+  app.controller('StoreController', function () {
+    this.products = gems;
+  });
+
+  app.controller('PanelController', function () {
+    this.tab = 1;
+
+    this.selectTab = function (setTab) {
+      this.tab = setTab;
+    };
+
+    this.isSelected = function (checkTab) {
+      return this.tab === checkTab;
+    }
+  });
+
+  app.controller('ReviewController', function () {
+    this.review = {};
+
+    this.addReview = function(product) {
+      product.reviews.push(this.review);
+      this.review = {};
+    };
+  });
+
+  var gems = [{
+    name: 'Azurite',
+    description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.",
+    shine: 8,
+    price: 110.50,
+    rarity: 7,
+    color: '#CCC',
+    faces: 14,
+    images: [ ],
+    reviews: []
+  }, {
+    name: 'Bloodstone',
+    description: "Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.",
+    shine: 9,
+    price: 22.90,
+    rarity: 6,
+    color: '#EEE',
+    faces: 12,
+    images: [
+      "images/gem-01.gif",
+      "images/gem-03.gif",
+      "images/gem-04.gif"
+    ],
+    reviews: []
+  }, {
+    name: 'Zircon',
+    description: "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.",
+    shine: 70,
+    price: 1100,
+    rarity: 2,
+    color: '#000',
+    faces: 6,
+    images: [
+      "images/gem-06.gif",
+      "images/gem-07.gif",
+      "images/gem-09.gif"
+    ],
+    reviews: []
+  }];
+})();

35/index.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html ng-app="gemStore">
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>AngularJS Store</title>
+  <link rel="stylesheet"
+        type="text/css"
+        href="../bootstrap/dist/css/bootstrap.min.css"/>
+  <link rel="stylesheet" type="text/css" href="app.css"/>
+  <script type="text/javascript" src="../angular/angular.min.js"></script>
+  <script type="text/javascript" src="app.js"></script>
+</head>
+
+<body ng-controller="StoreController as store">
+<!-- Products Container -->
+<div class="list-group" ng-hide="store.product.soldOut">
+
+  <!-- Product container -->
+  <div class="list-group-item" ng-repeat="product in store.products">
+    <h3>
+      {{product.name}}
+      <em class="pull-right">{{product.price | currency}}</em>
+    </h3>
+    <section ng-controller="PanelController as panel">
+      <ul class="nav nav-pills">
+        <li ng-class="{ active:panel.isSelected(1) }">
+          <a ng-click="panel.selectTab(1)">Description</a></li>
+        <li ng-class="{ active:panel.isSelected(2) }">
+          <a ng-click="panel.selectTab(2)">Specifications</a></li>
+        <li ng-class="{ active:panel.isSelected(3) }">
+          <a ng-click="panel.selectTab(3)">Reviews</a></li>
+      </ul>
+
+      <div class="panel" ng-show="panel.isSelected(1)">
+        <h4>Description</h4>
+
+        <p>{{ product.description }}</p>
+      </div>
+
+      <div class="panel" ng-show="panel.isSelected(2)">
+        <h4>Specifications</h4>
+
+        <p>None yet</p>
+      </div>
+
+      <div class="panel" ng-show="panel.isSelected(3)">
+        <h4>Reviews</h4>
+        <blockquote ng-repeat="review in product.reviews">
+          <b>Stars: {{ review.stars }}</b>
+          {{ review.body }}
+          <cite>by: {{ review.author }}</cite>
+        </blockquote>
+
+        <form name="reviewForm"
+              ng-controller="ReviewController as reviewCtrl"
+              ng-submit="reviewCtrl.addReview(product)">
+          <b>Stars: {{ reviewCtrl.review.stars }}</b>
+          {{ reviewCtrl.review.body }}
+          <cite>by: {{ reviewCtrl.review.author }}</cite>
+          <select ng-model="reviewCtrl.review.stars">
+            <option value="1">1 star</option>
+            <option value="2">2 stars</option>
+            <option value="3">3 stars</option>
+            <option value="4">4 stars</option>
+            <option value="5">5 stars</option>
+          </select>
+          <textarea ng-model="reviewCtrl.review.body"></textarea>
+          <label>by:</label>
+          <input type="email" ng-mode="reviewCtrl.review.author"/>
+          <input type="submit" value="Submit"/>
+        </form>
+      </div>
+
+    </section>
+
+    <!-- Image Gallery  -->
+    <div class="gallery" ng-show="product.images.length">
+      <img class="img img-circle img-thumbnail center-block"
+           ng-src="{{product.images[0]}}"/>
+      <ul class="clearfix">
+        <li class="small-image pull-left thumbnail"
+            ng-repeat="image in product.images"><img ng-src="{{image}}"/></li>
+      </ul>
+    </div>
+  </div>
+
+</div>
+</body>
+</html>

35/notes.txt

@@ -0,0 +1,9 @@
+filtres utiles:
+  - "date: 'MM/dd/yyyy @ h:mma'"
+  - "uppercase"
+  - "limitTo: 8"  (nombre de caractères, nombre d'éléments d'un tableau si on l'applique à ng-repeat)
+  - "orderBy: '-price'" (pour un ng-repeat)
+
+ng-class: { active:tab === 3 }
+                ^nom de la classe à positionner si la condition suivante est vérifiée
+

38/app.css

@@ -0,0 +1,94 @@
+
+body{
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+a {
+  color: #ac005f;
+}
+a:hover,
+a:focus {
+  text-decoration: underline;
+}
+
+ul{
+  padding: 0;
+}
+
+li{
+  list-style: none;
+}
+
+li.small-image{
+  width: 50px;
+}
+
+li.small-image img{
+  width: 100%;
+}
+
+img{
+  max-width: 230px;
+  max-height: 230px;
+}
+
+.img-wrap {
+  background: #f8f8f8;
+  height: 200px;
+  margin: 0 auto 20px;
+  padding: 10px;
+  width: 200px;
+}
+
+.img-thumbnail {
+  background: none;
+  border: 0;
+  height: auto;
+  max-width: 100%;
+}
+
+.img-thumbnails {
+  margin: 0 auto 10px;
+  width: 200px;
+}
+
+.img-thumbnails .thumbnail {
+  background: #f8f8f8;
+  border: 0;
+  margin-right: 25px;
+  min-height: 50px;
+}
+
+.img-thumbnails .thumbnail:last-child {
+  margin-right: 0;
+}
+
+.nav-pills {
+  margin-bottom: 30px;
+}
+
+.nav-pills > li > a:hover,
+.nav-pills > li > a:focus{
+  color: #ac005f;
+}
+
+.nav-pills > li.active > a,
+.btn-primary,
+.btn-primary:focus {
+  background: #ac005f;
+  border: 0;
+}
+
+.nav-pills > li.active > a:hover,
+.btn-primary:hover {
+  background: #ac005f;
+}
+
+.ng-invalid.ng-dirty {
+  border-color: #FA787E;
+}
+
+.ng-valid.ng-dirty {
+  border-color: #78FA89;
+}

38/app.js

@@ -0,0 +1,69 @@
+(function() {
+  var app = angular.module('gemStore', []);
+
+  app.controller('StoreController', function () {
+    this.products = gems;
+  });
+
+  app.controller('PanelController', function () {
+    this.tab = 1;
+
+    this.selectTab = function (setTab) {
+      this.tab = setTab;
+    };
+
+    this.isSelected = function (checkTab) {
+      return this.tab === checkTab;
+    }
+  });
+
+  app.controller('ReviewController', function () {
+    this.review = {};
+
+    this.addReview = function(product) {
+      this.review.createdOn = Date.now();
+      product.reviews.push(this.review);
+      this.review = {};
+    };
+  });
+
+  var gems = [{
+    name: 'Azurite',
+    description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.",
+    shine: 8,
+    price: 110.50,
+    rarity: 7,
+    color: '#CCC',
+    faces: 14,
+    images: [ ],
+    reviews: []
+  }, {
+    name: 'Bloodstone',
+    description: "Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.",
+    shine: 9,
+    price: 22.90,
+    rarity: 6,
+    color: '#EEE',
+    faces: 12,
+    images: [
+      "images/gem-01.gif",
+      "images/gem-03.gif",
+      "images/gem-04.gif"
+    ],
+    reviews: []
+  }, {
+    name: 'Zircon',
+    description: "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.",
+    shine: 70,
+    price: 1100,
+    rarity: 2,
+    color: '#000',
+    faces: 6,
+    images: [
+      "images/gem-06.gif",
+      "images/gem-07.gif",
+      "images/gem-09.gif"
+    ],
+    reviews: []
+  }];
+})();

38/index.html

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html ng-app="gemStore">
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>AngularJS Store</title>
+  <link rel="stylesheet"
+        type="text/css"
+        href="../bootstrap/dist/css/bootstrap.min.css"/>
+  <link rel="stylesheet" type="text/css" href="app.css"/>
+  <script type="text/javascript" src="../angular/angular.min.js"></script>
+  <script type="text/javascript" src="app.js"></script>
+</head>
+
+<body ng-controller="StoreController as store">
+<!-- Products Container -->
+<div class="list-group" ng-hide="store.product.soldOut">
+
+  <!-- Product container -->
+  <div class="list-group-item" ng-repeat="product in store.products">
+    <h3>
+      {{product.name}}
+      <em class="pull-right">{{product.price | currency}}</em>
+    </h3>
+    <section ng-controller="PanelController as panel">
+      <ul class="nav nav-pills">
+        <li ng-class="{ active:panel.isSelected(1) }">
+          <a ng-click="panel.selectTab(1)">Description</a></li>
+        <li ng-class="{ active:panel.isSelected(2) }">
+          <a ng-click="panel.selectTab(2)">Specifications</a></li>
+        <li ng-class="{ active:panel.isSelected(3) }">
+          <a ng-click="panel.selectTab(3)">Reviews</a></li>
+      </ul>
+
+      <div class="panel" ng-show="panel.isSelected(1)">
+        <h4>Description</h4>
+
+        <p>{{ product.description }}</p>
+      </div>
+
+      <div class="panel" ng-show="panel.isSelected(2)">
+        <h4>Specifications</h4>
+
+        <p>None yet</p>
+      </div>
+
+      <div class="panel" ng-show="panel.isSelected(3)">
+        <h4>Reviews</h4>
+        <blockquote ng-repeat="review in product.reviews">
+          <b>Stars: {{ review.stars }}</b>
+          {{ review.body }}
+          <cite>by: {{ review.author }} on {{ review.createdOn | date }}</cite>
+        </blockquote>
+
+        <form name="reviewForm" novalidate
+              ng-controller="ReviewController as reviewCtrl"
+              ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)">
+          <blockquote>
+              <b>Stars: {{ reviewCtrl.review.stars }}</b>
+            {{ reviewCtrl.review.body }}
+            <cite>by: {{ reviewCtrl.review.author }}</cite>
+          </blockquote>
+          <h4>Submit a Review</h4>
+          <fieldset class="form-group">
+            <select class="form-control" ng-model="reviewCtrl.review.stars" required>
+              <option value disabled selected class>Rate the product</option>
+              <option value="1">1 star</option>
+              <option value="2">2 stars</option>
+              <option value="3">3 stars</option>
+              <option value="4">4 stars</option>
+              <option value="5">5 stars</option>
+            </select>
+          </fieldset>
+
+          <fieldset class="form-group">
+            <textarea class="form-control" ng-model="reviewCtrl.review.body" required placeholder="Write a short review of the product"></textarea>
+          </fieldset>
+
+          <fieldset class="form-group">
+            <label>by:</label>
+            <input type="email" class="form-control" ng-model="reviewCtrl.review.author" required placeholder="john.doe@example.com" />
+          </fieldset>
+
+          <div>reviewForm is {{ reviewForm.$valid }}</div>
+          <input type="submit" value="Submit"/>
+        </form>
+      </div>
+
+    </section>
+
+    <!-- Image Gallery  -->
+    <div class="gallery" ng-show="product.images.length">
+      <img class="img img-circle img-thumbnail center-block"
+           ng-src="{{product.images[0]}}"/>
+      <ul class="clearfix">
+        <li class="small-image pull-left thumbnail"
+            ng-repeat="image in product.images"><img ng-src="{{image}}"/></li>
+      </ul>
+    </div>
+  </div>
+
+</div>
+</body>
+</html>

38/notes.txt

@@ -0,0 +1,9 @@
+filtres utiles:
+  - "date: 'MM/dd/yyyy @ h:mma'"
+  - "uppercase"
+  - "limitTo: 8"  (nombre de caractères, nombre d'éléments d'un tableau si on l'applique à ng-repeat)
+  - "orderBy: '-price'" (pour un ng-repeat)
+
+ng-class: { active:tab === 3 }
+                ^nom de la classe à positionner si la condition suivante est vérifiée
+

41/app.css

@@ -0,0 +1,94 @@
+
+body{
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+a {
+  color: #ac005f;
+}
+a:hover,
+a:focus {
+  text-decoration: underline;
+}
+
+ul{
+  padding: 0;
+}
+
+li{
+  list-style: none;
+}
+
+li.small-image{
+  width: 50px;
+}
+
+li.small-image img{
+  width: 100%;
+}
+
+img{
+  max-width: 230px;
+  max-height: 230px;
+}
+
+.img-wrap {
+  background: #f8f8f8;
+  height: 200px;
+  margin: 0 auto 20px;
+  padding: 10px;
+  width: 200px;
+}
+
+.img-thumbnail {
+  background: none;
+  border: 0;
+  height: auto;
+  max-width: 100%;
+}
+
+.img-thumbnails {
+  margin: 0 auto 10px;
+  width: 200px;
+}
+
+.img-thumbnails .thumbnail {
+  background: #f8f8f8;
+  border: 0;
+  margin-right: 25px;
+  min-height: 50px;
+}
+
+.img-thumbnails .thumbnail:last-child {
+  margin-right: 0;
+}
+
+.nav-pills {
+  margin-bottom: 30px;
+}
+
+.nav-pills > li > a:hover,
+.nav-pills > li > a:focus{
+  color: #ac005f;
+}
+
+.nav-pills > li.active > a,
+.btn-primary,
+.btn-primary:focus {
+  background: #ac005f;
+  border: 0;
+}
+
+.nav-pills > li.active > a:hover,
+.btn-primary:hover {
+  background: #ac005f;
+}
+
+.ng-invalid.ng-dirty {
+  border-color: #FA787E;
+}
+
+.ng-valid.ng-dirty {
+  border-color: #78FA89;
+}

41/app.js

@@ -0,0 +1,126 @@
+(function() {
+  var app = angular.module('gemStore', []);
+
+  app.controller('StoreController', function () {
+    this.products = gems;
+  });
+
+  app.controller('ReviewController', function () {
+    this.review = {};
+
+    this.addReview = function(product) {
+      this.review.createdOn = Date.now();
+      product.reviews.push(this.review);
+      this.review = {};
+    };
+  });
+
+  app.directive('productTitle', function () {
+    return {
+      restrict: 'A',
+      templateUrl: 'product-title.html'
+    };
+  });
+
+  app.directive('productSpecs', function () {
+    return {
+      restrict: 'A',
+      templateUrl: 'product-specs.html'
+    }
+  });
+
+  app.directive('productPanels', function () {
+     return {
+       restrict: 'E',
+       templateUrl: 'product-panels.html',
+
+       controller: function () {
+         this.tab = 1;
+
+         this.selectTab = function (setTab) {
+           this.tab = setTab;
+         };
+
+         this.isSelected = function (checkTab) {
+           return this.tab === checkTab;
+         }
+       },
+       controllerAs: 'panels'
+     }
+  });
+
+  var gems = [
+    {
+      name: 'Azurite',
+      description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.",
+      shine: 8,
+      price: 110.50,
+      rarity: 7,
+      color: '#CCC',
+      faces: 14,
+      images: [
+        "images/gem-02.gif",
+        "images/gem-05.gif",
+        "images/gem-09.gif"
+      ],
+      reviews: [{
+        stars: 5,
+        body: "I love this gem!",
+        author: "joe@example.org"
+      }, {
+        stars: 1,
+        body: "This gem sucks.",
+        author: "tim@example.org"
+      }]
+    }, {
+      name: 'Bloodstone',
+      description: "Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.",
+      shine: 9,
+      price: 22.90,
+      rarity: 6,
+      color: '#EEE',
+      faces: 12,
+      images: [
+        "images/gem-01.gif",
+        "images/gem-03.gif",
+        "images/gem-04.gif"
+      ],
+      reviews: [{
+        stars: 3,
+        body: "I think this gem was just OK, could honestly use more shine, IMO.",
+        author: "JimmyDean@example.org"
+      }, {
+        stars: 4,
+        body: "Any gem with 12 faces is for me!",
+        author: "gemsRock@example.org"
+      }]
+    }, {
+      name: 'Zircon',
+      description: "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.",
+      shine: 70,
+      price: 1100,
+      rarity: 2,
+      color: '#000',
+      faces: 6,
+      images: [
+        "images/gem-06.gif",
+        "images/gem-07.gif",
+        "images/gem-08.gif"
+      ],
+      reviews: [{
+        stars: 1,
+        body: "This gem is WAY too expensive for its rarity value.",
+        author: "turtleguyy@example.org"
+      }, {
+        stars: 1,
+        body: "BBW: High Shine != High Quality.",
+        author: "LouisW407@example.org"
+      }, {
+        stars: 1,
+        body: "Don't waste your rubles!",
+        author: "nat@example.org"
+      }]
+    }
+  ];
+
+})();

41/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html ng-app="gemStore">
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>AngularJS Store</title>
+  <link rel="stylesheet"
+        type="text/css"
+        href="../bootstrap/dist/css/bootstrap.min.css"/>
+  <link rel="stylesheet" type="text/css" href="app.css"/>
+  <script type="text/javascript" src="../angular/angular.min.js"></script>
+  <script type="text/javascript" src="app.js"></script>
+</head>
+
+<body ng-controller="StoreController as store">
+<!-- Products Container -->
+<div class="list-group" ng-hide="store.product.soldOut">
+
+  <!-- Product container -->
+  <div class="list-group-item" ng-repeat="product in store.products">
+    <h3 product-title></h3>
+    <product-panels></product-panels>
+
+    <!-- Image Gallery  -->
+    <div class="gallery" ng-show="product.images.length">
+      <img class="img img-circle img-thumbnail center-block"
+           ng-src="{{product.images[0]}}"/>
+      <ul class="clearfix">
+        <li class="small-image pull-left thumbnail"
+            ng-repeat="image in product.images"><img ng-src="{{image}}"/></li>
+      </ul>
+    </div>
+  </div>
+
+</div>
+</body>
+</html>

41/product-panels.html

@@ -0,0 +1,70 @@
+<section>
+  <ul class="nav nav-pills">
+    <li ng-class="{ active:panels.isSelected(1) }">
+      <a ng-click="panels.selectTab(1)">Description</a></li>
+    <li ng-class="{ active:panels.isSelected(2) }">
+      <a ng-click="panels.selectTab(2)">Specifications</a></li>
+    <li ng-class="{ active:panels.isSelected(3) }">
+      <a ng-click="panels.selectTab(3)">Reviews</a></li>
+  </ul>
+
+  <div class="panel" ng-show="panels.isSelected(1)">
+    <h4>Description</h4>
+
+    <p>{{ product.description }}</p>
+  </div>
+
+  <div class="panel" ng-show="panels.isSelected(2)" product-specs></div>
+
+  <div class="panel" ng-show="panels.isSelected(3)">
+    <h4>Reviews</h4>
+    <blockquote ng-repeat="review in product.reviews">
+      <b>Stars: {{ review.stars }}</b>
+      {{ review.body }}
+      <cite>by: {{ review.author }} on {{ review.createdOn | date }}</cite>
+    </blockquote>
+
+    <form name="reviewForm" novalidate
+          ng-controller="ReviewController as reviewCtrl"
+          ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)">
+      <blockquote>
+        <b>Stars: {{ reviewCtrl.review.stars }}</b>
+        {{ reviewCtrl.review.body }}
+        <cite>by: {{ reviewCtrl.review.author }}</cite>
+      </blockquote>
+      <h4>Submit a Review</h4>
+      <fieldset class="form-group">
+        <select class="form-control"
+                ng-model="reviewCtrl.review.stars"
+                required>
+          <option value disabled selected class>Rate the product</option>
+          <option value="1">1 star</option>
+          <option value="2">2 stars</option>
+          <option value="3">3 stars</option>
+          <option value="4">4 stars</option>
+          <option value="5">5 stars</option>
+        </select>
+      </fieldset>
+
+      <fieldset class="form-group">
+        <textarea class="form-control"
+                  ng-model="reviewCtrl.review.body"
+                  required
+                  placeholder="Write a short review of the product"></textarea>
+      </fieldset>
+
+      <fieldset class="form-group">
+        <label>by:</label>
+        <input type="email"
+               class="form-control"
+               ng-model="reviewCtrl.review.author"
+               required
+               placeholder="john.doe@example.com"/>
+      </fieldset>
+
+      <div>reviewForm is {{ reviewForm.$valid }}</div>
+      <input type="submit" value="Submit"/>
+    </form>
+  </div>
+
+</section>

41/product-specs.html

@@ -0,0 +1,8 @@
+<h4>Specifications</h4>
+
+<ul>
+  <li><strong>Faces</strong> : {{ product.faces }}</li>
+  <li><strong>Rarity</strong> : {{ product.rarity }}</li>
+  <li><strong>Shine</strong> : {{ product.shine }}</li>
+
+</ul>

41/product-title.html

@@ -0,0 +1,2 @@
+{{ product.name }}
+<em class="pull-right">{{product.price | currency }}</em>

51/app.css

@@ -0,0 +1,94 @@
+
+body{
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+a {
+  color: #ac005f;
+}
+a:hover,
+a:focus {
+  text-decoration: underline;
+}
+
+ul{
+  padding: 0;
+}
+
+li{
+  list-style: none;
+}
+
+li.small-image{
+  width: 50px;
+}
+
+li.small-image img{
+  width: 100%;
+}
+
+img{
+  max-width: 230px;
+  max-height: 230px;
+}
+
+.img-wrap {
+  background: #f8f8f8;
+  height: 200px;
+  margin: 0 auto 20px;
+  padding: 10px;
+  width: 200px;
+}
+
+.img-thumbnail {
+  background: none;
+  border: 0;
+  height: auto;
+  max-width: 100%;
+}
+
+.img-thumbnails {
+  margin: 0 auto 10px;
+  width: 200px;
+}
+
+.img-thumbnails .thumbnail {
+  background: #f8f8f8;
+  border: 0;
+  margin-right: 25px;
+  min-height: 50px;
+}
+
+.img-thumbnails .thumbnail:last-child {
+  margin-right: 0;
+}
+
+.nav-pills {
+  margin-bottom: 30px;
+}
+
+.nav-pills > li > a:hover,
+.nav-pills > li > a:focus{
+  color: #ac005f;
+}
+
+.nav-pills > li.active > a,
+.btn-primary,
+.btn-primary:focus {
+  background: #ac005f;
+  border: 0;
+}
+
+.nav-pills > li.active > a:hover,
+.btn-primary:hover {
+  background: #ac005f;
+}
+
+.ng-invalid.ng-dirty {
+  border-color: #FA787E;
+}
+
+.ng-valid.ng-dirty {
+  border-color: #78FA89;
+}

51/app.js

@@ -0,0 +1,22 @@
+(function () {
+  var app = angular.module('store', ['store-products']);
+
+  app.controller('StoreController', [ '$http', function ($http) {
+    var store = this;
+
+    store.products = [];
+    $http.get('products.json').success(function(data) {
+      store.products = data;
+    });
+  }]);
+
+  app.controller('ReviewController', function () {
+    this.review = {};
+
+    this.addReview = function (product) {
+      this.review.createdOn = Date.now();
+      product.reviews.push(this.review);
+      this.review = {};
+    };
+  });
+})();