diff options
| -rw-r--r-- | docs/content/guide/compiler.ngdoc | 70 | ||||
| -rw-r--r-- | docs/content/guide/overview.ngdoc | 24 | ||||
| -rw-r--r-- | docs/content/guide/scope.ngdoc | 94 |
3 files changed, 94 insertions, 94 deletions
diff --git a/docs/content/guide/compiler.ngdoc b/docs/content/guide/compiler.ngdoc index d854ea37..493b611f 100644 --- a/docs/content/guide/compiler.ngdoc +++ b/docs/content/guide/compiler.ngdoc @@ -66,45 +66,45 @@ to write directives. Here is a directive which makes any element draggable. Notice the `draggable` attribute on the `<span>` element. -<doc-example module="drag"> - <doc-source> - <script> - angular.module('drag', []). - directive('draggable', function($document) { - var startX=0, startY=0, x = 0, y = 0; - return function(scope, element, attr) { +<example module="drag"> + <file name="script.js"> + angular.module('drag', []). + directive('draggable', function($document) { + var startX=0, startY=0, x = 0, y = 0; + 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({ - position: 'relative', - border: '1px solid red', - backgroundColor: 'lightgrey', - cursor: 'pointer' + top: y + 'px', + left: x + 'px' }); - 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> - </doc-source> -</doc-example> + </file> +</file> The presence of `draggable` attribute an any element gives the element new behavior. The beauty of diff --git a/docs/content/guide/overview.ngdoc b/docs/content/guide/overview.ngdoc index afd314b7..71eb90e9 100644 --- a/docs/content/guide/overview.ngdoc +++ b/docs/content/guide/overview.ngdoc @@ -75,14 +75,14 @@ concepts which the application developer may face: * computing new values based on the model. * formatting output in a user specific locale. -<doc-example> - <doc-source> - <script> - function InvoiceCntl($scope) { - $scope.qty = 1; - $scope.cost = 19.95; - } - </script> +<example> + <file name="script.js"> + function InvoiceCntl($scope) { + $scope.qty = 1; + $scope.cost = 19.95; + } + </file> + <file name="index.html"> <div ng-controller="InvoiceCntl"> <b>Invoice:</b> <br> @@ -97,16 +97,16 @@ concepts which the application developer may face: <hr> <b>Total:</b> {{qty * cost | currency}} </div> - </doc-source> - <doc-scenario> + </file> + <file name="scenario.js"> it('should show of angular binding', function() { expect(binding('qty * cost')).toEqual('$19.95'); input('qty').enter('2'); input('cost').enter('5.00'); expect(binding('qty * cost')).toEqual('$10.00'); }); - </doc-scenario> -</doc-example> + </file> +</example> Try out the Live Preview above, and then let's walk through the example and describe what's going on. diff --git a/docs/content/guide/scope.ngdoc b/docs/content/guide/scope.ngdoc index 4d104b8c..dac69d8a 100644 --- a/docs/content/guide/scope.ngdoc +++ b/docs/content/guide/scope.ngdoc @@ -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 the applications. -<doc-example> - <doc-source> - <script> - function MyController($scope) { - $scope.username = 'World'; - - $scope.sayHello = function() { - $scope.greeting = 'Hello ' + $scope.username + '!'; - }; - } - </script> +<example> + <file name="script.js"> + function MyController($scope) { + $scope.username = 'World'; + + $scope.sayHello = function() { + $scope.greeting = 'Hello ' + $scope.username + '!'; + }; + } + </file> + <file name="index.html"> <div ng-controller="MyController"> Your name: <input type="text" ng-model="username"> @@ -56,8 +56,8 @@ the applications. <hr> {{greeting}} </div> - </doc-source> -</doc-example> + </file> +</example> 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 @@ -117,26 +117,26 @@ inheritance, and child scopes prototypically inherit from their parents. This example illustrates scopes in application, and prototypical inheritance of properties. -<doc-example> - <doc-source> - <style> - /* remove .doc-example-live in jsfiddle */ - .doc-example-live .ng-scope { - border: 1px dashed red; - } - </style> - <script> - function EmployeeController($scope) { - $scope.department = 'Engineering'; - $scope.employee = { - name: 'Joe the Manager', - reports: [ - {name: 'John Smith'}, - {name: 'Mary Run'} - ] - }; - } - </script> +<example> + <file name="style.css"> + /* remove .doc-example-live in jsfiddle */ + .doc-example-live .ng-scope { + border: 1px dashed red; + } + </file> + <file name="script.js"> + function EmployeeController($scope) { + $scope.department = 'Engineering'; + $scope.employee = { + name: 'Joe the Manager', + reports: [ + {name: 'John Smith'}, + {name: 'Mary Run'} + ] + }; + } + </file> + <file name="index.html"> <div ng-controller="EmployeeController"> Manager: {{employee.name}} [ {{department}} ]<br> Reports: @@ -148,8 +148,8 @@ This example illustrates scopes in application, and prototypical inheritance of <hr> {{greeting}} </div> - </doc-source> -</doc-example> + </file> +</example> 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 @@ -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#$emit emitted} to scope parents. -<doc-example> - <doc-source> - <script> - function EventController($scope) { - $scope.count = 0; - $scope.$on('MyEvent', function() { - $scope.count++; - }); - } - </script> +<example> + <file name="script.js"> + function EventController($scope) { + $scope.count = 0; + $scope.$on('MyEvent', function() { + $scope.count++; + }); + } + </file> + <file name="index.html"> <div ng-controller="EventController"> Root scope <tt>MyEvent</tt> count: {{count}} <ul> @@ -211,8 +211,8 @@ api/angular.module.ng.$rootScope.Scope#$emit emitted} to scope parents. </li> </ul> </div> - </doc-source> -</doc-example> + </file> +</example> |