2.1 to 2.4: avoid controllerAs by passing to controllers.

.idea/workspace.xml

@@ -2,8 +2,15 @@
 <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$/js/directives/nw-card.js" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/templates/directives/nw-card.html" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/templates/pages/notes/notes.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-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$/templates/pages/notes/index.html" afterPath="$PROJECT_DIR$/templates/pages/notes/index.html" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/templates/pages/notes/show.html" afterPath="$PROJECT_DIR$/templates/pages/notes/show.html" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="TRACKING_ENABLED" value="true" />
@@ -13,18 +20,7 @@
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
   <component name="FileEditorManager">
-    <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
-      <file leaf-file-name="notes-show-controller.js" pinned="false" current-in-tab="true">
-        <entry file="file://$PROJECT_DIR$/js/controllers/notes-show-controller.js">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="15">
-              <caret line="1" column="47" lean-forward="false" selection-start-line="1" selection-start-column="47" selection-end-line="1" selection-end-column="47" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-    </leaf>
+    <leaf SIDE_TABS_SIZE_LIMIT_KEY="300" />
   </component>
   <component name="FileTemplateManagerImpl">
     <option name="RECENT_TEMPLATES">
@@ -42,6 +38,10 @@
       <find>NoteW</find>
       <find>note-wrapper</find>
       <find>note in</find>
+      <find>card.header</find>
+      <find>class=&quot;h3</find>
+      <find>showController</find>
+      <find>indexController</find>
     </findStrings>
     <replaceStrings>
       <replace>user</replace>
@@ -65,13 +65,18 @@
         <option value="$PROJECT_DIR$/index.html" />
         <option value="$PROJECT_DIR$/notes" />
         <option value="$PROJECT_DIR$/.eslintrc.yml" />
-        <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" />
+        <option value="$PROJECT_DIR$/templates/pages/notes/nw-card.html" />
+        <option value="$PROJECT_DIR$/templates/pages/notes/notes.html" />
+        <option value="$PROJECT_DIR$/js/nw-card.js" />
+        <option value="$PROJECT_DIR$/js/directives/nw-card.js" />
+        <option value="$PROJECT_DIR$/templates/directives/nw-card.html" />
+        <option value="$PROJECT_DIR$/templates/pages/notes/index.html" />
         <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/show.html" />
+        <option value="$PROJECT_DIR$/js/routes.js" />
       </list>
     </option>
   </component>
@@ -151,10 +156,22 @@
               <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="directives" 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" />
+            </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="directives" type="2a2b976b:PhpTreeStructureProvider$1" />
             </path>
             <path>
               <item name="CodeSchool Angular 2" type="b2602c69:ProjectViewProjectNode" />
@@ -193,6 +210,10 @@
     <property name="PluginDummyText.Genre" value="pirates" />
   </component>
   <component name="RecentsManager">
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/templates/directives" />
+      <recent name="$PROJECT_DIR$/js/directives" />
+    </key>
     <key name="CopyFile.RECENT_KEYS">
       <recent name="$PROJECT_DIR$/templates/pages/notes" />
       <recent name="$PROJECT_DIR$/js/controllers" />
@@ -225,16 +246,15 @@
       <updated>1511725827370</updated>
       <workItem from="1511725828563" duration="17000" />
       <workItem from="1511725890984" duration="265000" />
-      <workItem from="1511726180468" duration="11258000" />
+      <workItem from="1511726180468" duration="12305000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="11540000" />
+    <option name="totallyTimeSpent" value="12587000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="1440" 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="0" side_tool="true" content_ui="tabs" />
@@ -242,7 +262,7 @@
       <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="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="2" side_tool="false" content_ui="tabs" />
-      <window_info id="Project" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.26037195" sideWeight="0.5" order="5" side_tool="false" content_ui="combo" />
+      <window_info id="Project" active="true" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.26037195" 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="11" 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.32992327" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
@@ -523,39 +543,39 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/index.html">
+    <entry file="file://$PROJECT_DIR$/notes.json">
       <provider selected="true" editor-type-id="text-editor">
-        <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" />
+        <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/index.html">
+    <entry file="file://$PROJECT_DIR$/js/controllers/notes-create-controller.js">
       <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" />
+        <state relative-caret-position="120">
+          <caret line="8" column="0" lean-forward="false" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" />
           <folding />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/notes.json">
+    <entry file="file://$PROJECT_DIR$/js/app.js">
       <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" />
+        <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$/templates/pages/notes/show.html">
+    <entry file="file://$PROJECT_DIR$/index.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" />
+        <state relative-caret-position="85">
+          <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$/js/controllers/notes-create-controller.js">
+    <entry file="file://$PROJECT_DIR$/js/directives/nw-card.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="120">
           <caret line="8" column="0" lean-forward="false" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" />
@@ -563,34 +583,58 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/js/app.js">
+    <entry file="file://$PROJECT_DIR$/templates/directives/nw-card.html">
       <provider selected="true" editor-type-id="text-editor">
-        <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" />
+        <state relative-caret-position="15">
+          <caret line="1" column="20" lean-forward="false" selection-start-line="1" selection-start-column="20" selection-end-line="1" selection-end-column="20" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/templates/pages/notes/notes.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="150">
+          <caret line="10" column="0" lean-forward="true" selection-start-line="10" selection-start-column="0" selection-end-line="10" selection-end-column="0" />
           <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="225">
-          <caret line="15" column="8" lean-forward="false" selection-start-line="15" selection-start-column="8" selection-end-line="15" selection-end-column="8" />
+        <state relative-caret-position="30">
+          <caret line="2" column="0" lean-forward="false" 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$/templates/pages/notes/index.html">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="120">
-          <caret line="8" column="8" lean-forward="true" selection-start-line="8" selection-start-column="8" selection-end-line="8" selection-end-column="8" />
+          <caret line="8" column="27" lean-forward="false" selection-start-line="8" selection-start-column="27" selection-end-line="8" selection-end-column="27" />
+          <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="180">
+          <caret line="12" column="0" lean-forward="true" selection-start-line="12" selection-start-column="0" selection-end-line="12" selection-end-column="0" />
           <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="15">
-          <caret line="1" column="47" lean-forward="false" selection-start-line="1" selection-start-column="47" selection-end-line="1" selection-end-column="47" />
+        <state relative-caret-position="135">
+          <caret line="9" column="12" lean-forward="false" selection-start-line="9" selection-start-column="12" selection-end-line="9" selection-end-column="12" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/js/routes.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="210">
+          <caret line="14" column="11" lean-forward="false" selection-start-line="14" selection-start-column="11" selection-end-line="14" selection-end-column="11" />
           <folding />
         </state>
       </provider>

js/controllers/notes-index-controller.js

@@ -1,13 +1,11 @@
 angular.module("noteWrangler")
-  .controller("NotesIndexController", function ($http) {
-    const controller = this;
-
+  .controller("NotesIndexController", function ($http, $scope) {
     const errorHandler = function (err) {
       console.log("Error getting /notes", err);
     };
 
     const responseHandler = function (data) {
-      controller.notes = data.data;
+      $scope.notes = data.data;
     };
 
     $http({

js/controllers/notes-show-controller.js

@@ -1,6 +1,5 @@
 angular.module("noteWrangler")
-  .controller("NotesShowController", function ($http, $routeParams) {
-    const controller = this;
+  .controller("NotesShowController", function ($http, $routeParams, $scope) {
 
     const errorHandler = function (err) {
       console.log("Error getting /notes", err);
@@ -8,7 +7,7 @@ angular.module("noteWrangler")
 
     const responseHandler = function (data) {
       const id = parseInt($routeParams.id, 10);
-      controller.note = data.data[id];
+      $scope.note = data.data[id];
     };
 
     $http({

js/directives/nw-card.js

@@ -0,0 +1,10 @@
+angular.module("noteWrangler")
+  .directive('nwCard', function () {
+    return {
+      retrict: "E", // "E" is for Element.
+      templateUrl: "templates/directives/nw-card.html",
+      controller: function ($scope) {
+        $scope.header = "Note title";
+      },
+    }
+  });

js/routes.js

@@ -5,12 +5,14 @@ angular.module("noteWrangler")
       .when("/notes/:id", {
         templateUrl: "templates/pages/notes/show.html",
         controller: 'NotesShowController',
-        controllerAs: 'showController'
+        // No longer needed since we now pass $scope to controller.
+        // controllerAs: 'showController'
       })
       .when("/notes", {
         templateUrl: "templates/pages/notes/index.html",
         controller: 'NotesIndexController',
-        controllerAs: 'indexController'
+        // No longer needed since we now pass $scope to controller.
+        // controllerAs: 'indexController'
       })
       .when("/users", {
         templateUrl: "templates/pages/users/index.html"

templates/directives/nw-card.html

@@ -0,0 +1,3 @@
+<div class="card">
+  <h2 class="h3">{{ header }}</h2>
+</div>

templates/pages/notes/index.html

@@ -6,7 +6,7 @@
 
     <div class="note-wrapper">
       <a class="card-notes"
-        ng-repeat="note in indexController.notes"
+        ng-repeat="note in notes"
         ng-href="#/notes/{{note.id}}">
 
         <div class="card" title="{{note.title}}">

templates/pages/notes/notes.html

@@ -0,0 +1,10 @@
+...
+
+<div class="note-wrapper">
+  <a class="card-notes" ng-repeat="note in notes"
+    ng-href="#/notes/{{ node.id }}">
+    <nw-card></nw-card>
+  </a>
+</div>
+
+...

templates/pages/notes/show.html

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