Level 1.5: logic in routes. Working notes index and show routes. Partial create route.

.eslintrc.yml

@@ -0,0 +1,12 @@
+env:
+  browser: true
+globals:
+  angular: false
+parserOptions:
+  ecmaFeatures:
+    experimentalObjectRestSpread: false
+    globalReturn: true
+    impliedStrict: true
+    jsx: false
+  ecmaVersion: 6,
+  sourceType: "module"

.idea/workspace.xml

@@ -2,13 +2,17 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="179343f7-015f-440a-93a8-15155b9f2a03" name="Default" comment="">
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/.idea/php.xml" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/.idea/vcs.xml" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/js/controllers/users-index-controller.js" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/js/controllers/users-show-controller.js" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/js/routes.js" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/templates/pages/notes/index.html" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/templates/pages/users/index.html" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/.eslintrc.yml" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/notes.json" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/templates/pages/notes/show.html" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/js/controllers/notes-create-controller.js" afterPath="$PROJECT_DIR$/js/controllers/notes-create-controller.js" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/js/controllers/notes-index-controller.js" afterPath="$PROJECT_DIR$/js/controllers/notes-index-controller.js" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/js/controllers/notes-show-controller.js" afterPath="$PROJECT_DIR$/js/controllers/notes-show-controller.js" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/js/routes.js" afterPath="$PROJECT_DIR$/js/routes.js" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/package.json" afterPath="$PROJECT_DIR$/package.json" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/templates/pages/notes/index.html" afterPath="$PROJECT_DIR$/templates/pages/notes/index.html" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/yarn.lock" afterPath="$PROJECT_DIR$/yarn.lock" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="TRACKING_ENABLED" value="true" />
@@ -19,21 +23,31 @@
   </component>
   <component name="FileEditorManager">
     <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
-      <file leaf-file-name="index.html" pinned="false" current-in-tab="true">
-        <entry file="file://$PROJECT_DIR$/index.html">
+      <file leaf-file-name="notes-index-controller.js" pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/js/controllers/notes-index-controller.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="102">
-              <caret line="20" column="24" lean-forward="false" selection-start-line="20" selection-start-column="24" selection-end-line="20" selection-end-column="24" />
+            <state relative-caret-position="240">
+              <caret line="16" column="5" lean-forward="true" selection-start-line="16" selection-start-column="5" selection-end-line="16" selection-end-column="5" />
               <folding />
             </state>
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="routes.js" pinned="false" current-in-tab="false">
+      <file leaf-file-name="routes.js" pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/js/routes.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="30">
-              <caret line="2" column="37" lean-forward="false" selection-start-line="2" selection-start-column="37" selection-end-line="2" selection-end-column="37" />
+            <state relative-caret-position="105">
+              <caret line="7" column="38" lean-forward="true" selection-start-line="7" selection-start-column="38" selection-end-line="7" selection-end-column="38" />
+              <folding />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file leaf-file-name="notes-create-controller.js" pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/js/controllers/notes-create-controller.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="405">
+              <caret line="27" column="0" lean-forward="true" selection-start-line="27" selection-start-column="0" selection-end-line="27" selection-end-column="0" />
               <folding />
             </state>
           </provider>
@@ -55,6 +69,8 @@
       <find>ngroute</find>
       <find>app</find>
       <find>NoteW</find>
+      <find>note-wrapper</find>
+      <find>note in</find>
     </findStrings>
     <replaceStrings>
       <replace>user</replace>
@@ -75,8 +91,16 @@
         <option value="$PROJECT_DIR$/users-index.html" />
         <option value="$PROJECT_DIR$/templates/pages/users/users-index.html" />
         <option value="$PROJECT_DIR$/js/app.js" />
-        <option value="$PROJECT_DIR$/js/routes.js" />
         <option value="$PROJECT_DIR$/index.html" />
+        <option value="$PROJECT_DIR$/notes" />
+        <option value="$PROJECT_DIR$/.eslintrc.yml" />
+        <option value="$PROJECT_DIR$/js/controllers/notes-index-controller.js" />
+        <option value="$PROJECT_DIR$/js/controllers/notes-show-controller.js" />
+        <option value="$PROJECT_DIR$/templates/pages/notes/index.html" />
+        <option value="$PROJECT_DIR$/templates/pages/notes/show.html" />
+        <option value="$PROJECT_DIR$/notes.json" />
+        <option value="$PROJECT_DIR$/js/controllers/notes-create-controller.js" />
+        <option value="$PROJECT_DIR$/js/routes.js" />
       </list>
     </option>
   </component>
@@ -148,23 +172,31 @@
             <path>
               <item name="CodeSchool Angular 2" type="b2602c69:ProjectViewProjectNode" />
               <item name="ng-codeschool2" type="2a2b976b:PhpTreeStructureProvider$1" />
-              <item name="css" type="2a2b976b:PhpTreeStructureProvider$1" />
+              <item name="js" type="2a2b976b:PhpTreeStructureProvider$1" />
             </path>
             <path>
               <item name="CodeSchool Angular 2" type="b2602c69:ProjectViewProjectNode" />
               <item name="ng-codeschool2" type="2a2b976b:PhpTreeStructureProvider$1" />
               <item name="js" type="2a2b976b:PhpTreeStructureProvider$1" />
+              <item name="controllers" type="2a2b976b:PhpTreeStructureProvider$1" />
             </path>
             <path>
               <item name="CodeSchool Angular 2" type="b2602c69:ProjectViewProjectNode" />
               <item name="ng-codeschool2" type="2a2b976b:PhpTreeStructureProvider$1" />
-              <item name="js" type="2a2b976b:PhpTreeStructureProvider$1" />
-              <item name="controllers" type="2a2b976b:PhpTreeStructureProvider$1" />
+              <item name="templates" type="2a2b976b:PhpTreeStructureProvider$1" />
+            </path>
+            <path>
+              <item name="CodeSchool Angular 2" type="b2602c69:ProjectViewProjectNode" />
+              <item name="ng-codeschool2" type="2a2b976b:PhpTreeStructureProvider$1" />
+              <item name="templates" type="2a2b976b:PhpTreeStructureProvider$1" />
+              <item name="pages" type="2a2b976b:PhpTreeStructureProvider$1" />
             </path>
             <path>
               <item name="CodeSchool Angular 2" type="b2602c69:ProjectViewProjectNode" />
               <item name="ng-codeschool2" type="2a2b976b:PhpTreeStructureProvider$1" />
               <item name="templates" type="2a2b976b:PhpTreeStructureProvider$1" />
+              <item name="pages" type="2a2b976b:PhpTreeStructureProvider$1" />
+              <item name="notes" type="2a2b976b:PhpTreeStructureProvider$1" />
             </path>
           </expand>
           <select />
@@ -187,9 +219,11 @@
     <property name="node.js.path.for.package.standard" value="project" />
     <property name="node.js.detected.package.standard" value="true" />
     <property name="node.js.selected.package.standard" value="" />
+    <property name="PluginDummyText.Genre" value="pirates" />
   </component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/templates/pages/notes" />
       <recent name="$PROJECT_DIR$/js/controllers" />
     </key>
   </component>
@@ -220,12 +254,12 @@
       <updated>1511725827370</updated>
       <workItem from="1511725828563" duration="17000" />
       <workItem from="1511725890984" duration="265000" />
-      <workItem from="1511726180468" duration="4693000" />
+      <workItem from="1511726180468" duration="10179000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="4975000" />
+    <option name="totallyTimeSpent" value="10461000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="1440" height="877" extended-state="6" />
@@ -260,7 +294,9 @@
     <option name="myLimit" value="2678400000" />
   </component>
   <component name="XDebuggerManager">
-    <breakpoint-manager />
+    <breakpoint-manager>
+      <option name="time" value="1" />
+    </breakpoint-manager>
     <watches-manager />
   </component>
   <component name="editorHistoryManager">
@@ -280,14 +316,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/js/controllers/notes-show-controller.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$/templates/pages/users/index.html">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="195">
@@ -296,14 +324,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/templates/pages/notes/index.html">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="180">
-          <caret line="12" column="14" lean-forward="true" selection-start-line="12" selection-start-column="14" selection-end-line="12" selection-end-column="14" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/users-index.html">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="439">
@@ -511,26 +531,95 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/node_modules/material-design-icons/README.md">
+      <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
+        <state split_layout="SECOND">
+          <first_editor 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>
+              <marker date="1472776395000" expanded="true" signature="867:890" ph="..." />
+            </folding>
+          </first_editor>
+          <second_editor />
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/js/app.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="0">
-          <caret line="0" column="17" lean-forward="false" selection-start-line="0" selection-start-column="17" selection-end-line="0" selection-end-column="17" />
+        <state relative-caret-position="30">
+          <caret line="2" column="0" lean-forward="true" selection-start-line="2" selection-start-column="0" selection-end-line="2" selection-end-column="0" />
           <folding />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/js/routes.js">
+    <entry file="file://$PROJECT_DIR$/.eslintrc.yml">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="30">
-          <caret line="2" column="37" lean-forward="false" selection-start-line="2" selection-start-column="37" selection-end-line="2" selection-end-column="37" />
+        <state relative-caret-position="15">
+          <caret line="1" column="0" lean-forward="false" selection-start-line="1" selection-start-column="0" selection-end-line="1" selection-end-column="0" />
           <folding />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/index.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="102">
-          <caret line="20" column="24" lean-forward="false" selection-start-line="20" selection-start-column="24" selection-end-line="20" selection-end-column="24" />
+        <state relative-caret-position="195">
+          <caret line="13" column="22" lean-forward="true" selection-start-line="13" selection-start-column="22" selection-end-line="13" selection-end-column="22" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/templates/pages/notes/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="135">
+          <caret line="9" column="34" lean-forward="false" selection-start-line="9" selection-start-column="34" selection-end-line="9" selection-end-column="34" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/js/controllers/notes-show-controller.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="165">
+          <caret line="11" column="6" lean-forward="true" selection-start-line="11" selection-start-column="6" selection-end-line="11" selection-end-column="6" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/notes.json">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="240">
+          <caret line="13" column="78" lean-forward="true" selection-start-line="13" selection-start-column="78" selection-end-line="13" selection-end-column="78" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/templates/pages/notes/show.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="135">
+          <caret line="9" column="35" lean-forward="false" selection-start-line="9" selection-start-column="35" selection-end-line="9" selection-end-column="35" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/js/controllers/notes-index-controller.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="240">
+          <caret line="16" column="5" lean-forward="true" selection-start-line="16" selection-start-column="5" selection-end-line="16" selection-end-column="5" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/js/controllers/notes-create-controller.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="405">
+          <caret line="27" column="0" lean-forward="true" selection-start-line="27" selection-start-column="0" selection-end-line="27" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/js/routes.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="105">
+          <caret line="7" column="38" lean-forward="true" selection-start-line="7" selection-start-column="38" selection-end-line="7" selection-end-column="38" />
           <folding />
         </state>
       </provider>

js/controllers/notes-create-controller.js

@@ -0,0 +1,33 @@
+angular.module("noteWrangler")
+  .controller("NoteCreateController", function ($http) {
+    const controller = this;
+
+    this.saveNote = function (note) {
+      controller.errors = null;
+      $http({
+        method: "POST",
+        url: "/notes.json",
+        data: note,
+      }).catch(function (note) {
+        controller.errors = note.data.error;
+      })
+        .then(responseHandler, errorHandler);
+    };
+
+    const errorHandler = function (err) {
+      console.log("Error getting /notes", err);
+    };
+
+    const responseHandler = function (data) {
+      controller.notes = data.data;
+    };
+
+  });
+
+/* Somewhere in templates, to show the error:
+
+<p ng-if="createController.errors">
+  {{ createController.errors }}
+</p>
+
+ */

js/controllers/notes-index-controller.js

@@ -0,0 +1,17 @@
+angular.module("noteWrangler")
+  .controller("NotesIndexController", function ($http) {
+    const controller = this;
+
+    const errorHandler = function (err) {
+      console.log("Error getting /notes", err);
+    };
+
+    const responseHandler = function (data) {
+      controller.notes = data.data;
+    };
+
+    $http({
+      method: "GET",
+      url: "/notes.json"
+    }).then(responseHandler, errorHandler);
+  });

js/controllers/notes-show-controller.js

@@ -0,0 +1,18 @@
+angular.module("noteWrangler")
+  .controller("NotesShowController", function ($http, $routeParams) {
+    const controller = this;
+
+    const errorHandler = function (err) {
+      console.log("Error getting /notes", err);
+    };
+
+    const responseHandler = function (data) {
+      const id = parseInt($routeParams.id, 10);
+      controller.note = data.data[id];
+    };
+
+    $http({
+      method: "GET",
+      url: "/notes.json"
+    }).then(responseHandler, errorHandler);
+  });

js/routes.js

@@ -2,8 +2,15 @@ angular.module("noteWrangler")
   .config(function ($routeProvider, $locationProvider) {
     $locationProvider.hashPrefix('');
     $routeProvider
+      .when("/notes/:id", {
+        templateUrl: "templates/pages/notes/show.html",
+        controller: 'NotesShowController',
+        controllerAs: 'showController'
+      })
       .when("/notes", {
-        templateUrl: "templates/pages/notes/index.html"
+        templateUrl: "templates/pages/notes/index.html",
+        controller: 'NotesIndexController',
+        controllerAs: 'indexController'
       })
       .when("/users", {
         templateUrl: "templates/pages/users/index.html"

notes.json

@@ -0,0 +1,23 @@
+{
+  "1": {
+    "id": 1,
+    "title": "Service service: really Angular?",
+    "description": "Clarify the confusion between Service the term and `service` the Angular method, and to explain the 5 different service recipes in AngularJS",
+    "icon": "question",
+    "content": "Wonderland of love will compassionately feel an enlightened believer. A pictorial form of trust is the volume."
+  },
+  "2": {
+    "id": 2,
+    "title": "Define service",
+    "description": "Angular services are objects that are used to organize and share code across your app",
+    "icon": "question",
+    "content": "Punishment ho! endure to be raided. Yuck, yer not ransacking me without a punishment!"
+  },
+  "3": {
+    "id": 3,
+    "title": "How do you create a service?",
+    "description": "Steps for creating a service",
+    "icon": "question",
+    "content": "Place the truffels in a plastic bag, and toss thoroughly with large crême fraîche. Rub half a kilo of strudel in one container of blueberries sauce."
+  }
+}

package.json

@@ -13,6 +13,7 @@
     "angular": "^1.6.7",
     "angular-resource": "^1.6.7",
     "angular-route": "^1.6.7",
-    "jquery": "^3.2.1"
+    "jquery": "^3.2.1",
+    "material-design-icons": "^3.0.1"
   }
 }

templates/pages/notes/index.html

@@ -5,10 +5,17 @@
     </div>
 
     <div class="note-wrapper">
-      <a class="card-notes" ng-repeat="note in notes">
+      <a class="card-notes"
+        ng-repeat="note in indexController.notes"
+        ng-href="#/notes/{{note.id}}">
 
         <div class="card" title="{{note.title}}">
+          <div ng-if="note.icon">
+            <i class="icon icon-card {{note.icon}}"></i>
+          </div>
+
           <h2 class="h3">{{ note.title }}</h2>
+
           <p>{{ note.description }}</p>
         </div>
 

templates/pages/notes/show.html

@@ -0,0 +1,12 @@
+<div class="card" title="{{showController.note.title}}">
+  <h1>{{ showController.note.title }}</h1>
+
+  <p>Created by: {{ showController.note.user || showController.note.username }}</p>
+
+  <h3>Description</h3>
+  <p>{{ showController.note.description }}</p>
+
+  <h3>Contents</h3>
+  <p>{{ showController.note.content }}</p>
+
+</div>

yarn.lock

@@ -632,6 +632,10 @@ lru-cache@^4.0.1:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
+material-design-icons@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/material-design-icons/-/material-design-icons-3.0.1.tgz#9a71c48747218ebca51e51a66da682038cdcb7bf"
+
 mimic-fn@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"