Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 073e76f

Browse files
mheverymhevery
committed
doc(guide): corrected examples
1 parent 7019f14 commit 073e76f

File tree

3 files changed

+94
-94
lines changed

3 files changed

+94
-94
lines changed

‎docs/content/guide/compiler.ngdoc

+35-35
Original file line numberDiff line numberDiff line change
@@ -66,45 +66,45 @@ to write directives.
6666
Here is a directive which makes any element draggable. Notice the `draggable` attribute on the
6767
`<span>` element.
6868

69-
<doc-example module="drag">
70-
<doc-source>
71-
<script>
72-
angular.module('drag', []).
73-
directive('draggable', function($document) {
74-
var startX=0, startY=0, x = 0, y = 0;
75-
return function(scope, element, attr) {
69+
<example module="drag">
70+
<file name="script.js">
71+
angular.module('drag', []).
72+
directive('draggable', function($document) {
73+
var startX=0, startY=0, x = 0, y = 0;
74+
return function(scope, element, attr) {
75+
element.css({
76+
position: 'relative',
77+
border: '1px solid red',
78+
backgroundColor: 'lightgrey',
79+
cursor: 'pointer'
80+
});
81+
element.bind('mousedown', function(event) {
82+
startX = event.screenX - x;
83+
startY = event.screenY - y;
84+
$document.bind('mousemove', mousemove);
85+
$document.bind('mouseup', mouseup);
86+
});
87+
88+
function mousemove(event) {
89+
y = event.screenY - startY;
90+
x = event.screenX - startX;
7691
element.css({
77-
position: 'relative',
78-
border: '1px solid red',
79-
backgroundColor: 'lightgrey',
80-
cursor: 'pointer'
92+
top: y + 'px',
93+
left: x + 'px'
8194
});
82-
element.bind('mousedown', function(event) {
83-
startX = event.screenX - x;
84-
startY = event.screenY - y;
85-
$document.bind('mousemove', mousemove);
86-
$document.bind('mouseup', mouseup);
87-
});
88-
89-
function mousemove(event) {
90-
y = event.screenY - startY;
91-
x = event.screenX - startX;
92-
element.css({
93-
top: y + 'px',
94-
left: x + 'px'
95-
});
96-
}
97-
98-
function mouseup() {
99-
$document.unbind('mousemove', mousemove);
100-
$document.unbind('mouseup', mouseup);
101-
}
10295
}
103-
});
104-
</script>
96+
97+
function mouseup() {
98+
$document.unbind('mousemove', mousemove);
99+
$document.unbind('mouseup', mouseup);
100+
}
101+
}
102+
});
103+
</file>
104+
<file name="index.html">
105105
<span draggable>Drag ME</span>
106-
</doc-source>
107-
</doc-example>
106+
</file>
107+
</file>
108108

109109

110110
The presence of `draggable` attribute an any element gives the element new behavior. The beauty of

‎docs/content/guide/overview.ngdoc

+12-12
Original file line numberDiff line numberDiff line change
@@ -75,14 +75,14 @@ concepts which the application developer may face:
7575
* computing new values based on the model.
7676
* formatting output in a user specific locale.
7777

78-
<doc-example>
79-
<doc-source>
80-
<script>
81-
function InvoiceCntl($scope) {
82-
$scope.qty = 1;
83-
$scope.cost = 19.95;
84-
}
85-
</script>
78+
<example>
79+
<file name="script.js">
80+
function InvoiceCntl($scope) {
81+
$scope.qty = 1;
82+
$scope.cost = 19.95;
83+
}
84+
</file>
85+
<file name="index.html">
8686
<div ng-controller="InvoiceCntl">
8787
<b>Invoice:</b>
8888
<br>
@@ -97,16 +97,16 @@ concepts which the application developer may face:
9797
<hr>
9898
<b>Total:</b> {{qty * cost | currency}}
9999
</div>
100-
</doc-source>
101-
<doc-scenario>
100+
</file>
101+
<file name="scenario.js">
102102
it('should show of angular binding', function() {
103103
expect(binding('qty * cost')).toEqual('$19.95');
104104
input('qty').enter('2');
105105
input('cost').enter('5.00');
106106
expect(binding('qty * cost')).toEqual('$10.00');
107107
});
108-
</doc-scenario>
109-
</doc-example>
108+
</file>
109+
</example>
110110

111111
Try out the Live Preview above, and then let's walk through the example and describe what's going
112112
on.

‎docs/content/guide/scope.ngdoc

+47-47
Original file line numberDiff line numberDiff line change
@@ -38,26 +38,26 @@ arrangement isolates the controller from the directive as well as from DOM. This
3838
point since it makes the controllers view agnostic, which greatly improves the testing story of
3939
the applications.
4040

41-
<doc-example>
42-
<doc-source>
43-
<script>
44-
function MyController($scope) {
45-
$scope.username = 'World';
46-
47-
$scope.sayHello = function() {
48-
$scope.greeting = 'Hello ' + $scope.username + '!';
49-
};
50-
}
51-
</script>
41+
<example>
42+
<file name="script.js">
43+
function MyController($scope) {
44+
$scope.username = 'World';
45+
46+
$scope.sayHello = function() {
47+
$scope.greeting = 'Hello ' + $scope.username + '!';
48+
};
49+
}
50+
</file>
51+
<file name="index.html">
5252
<div ng-controller="MyController">
5353
Your name:
5454
<input type="text" ng-model="username">
5555
<button ng-click='sayHello()'>greet</button>
5656
<hr>
5757
{{greeting}}
5858
</div>
59-
</doc-source>
60-
</doc-example>
59+
</file>
60+
</example>
6161

6262
In the above example notice that the `MyController` assigns `World` to the `username` property of
6363
the scope. The scope then notifies the `input` of the assignment, which then renders the input
@@ -117,26 +117,26 @@ inheritance, and child scopes prototypically inherit from their parents.
117117

118118
This example illustrates scopes in application, and prototypical inheritance of properties.
119119

120-
<doc-example>
121-
<doc-source>
122-
<style>
123-
/* remove .doc-example-live in jsfiddle */
124-
.doc-example-live .ng-scope {
125-
border: 1px dashed red;
126-
}
127-
</style>
128-
<script>
129-
function EmployeeController($scope) {
130-
$scope.department = 'Engineering';
131-
$scope.employee = {
132-
name: 'Joe the Manager',
133-
reports: [
134-
{name: 'John Smith'},
135-
{name: 'Mary Run'}
136-
]
137-
};
138-
}
139-
</script>
120+
<example>
121+
<file name="style.css">
122+
/* remove .doc-example-live in jsfiddle */
123+
.doc-example-live .ng-scope {
124+
border: 1px dashed red;
125+
}
126+
</file>
127+
<file name="script.js">
128+
function EmployeeController($scope) {
129+
$scope.department = 'Engineering';
130+
$scope.employee = {
131+
name: 'Joe the Manager',
132+
reports: [
133+
{name: 'John Smith'},
134+
{name: 'Mary Run'}
135+
]
136+
};
137+
}
138+
</file>
139+
<file name="index.html">
140140
<div ng-controller="EmployeeController">
141141
Manager: {{employee.name}} [ {{department}} ]<br>
142142
Reports:
@@ -148,8 +148,8 @@ This example illustrates scopes in application, and prototypical inheritance of
148148
<hr>
149149
{{greeting}}
150150
</div>
151-
</doc-source>
152-
</doc-example>
151+
</file>
152+
</example>
153153

154154
Notice that the Angular automatically places `ng-scope` class on elements where scopes are
155155
attached. The `<style>` definition in this example highlights in red the new scope locations. The
@@ -185,16 +185,16 @@ Scopes can propagate events in similar fashion to DOM events. The event can be {
185185
api/angular.module.ng.$rootScope.Scope#$broadcast broadcasted} to the scope children or {@link
186186
api/angular.module.ng.$rootScope.Scope#$emit emitted} to scope parents.
187187

188-
<doc-example>
189-
<doc-source>
190-
<script>
191-
function EventController($scope) {
192-
$scope.count = 0;
193-
$scope.$on('MyEvent', function() {
194-
$scope.count++;
195-
});
196-
}
197-
</script>
188+
<example>
189+
<file name="script.js">
190+
function EventController($scope) {
191+
$scope.count = 0;
192+
$scope.$on('MyEvent', function() {
193+
$scope.count++;
194+
});
195+
}
196+
</file>
197+
<file name="index.html">
198198
<div ng-controller="EventController">
199199
Root scope <tt>MyEvent</tt> count: {{count}}
200200
<ul>
@@ -211,8 +211,8 @@ api/angular.module.ng.$rootScope.Scope#$emit emitted} to scope parents.
211211
</li>
212212
</ul>
213213
</div>
214-
</doc-source>
215-
</doc-example>
214+
</file>
215+
</example>
216216

217217

218218

0 commit comments

Comments
 (0)