From 992c790f0786fa45c1cc3710f29bf49c7c322ba7 Mon Sep 17 00:00:00 2001
From: Vojta Jina
Date: Tue, 29 Nov 2011 21:51:59 -0800
Subject: refactor(scope): separate controller from scope

Controller is standalone object, created using "new" operator, not messed up with scope anymore.
Instead, related scope is injected as $scope.

See design proposal: https://docs.google.com/document/pub?id=1SsgVj17ec6tnZEX3ugsvg0rVVR11wTso5Md-RdEmC0k

Closes #321
Closes #425

Breaks controller methods are not exported to scope automatically
Breaks Scope#$new() does not take controller as argument anymore---
 docs/content/api/angular.inputType.ngdoc           | 16 ++---
 docs/content/cookbook/advancedform.ngdoc           | 61 +++++++++--------
 docs/content/cookbook/deeplinking.ngdoc            | 46 ++++++-------
 docs/content/cookbook/form.ngdoc                   | 18 ++---
 docs/content/cookbook/helloworld.ngdoc             |  4 +-
 docs/content/cookbook/mvc.ngdoc                    | 77 +++++++++++-----------
 docs/content/guide/dev_guide.expressions.ngdoc     | 16 ++---
 docs/content/guide/dev_guide.forms.ngdoc           | 72 ++++++++++----------
 docs/content/guide/dev_guide.overview.ngdoc        |  6 +-
 ..._guide.templates.filters.creating_filters.ngdoc |  4 +-
 10 files changed, 157 insertions(+), 163 deletions(-)

(limited to 'docs/content')

diff --git a/docs/content/api/angular.inputType.ngdoc b/docs/content/api/angular.inputType.ngdoc
index 76a907d1..bfd5fe6f 100644
--- a/docs/content/api/angular.inputType.ngdoc
+++ b/docs/content/api/angular.inputType.ngdoc
@@ -40,8 +40,8 @@ All `inputType` widgets support:
 <doc:example>
 <doc:source>
    <script>
-     angular.inputType('json', function() {
-       this.$parseView = function() {
+     angular.inputType('json', function(element, scope) {
+       scope.$parseView = function() {
          try {
            this.$modelValue = angular.fromJson(this.$viewValue);
            if (this.$error.JSON) {
@@ -52,19 +52,19 @@ All `inputType` widgets support:
          }
        }
 
-       this.$parseModel = function() {
+       scope.$parseModel = function() {
          this.$viewValue = angular.toJson(this.$modelValue);
        }
      });
 
-     function Ctrl() {
-       this.data = {
+     function Ctrl($scope) {
+       $scope.data = {
          framework:'angular',
          codenames:'supper-powers'
        }
-       this.required = false;
-       this.disabled = false;
-       this.readonly = false;
+       $scope.required = false;
+       $scope.disabled = false;
+       $scope.readonly = false;
      }
    </script>
    <div ng:controller="Ctrl">
diff --git a/docs/content/cookbook/advancedform.ngdoc b/docs/content/cookbook/advancedform.ngdoc
index e973e30f..58a8dfd5 100644
--- a/docs/content/cookbook/advancedform.ngdoc
+++ b/docs/content/cookbook/advancedform.ngdoc
@@ -8,10 +8,8 @@ detection, and preventing invalid form submission.
 <doc:example>
 <doc:source>
    <script>
-   function UserForm() {
-     this.state = /^\w\w$/;
-     this.zip = /^\d\d\d\d\d$/;
-     this.master = {
+   function UserForm($scope) {
+     var master = {
        name: 'John Smith',
        address:{
          line1: '123 Main St.',
@@ -23,40 +21,42 @@ detection, and preventing invalid form submission.
          {type:'phone', value:'1(234) 555-1212'}
        ]
      };
-     this.cancel();
-   }
 
-   UserForm.prototype = {
-     cancel: function() {
-       this.form = angular.copy(this.master);
-     },
+     $scope.state = /^\w\w$/;
+     $scope.zip = /^\d\d\d\d\d$/;
 
-     save: function() {
-       this.master = this.form;
-       this.cancel();
-     },
+     $scope.cancel = function() {
+       $scope.form = angular.copy(master);
+     };
 
-     addContact: function() {
-       this.form.contacts.push({type:'', value:''});
-     },
+     $scope.save = function() {
+       master = $scope.form;
+       $scope.cancel();
+     };
+
+     $scope.addContact = function() {
+       $scope.form.contacts.push({type:'', value:''});
+     };
 
-     removeContact: function(contact) {
-       for ( var i = 0, ii = this.form.contacts.length; i < ii; i++) {
-         if (contact === this.form.contacts[i]) {
-           this.form.contacts.splice(i, 1);
+     $scope.removeContact = function(contact) {
+       var contacts = $scope.form.contacts;
+       for (var i = 0, ii = contacts.length; i < ii; i++) {
+         if (contact === contacts[i]) {
+           contacts.splice(i, 1);
          }
        }
-     },
+     };
 
-     isCancelDisabled: function() {
-       return angular.equals(this.master, this.form);
-     },
+     $scope.isCancelDisabled = function() {
+       return angular.equals(master, $scope.form);
+     };
 
-     isSaveDisabled: function() {
-       return this.myForm.$invalid || angular.equals(this.master, this.form);
-     }
+     $scope.isSaveDisabled = function() {
+       return $scope.myForm.$invalid || angular.equals(master, $scope.form);
+     };
 
-   };
+     $scope.cancel();
+   }
    </script>
    <div ng:controller="UserForm">
 
@@ -91,8 +91,7 @@ detection, and preventing invalid form submission.
 
    <hr/>
    Debug View:
-   <pre>form={{form}}
-   master={{master}}</pre>
+   <pre>form={{form}}</pre>
    </div>
 </doc:source>
 <doc:scenario>
diff --git a/docs/content/cookbook/deeplinking.ngdoc b/docs/content/cookbook/deeplinking.ngdoc
index 2ef3da4a..a4dc3a9b 100644
--- a/docs/content/cookbook/deeplinking.ngdoc
+++ b/docs/content/cookbook/deeplinking.ngdoc
@@ -39,42 +39,38 @@ The two partials are defined in the following URLs:
 <doc:example>
  <doc:source jsfiddle="false">
     <script>
-     AppCntl.$inject = ['$route']
-     function AppCntl($route) {
+     AppCntl.$inject = ['$scope', '$route']
+     function AppCntl($scope, $route) {
       // define routes
       $route.when("/welcome",  {template:'./examples/welcome.html',  controller:WelcomeCntl});
       $route.when("/settings", {template:'./examples/settings.html', controller:SettingsCntl});
-      $route.parent(this);
+      $route.parent($scope);
 
       // initialize the model to something useful
-      this.person = {
+      $scope.person = {
        name:'anonymous',
        contacts:[{type:'email', url:'anonymous@example.com'}]
       };
      }
 
-     function WelcomeCntl($route){}
-     WelcomeCntl.prototype = {
-      greet: function() {
-       alert("Hello " + this.person.name);
-      }
-     };
-
-     SettingsCntl.$inject = ['$location'];
-     function SettingsCntl($location){
-      this.$location = $location;
-      this.cancel();
+     function WelcomeCntl($scope) {
+      $scope.greet = function() {
+       alert("Hello " + $scope.person.name);
+      };
+     }
+
+     function SettingsCntl($scope, $location) {
+      $scope.cancel = function() {
+       $scope.form = angular.copy($scope.person);
+      };
+
+      $scope.save = function() {
+       angular.copy($scope.form, $scope.person);
+       $location.path('/welcome');
+      };
+
+      $scope.cancel();
      }
-     SettingsCntl.prototype = {
-      cancel: function() {
-       this.form = angular.copy(this.person);
-      },
-
-      save: function() {
-       angular.copy(this.form, this.person);
-       this.$location.path('/welcome');
-      }
-     };
     </script>
     <div ng:controller="AppCntl">
       <h1>Your App Chrome</h1>
diff --git a/docs/content/cookbook/form.ngdoc b/docs/content/cookbook/form.ngdoc
index 80c23e94..9371da7a 100644
--- a/docs/content/cookbook/form.ngdoc
+++ b/docs/content/cookbook/form.ngdoc
@@ -10,23 +10,23 @@ allow a user to enter data.
 <doc:example>
  <doc:source>
   <script>
-    function FormController() {
-      this.user = {
+    function FormController($scope) {
+      $scope.user = {
         name: 'John Smith',
         address:{line1: '123 Main St.', city:'Anytown', state:'AA', zip:'12345'},
         contacts:[{type:'phone', value:'1(234) 555-1212'}]
       };
-      this.state = /^\w\w$/;
-      this.zip = /^\d\d\d\d\d$/;
+      $scope.state = /^\w\w$/;
+      $scope.zip = /^\d\d\d\d\d$/;
 
-      this.addContact = function() {
-         this.user.contacts.push({type:'', value:''});
+      $scope.addContact = function() {
+         $scope.user.contacts.push({type:'', value:''});
       };
 
-      this.removeContact = function(contact) {
-        for ( var i = 0, ii = this.user.contacts.length; i < ii; i++) {
+      $scope.removeContact = function(contact) {
+        for (var i = 0, ii = this.user.contacts.length; i < ii; i++) {
           if (contact === this.user.contacts[i]) {
-            this.user.contacts.splice(i, 1);
+            $scope.user.contacts.splice(i, 1);
           }
         }
       };
diff --git a/docs/content/cookbook/helloworld.ngdoc b/docs/content/cookbook/helloworld.ngdoc
index e3d76d83..b6b5bcf7 100644
--- a/docs/content/cookbook/helloworld.ngdoc
+++ b/docs/content/cookbook/helloworld.ngdoc
@@ -5,8 +5,8 @@
 <doc:example>
  <doc:source>
   <script>
-    function HelloCntl() {
-      this.name = 'World';
+    function HelloCntl($scope) {
+      $scope.name = 'World';
     }
   </script>
   <div ng:controller="HelloCntl">
diff --git a/docs/content/cookbook/mvc.ngdoc b/docs/content/cookbook/mvc.ngdoc
index f566a541..71e771bd 100644
--- a/docs/content/cookbook/mvc.ngdoc
+++ b/docs/content/cookbook/mvc.ngdoc
@@ -14,9 +14,8 @@ no connection between the controller and the view.
 <doc:example>
   <doc:source>
     <script>
-    function TicTacToeCntl($location){
-      this.$location = $location;
-      this.cellStyle= {
+    function TicTacToeCntl($scope, $location) {
+      $scope.cellStyle= {
         'height': '20px',
         'width': '20px',
         'border': '1px solid black',
@@ -24,30 +23,40 @@ no connection between the controller and the view.
         'vertical-align': 'middle',
         'cursor': 'pointer'
       };
-      this.reset();
-      this.$watch('$location.search().board', this.readUrl);
-    }
-    TicTacToeCntl.prototype = {
-      dropPiece: function(row, col) {
-        if (!this.winner && !this.board[row][col]) {
-          this.board[row][col] = this.nextMove;
-          this.nextMove = this.nextMove == 'X' ? 'O' : 'X';
-          this.setUrl();
-        }
-      },
-      reset: function() {
-        this.board = [
+
+      $scope.reset = function() {
+        $scope.board = [
           ['', '', ''],
           ['', '', ''],
           ['', '', '']
         ];
-        this.nextMove = 'X';
-        this.winner = '';
-        this.setUrl();
-      },
-      grade: function() {
-        var b = this.board;
-        this.winner =
+        $scope.nextMove = 'X';
+        $scope.winner = '';
+        setUrl();
+      };
+
+      $scope.dropPiece = function(row, col) {
+        if (!$scope.winner && !$scope.board[row][col]) {
+          $scope.board[row][col] = $scope.nextMove;
+          $scope.nextMove = $scope.nextMove == 'X' ? 'O' : 'X';
+          setUrl();
+        }
+      };
+
+      $scope.reset();
+      $scope.$watch(function() { return $location.search().board;}, readUrl);
+
+      function setUrl() {
+        var rows = [];
+        angular.forEach($scope.board, function(row) {
+          rows.push(row.join(','));
+        });
+        $location.search({board: rows.join(';') + '/' + $scope.nextMove});
+      }
+
+      function grade() {
+        var b = $scope.board;
+        $scope.winner =
           row(0) || row(1) || row(2) ||
           col(0) || col(1) || col(2) ||
           diagonal(-1) || diagonal(1);
@@ -55,25 +64,19 @@ no connection between the controller and the view.
         function col(col) { return same(b[0][col], b[1][col], b[2][col]);}
         function diagonal(i) { return same(b[0][1-i], b[1][1], b[2][1+i]);}
         function same(a, b, c) { return (a==b && b==c) ? a : '';};
-      },
-      setUrl: function() {
-        var rows = [];
-        angular.forEach(this.board, function(row){
-          rows.push(row.join(','));
-        });
-        this.$location.search({board: rows.join(';') + '/' + this.nextMove});
-      },
-      readUrl: function(scope, value) {
+      }
+
+      function readUrl(scope, value) {
         if (value) {
           value = value.split('/');
-          this.nextMove = value[1];
+          $scope.nextMove = value[1];
           angular.forEach(value[0].split(';'), function(row, col){
-            this.board[col] = row.split(',');
-          }, this);
-          this.grade();
+            $scope.board[col] = row.split(',');
+          });
+          grade();
         }
       }
-    };
+    }
     </script>
 
     <h3>Tic-Tac-Toe</h3>
diff --git a/docs/content/guide/dev_guide.expressions.ngdoc b/docs/content/guide/dev_guide.expressions.ngdoc
index 4df69d28..b7ecc521 100644
--- a/docs/content/guide/dev_guide.expressions.ngdoc
+++ b/docs/content/guide/dev_guide.expressions.ngdoc
@@ -51,14 +51,14 @@ You can try evaluating different expressions here:
 <doc:example>
 <doc:source>
  <script>
-   function Cntl2() {
-     this.exprs = [];
-     this.expr = '3*10|currency';
-     this.addExp = function(expr) {
+   function Cntl2($scope) {
+     $scope.exprs = [];
+     $scope.expr = '3*10|currency';
+     $scope.addExp = function(expr) {
         this.exprs.push(expr);
      };
 
-     this.removeExp = function(contact) {
+     $scope.removeExp = function(contact) {
        for ( var i = 0, ii = this.exprs.length; i < ii; i++) {
          if (contact === this.exprs[i]) {
            this.exprs.splice(i, 1);
@@ -101,10 +101,10 @@ the global state (a common source of subtle bugs).
 <doc:example>
 <doc:source>
  <script>
-   function Cntl1($window){
-     this.name = 'World';
+   function Cntl1($window, $scope){
+     $scope.name = 'World';
 
-     this.greet = function() {
+     $scope.greet = function() {
        ($window.mockWindow || $window).alert('Hello ' + this.name);
      }
    }
diff --git a/docs/content/guide/dev_guide.forms.ngdoc b/docs/content/guide/dev_guide.forms.ngdoc
index b4e37abd..03d0e6f9 100644
--- a/docs/content/guide/dev_guide.forms.ngdoc
+++ b/docs/content/guide/dev_guide.forms.ngdoc
@@ -111,10 +111,10 @@ The following example demonstrates:
      .ng-form {display: block;}
    </style>
    <script>
-   function UserFormCntl() {
-     this.state = /^\w\w$/;
-     this.zip = /^\d\d\d\d\d$/;
-     this.master = {
+   function UserFormCntl($scope) {
+     $scope.state = /^\w\w$/;
+     $scope.zip = /^\d\d\d\d\d$/;
+     $scope.master = {
        customer: 'John Smith',
        address:{
          line1: '123 Main St.',
@@ -123,28 +123,26 @@ The following example demonstrates:
          zip:'12345'
        }
      };
-     this.cancel();
-   }
 
-   UserFormCntl.prototype = {
-     cancel: function() {
-       this.form = angular.copy(this.master);
-     },
+     $scope.cancel = function() {
+       $scope.form = angular.copy($scope.master);
+     };
 
-     save: function() {
-       this.master = this.form;
-       this.cancel();
-     },
+     $scope.save = function() {
+       $scope.master = $scope.form;
+       $scope.cancel();
+     };
 
-     isCancelDisabled: function() {
-       return angular.equals(this.master, this.form);
-     },
+     $scope.isCancelDisabled = function() {
+       return angular.equals($scope.master, $scope.form);
+     };
 
-     isSaveDisabled: function() {
-       return this.userForm.$invalid || angular.equals(this.master, this.form);
-     }
+     $scope.isSaveDisabled = function() {
+       return $scope.userForm.$invalid || angular.equals($scope.master, $scope.form);
+     };
 
-   };
+     $scope.cancel();
+   }
    </script>
    <div ng:controller="UserFormCntl">
 
@@ -282,15 +280,13 @@ This example shows how to implement a custom HTML editor widget in Angular.
     <doc:example>
       <doc:source>
         <script>
-          function EditorCntl() {
-            this.htmlContent = '<b>Hello</b> <i>World</i>!';
+          function EditorCntl($scope) {
+            $scope.htmlContent = '<b>Hello</b> <i>World</i>!';
           }
 
-          HTMLEditorWidget.$inject = ['$element', 'htmlFilter'];
-          function HTMLEditorWidget(element, htmlFilter) {
-            var self = this;
-
-            this.$parseModel = function() {
+          HTMLEditorWidget.$inject = ['$element', '$scope', 'htmlFilter'];
+          function HTMLEditorWidget(element, scope, htmlFilter) {
+            scope.$parseModel = function() {
               // need to protect for script injection
               try {
                 this.$viewValue = htmlFilter(
@@ -305,13 +301,13 @@ This example shows how to implement a custom HTML editor widget in Angular.
               }
             }
 
-            this.$render = function() {
+            scope.$render = function() {
               element.html(this.$viewValue);
             }
 
             element.bind('keyup', function() {
-              self.$apply(function() {
-                self.$emit('$viewChange', element.html());
+              scope.$apply(function() {
+                scope.$emit('$viewChange', element.html());
               });
             });
           }
@@ -364,13 +360,13 @@ validation.
 <doc:example>
   <doc:source>
      <script>
-       function Ctrl() {
-         this.input1 = '';
-         this.input2 = '';
-         this.input3 = 'A';
-         this.input4 = false;
-         this.input5 = 'c';
-         this.input6 = [];
+       function Ctrl($scope) {
+         $scope.input1 = '';
+         $scope.input2 = '';
+         $scope.input3 = 'A';
+         $scope.input4 = false;
+         $scope.input5 = 'c';
+         $scope.input6 = [];
        }
      </script>
     <table style="font-size:.9em;" ng:controller="Ctrl">
diff --git a/docs/content/guide/dev_guide.overview.ngdoc b/docs/content/guide/dev_guide.overview.ngdoc
index 5d308167..faf40af5 100644
--- a/docs/content/guide/dev_guide.overview.ngdoc
+++ b/docs/content/guide/dev_guide.overview.ngdoc
@@ -43,9 +43,9 @@ easier a web developer's life can if they're using angular:
 <doc:example>
 <doc:source>
  <script>
-   function InvoiceCntl() {
-     this.qty = 1;
-     this.cost = 19.95;
+   function InvoiceCntl($scope) {
+     $scope.qty = 1;
+     $scope.cost = 19.95;
    }
  </script>
  <div ng:controller="InvoiceCntl">
diff --git a/docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc b/docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc
index 98b41411..87894227 100644
--- a/docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc
+++ b/docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc
@@ -34,8 +34,8 @@ text upper-case and assigns color.
       }
     });
 
-  function Ctrl() {
-    this.greeting = 'hello';
+  function Ctrl($scope) {
+    $scope.greeting = 'hello';
   }
 </script>
 
-- 
cgit v1.2.3