Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-05-22 05:11:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

doc(guide): corrected examples

Browse source
This commit is contained in:
Misko Hevery 2012-05-24 15:29:51 -07:00
parent 7019f142ab
commit 073e76f835
3 changed files with 93 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
docs/content/guide/compiler.ngdoc
View file

@ -66,45 +66,45 @@ to write directives.
Here is a directive which makes any element draggable. Notice the `draggable` attribute on the Here is a directive which makes any element draggable. Notice the `draggable` attribute on the
`<span>` element. `<span>` element.
<doc-example module="drag"> <example module="drag">
<doc-source> <file name="script.js">
<script> angular.module('drag', []).
angular.module('drag', []). directive('draggable', function($document) {
directive('draggable', function($document) { var startX=0, startY=0, x = 0, y = 0;
var startX=0, startY=0, x = 0, y = 0; return function(scope, element, attr) {
return function(scope, element, attr) { element.css({
position: 'relative',
border: '1px solid red',
backgroundColor: 'lightgrey',
cursor: 'pointer'
});
element.bind('mousedown', function(event) {
startX = event.screenX - x;
startY = event.screenY - y;
$document.bind('mousemove', mousemove);
$document.bind('mouseup', mouseup);
});
function mousemove(event) {
y = event.screenY - startY;
x = event.screenX - startX;
element.css({ element.css({
position: 'relative', top: y + 'px',
border: '1px solid red', left: x + 'px'
backgroundColor: 'lightgrey',
cursor: 'pointer'
}); });
element.bind('mousedown', function(event) {
startX = event.screenX - x;
startY = event.screenY - y;
$document.bind('mousemove', mousemove);
$document.bind('mouseup', mouseup);
});
function mousemove(event) {
y = event.screenY - startY;
x = event.screenX - startX;
element.css({
top: y + 'px',
left: x + 'px'
});
}
function mouseup() {
$document.unbind('mousemove', mousemove);
$document.unbind('mouseup', mouseup);
}
} }
});
</script> function mouseup() {
$document.unbind('mousemove', mousemove);
$document.unbind('mouseup', mouseup);
}
}
});
</file>
<file name="index.html">
<span draggable>Drag ME</span> <span draggable>Drag ME</span>
</doc-source> </file>
</doc-example> </file>
The presence of `draggable` attribute an any element gives the element new behavior. The beauty of The presence of `draggable` attribute an any element gives the element new behavior. The beauty of

24
docs/content/guide/overview.ngdoc
View file

@ -75,14 +75,14 @@ concepts which the application developer may face:
* computing new values based on the model. * computing new values based on the model.
* formatting output in a user specific locale. * formatting output in a user specific locale.
<doc-example> <example>
<doc-source> <file name="script.js">
<script> function InvoiceCntl($scope) {
function InvoiceCntl($scope) { $scope.qty = 1;
$scope.qty = 1; $scope.cost = 19.95;
$scope.cost = 19.95; }
} </file>
</script> <file name="index.html">
<div ng-controller="InvoiceCntl"> <div ng-controller="InvoiceCntl">
<b>Invoice:</b> <b>Invoice:</b>
<br> <br>
@ -97,16 +97,16 @@ concepts which the application developer may face:
<hr> <hr>
<b>Total:</b> {{qty * cost | currency}} <b>Total:</b> {{qty * cost | currency}}
</div> </div>
</doc-source> </file>
<doc-scenario> <file name="scenario.js">
it('should show of angular binding', function() { it('should show of angular binding', function() {
expect(binding('qty * cost')).toEqual('$19.95'); expect(binding('qty * cost')).toEqual('$19.95');
input('qty').enter('2'); input('qty').enter('2');
input('cost').enter('5.00'); input('cost').enter('5.00');
expect(binding('qty * cost')).toEqual('$10.00'); expect(binding('qty * cost')).toEqual('$10.00');
}); });
</doc-scenario> </file>
</doc-example> </example>
Try out the Live Preview above, and then let's walk through the example and describe what's going Try out the Live Preview above, and then let's walk through the example and describe what's going
on. on.

92
docs/content/guide/scope.ngdoc
View file

@ -38,17 +38,17 @@ arrangement isolates the controller from the directive as well as from DOM. This
point since it makes the controllers view agnostic, which greatly improves the testing story of point since it makes the controllers view agnostic, which greatly improves the testing story of
the applications. the applications.
<doc-example> <example>
<doc-source> <file name="script.js">
<script> function MyController($scope) {
function MyController($scope) { $scope.username = 'World';
$scope.username = 'World';
$scope.sayHello = function() { $scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.username + '!'; $scope.greeting = 'Hello ' + $scope.username + '!';
}; };
} }
</script> </file>
<file name="index.html">
<div ng-controller="MyController"> <div ng-controller="MyController">
Your name: Your name:
<input type="text" ng-model="username"> <input type="text" ng-model="username">
@ -56,8 +56,8 @@ the applications.
<hr> <hr>
{{greeting}} {{greeting}}
</div> </div>
</doc-source> </file>
</doc-example> </example>
In the above example notice that the `MyController` assigns `World` to the `username` property of In the above example notice that the `MyController` assigns `World` to the `username` property of
the scope. The scope then notifies the `input` of the assignment, which then renders the input 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.
This example illustrates scopes in application, and prototypical inheritance of properties. This example illustrates scopes in application, and prototypical inheritance of properties.
<doc-example> <example>
<doc-source> <file name="style.css">
<style> /* remove .doc-example-live in jsfiddle */
/* remove .doc-example-live in jsfiddle */ .doc-example-live .ng-scope {
.doc-example-live .ng-scope { border: 1px dashed red;
border: 1px dashed red; }
} </file>
</style> <file name="script.js">
<script> function EmployeeController($scope) {
function EmployeeController($scope) { $scope.department = 'Engineering';
$scope.department = 'Engineering'; $scope.employee = {
$scope.employee = { name: 'Joe the Manager',
name: 'Joe the Manager', reports: [
reports: [ {name: 'John Smith'},
{name: 'John Smith'}, {name: 'Mary Run'}
{name: 'Mary Run'} ]
] };
}; }
} </file>
</script> <file name="index.html">
<div ng-controller="EmployeeController"> <div ng-controller="EmployeeController">
Manager: {{employee.name}} [ {{department}} ]<br> Manager: {{employee.name}} [ {{department}} ]<br>
Reports: Reports:
@ -148,8 +148,8 @@ This example illustrates scopes in application, and prototypical inheritance of
<hr> <hr>
{{greeting}} {{greeting}}
</div> </div>
</doc-source> </file>
</doc-example> </example>
Notice that the Angular automatically places `ng-scope` class on elements where scopes are Notice that the Angular automatically places `ng-scope` class on elements where scopes are
attached. The `<style>` definition in this example highlights in red the new scope locations. The 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 {
api/angular.module.ng.$rootScope.Scope#$broadcast broadcasted} to the scope children or {@link api/angular.module.ng.$rootScope.Scope#$broadcast broadcasted} to the scope children or {@link
api/angular.module.ng.$rootScope.Scope#$emit emitted} to scope parents. api/angular.module.ng.$rootScope.Scope#$emit emitted} to scope parents.
<doc-example> <example>
<doc-source> <file name="script.js">
<script> function EventController($scope) {
function EventController($scope) { $scope.count = 0;
$scope.count = 0; $scope.$on('MyEvent', function() {
$scope.$on('MyEvent', function() { $scope.count++;
$scope.count++; });
}); }
} </file>
</script> <file name="index.html">
<div ng-controller="EventController"> <div ng-controller="EventController">
Root scope <tt>MyEvent</tt> count: {{count}} Root scope <tt>MyEvent</tt> count: {{count}}
<ul> <ul>
@ -211,8 +211,8 @@ api/angular.module.ng.$rootScope.Scope#$emit emitted} to scope parents.
</li> </li>
</ul> </ul>
</div> </div>
</doc-source> </file>
</doc-example> </example>