aboutsummaryrefslogtreecommitdiffstats
path: root/docs
diff options
context:
space:
mode:
authorVojta Jina2011-11-29 21:51:59 -0800
committerVojta Jina2012-01-23 11:05:36 -0800
commit992c790f0786fa45c1cc3710f29bf49c7c322ba7 (patch)
tree581d06ea9ba275a14d5891d83b2df03f9930bd45 /docs
parentf5343c9fd3c7cd0fefdb4d71d2b579dbae998d6a (diff)
downloadangular.js-992c790f0786fa45c1cc3710f29bf49c7c322ba7.tar.bz2
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
Diffstat (limited to 'docs')
-rw-r--r--docs/content/api/angular.inputType.ngdoc16
-rw-r--r--docs/content/cookbook/advancedform.ngdoc61
-rw-r--r--docs/content/cookbook/deeplinking.ngdoc46
-rw-r--r--docs/content/cookbook/form.ngdoc18
-rw-r--r--docs/content/cookbook/helloworld.ngdoc4
-rw-r--r--docs/content/cookbook/mvc.ngdoc77
-rw-r--r--docs/content/guide/dev_guide.expressions.ngdoc16
-rw-r--r--docs/content/guide/dev_guide.forms.ngdoc72
-rw-r--r--docs/content/guide/dev_guide.overview.ngdoc6
-rw-r--r--docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc4
-rw-r--r--docs/src/templates/docs.js11
11 files changed, 162 insertions, 169 deletions
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>
diff --git a/docs/src/templates/docs.js b/docs/src/templates/docs.js
index 38a75236..bf279df5 100644
--- a/docs/src/templates/docs.js
+++ b/docs/src/templates/docs.js
@@ -1,9 +1,8 @@
-DocsController.$inject = ['$location', '$window', '$cookies', '$filter'];
-function DocsController($location, $window, $cookies, $filter) {
- window.$root = this.$root;
+DocsController.$inject = ['$scope', '$location', '$window', '$cookies', '$filter'];
+function DocsController(scope, $location, $window, $cookies, $filter) {
+ window.$root = scope.$root;
- var scope = this,
- OFFLINE_COOKIE_NAME = 'ng-offline',
+ var OFFLINE_COOKIE_NAME = 'ng-offline',
DOCS_PATH = /^\/(api)|(guide)|(cookbook)|(misc)|(tutorial)/,
INDEX_PATH = /^(\/|\/index[^\.]*.html)$/,
filter = $filter('filter');
@@ -160,6 +159,6 @@ angular.module('ngdocs', [], function($locationProvider, $filterProvider) {
return text && text.replace(/^angular\.module\.([^\.]+)(\.(.*))?$/, function(_, module, _0, name){
return 'Module ' + module + (name ? ' - ' + name : '');
});
- }
+ };
});
});