From f7fad29fd99cabdbb17fa02dc214de2354f93cdf Mon Sep 17 00:00:00 2001 From: Caitlin Potter Date: Sat, 15 Feb 2014 20:19:10 -0500 Subject: docs(bike-shed-migration): convert guide examples to ... This CL also contains style fixes as the converted scripts caused jshint to complain. --- .../guide/dev_guide.services.$location.ngdoc | 212 +++++----- .../dev_guide.services.injecting_controllers.ngdoc | 140 +++---- docs/content/guide/expression.ngdoc | 159 ++++---- docs/content/guide/filter.ngdoc | 120 +++--- docs/content/guide/forms.ngdoc | 430 ++++++++++----------- docs/content/guide/ie.ngdoc | 6 +- docs/content/guide/module.ngdoc | 111 +++--- 7 files changed, 591 insertions(+), 587 deletions(-) (limited to 'docs/content') diff --git a/docs/content/guide/dev_guide.services.$location.ngdoc b/docs/content/guide/dev_guide.services.$location.ngdoc index b3abd377..1d2b0e82 100644 --- a/docs/content/guide/dev_guide.services.$location.ngdoc +++ b/docs/content/guide/dev_guide.services.$location.ngdoc @@ -387,120 +387,116 @@ redirect to regular / hashbang url, as this conversion happens only during parsi = on page reload. In this examples we use `` - - - -
-
-

Browser with History API

-


- $location.protocol() = {{$location.protocol()}}
- $location.host() = {{$location.host()}}
- $location.port() = {{$location.port()}}
- $location.path() = {{$location.path()}}
- $location.search() = {{$location.search()}}
- $location.hash() = {{$location.hash()}}
- /base/first?a=b | - sec/ond?flag#hash | - external -
- -
-

Browser without History API

-


- $location.protocol() = {{$location.protocol()}}
- $location.host() = {{$location.host()}}
- $location.port() = {{$location.port()}}
- $location.path() = {{$location.path()}}
- $location.search() = {{$location.search()}}
- $location.hash() = {{$location.hash()}}
- /base/first?a=b | - sec/ond?flag#hash | - external -
-
- - - - - + initEnv('html5'); + initEnv('hashbang'); + + # Caveats diff --git a/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc b/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc index c06322fd..f3a6dbc9 100644 --- a/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc +++ b/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc @@ -28,45 +28,46 @@ function myController($loc, $log) { myController.$inject = ['$location', '$log']; ``` - - - - -
-

Let's try this simple notify service, injected into the controller...

- - -

(you have to click 3 times to see an alert)

-
- - - it('should test service', function() { - expect(element(by.id('simple')).element(by.model('message')).getAttribute('value')) - .toEqual('test'); - }); - - + + +
+

Let's try this simple notify service, injected into the controller...

+ + +

(you have to click 3 times to see an alert)

+
+ + + + angular. + module('MyServiceModule', []). + factory('notify', ['$window', function(win) { + var msgs = []; + return function(msg) { + msgs.push(msg); + if (msgs.length == 3) { + win.alert(msgs.join("\n")); + msgs = []; + } + }; + }]); + + function myController(scope, notifyService) { + scope.callNotify = function(msg) { + notifyService(msg); + }; + } + + myController.$inject = ['$scope','notify']; + + + + it('should test service', function() { + expect(element(by.id('simple')).element(by.model('message')).getAttribute('value')) + .toEqual('test'); + }); + + ## Implicit Dependency Injection @@ -74,36 +75,37 @@ A new feature of Angular DI allows it to determine the dependency from the name Let's rewrite the above example to show the use of this implicit dependency injection of `$window`, `$scope`, and our `notify` service: - - - -
-

Let's try the notify service, that is implicitly injected into the controller...

- - -

(you have to click 3 times to see an alert)

-
- - + + +
+

Let's try the notify service, that is implicitly injected into the controller...

+ + +

(you have to click 3 times to see an alert)

+
+ + + + angular. + module('MyServiceModuleDI', []). + factory('notify', function($window) { + var msgs = []; + return function(msg) { + msgs.push(msg); + if (msgs.length == 3) { + $window.alert(msgs.join("\n")); + msgs = []; + } + }; + }); + + function myController($scope, notify) { + $scope.callNotify = function(msg) { + notify(msg); + }; + } + + However, if you plan to [minify](http://en.wikipedia.org/wiki/Minification_(programming)) your code, your variable names will get renamed in which case you will still need to explicitly specify diff --git a/docs/content/guide/expression.ngdoc b/docs/content/guide/expression.ngdoc index b0d6c836..5aa05236 100644 --- a/docs/content/guide/expression.ngdoc +++ b/docs/content/guide/expression.ngdoc @@ -33,55 +33,58 @@ controller method and call the method. If you want to `eval()` an angular expres JavaScript, use the {@link ng.$rootScope.Scope#methods_$eval `$eval()`} method. ## Example - - - 1+2={{1+2}} - - - it('should calculate expression in binding', function() { - expect(element(by.binding('1+2')).getText()).toEqual('1+2=3'); - }); - - + + + 1+2={{1+2}} + + + + it('should calculate expression in binding', function() { + expect(element(by.binding('1+2')).getText()).toEqual('1+2=3'); + }); + + You can try evaluating different expressions here: - - - -
- Expression: - - -
    -
  • - [ X ] - {{expr}} => -
    • -
-
- - - it('should allow user expression testing', function() { - element(by.css('.expressions button')).click(); - var lis = element(by.css('.expressions ul')).element.all(by.repeater('expr in exprs')); - expect(lis.count()).toBe(1); - expect(lis.get(0).getText()).toEqual('[ X ] 3*10|currency => $30.00'); - }); - - + }; + + $scope.removeExp = function(index) { + exprs.splice(index, 1); + }; + } + + + + it('should allow user expression testing', function() { + element(by.css('.expressions button')).click(); + var lis = element(by.css('.expressions ul')).element.all(by.repeater('expr in exprs')); + expect(lis.count()).toBe(1); + expect(lis.get(0).getText()).toEqual('[ X ] 3*10|currency => $30.00'); + }); + + # Property Evaluation @@ -92,38 +95,40 @@ to global window properties, Angular expressions have to use {@link ng.$window defined on `window`, in an expression you must use `$window.alert()`. This is done intentionally to prevent accidental access to the global state (a common source of subtle bugs). - - - -
- Name: - -
- - - it('should calculate expression in binding', function() { - if (browser.params.browser = 'safari') { - // Safari can't handle dialogs. - return; - }; - element(by.css('[ng-click="greet()"]')).click(); - - var alertDialog = browser.switchTo().alert(); - - expect(alertDialog.getText()).toEqual('Hello World'); - - alertDialog.accept(); - }); - - + + +
+ Name: + +
+ + + + function Cntl1($window, $scope){ + $scope.name = 'World'; + + $scope.greet = function() { + $window.alert('Hello ' + $scope.name); + }; + } + + + + it('should calculate expression in binding', function() { + if (browser.params.browser == 'safari') { + // Safari can't handle dialogs. + return; + } + element(by.css('[ng-click="greet()"]')).click(); + + var alertDialog = browser.switchTo().alert(); + + expect(alertDialog.getText()).toEqual('Hello World'); + + alertDialog.accept(); + }); + + ## Forgiving diff --git a/docs/content/guide/filter.ngdoc b/docs/content/guide/filter.ngdoc index 4bcde01f..a3b43ac7 100644 --- a/docs/content/guide/filter.ngdoc +++ b/docs/content/guide/filter.ngdoc @@ -47,35 +47,35 @@ The example below therefore calls the filter directly in the controller. By this, the controller is able to call the filter only when needed (e.g. when the data is loaded from the backend or the filter expression is changed). - - - - -
-
- All entries: - {{entry.name}} -
-
- Entries that contain an "a": - {{entry.name}} -
-
- - + + +
+
+ All entries: + {{entry.name}} +
+
+ Entries that contain an "a": + {{entry.name}} +
+
+ + + + angular.module('FilterInControllerModule', []). + controller('FilterController', ['filterFilter', function(filterFilter) { + this.array = [ + {name: 'Tobias'}, + {name: 'Jeff'}, + {name: 'Brian'}, + {name: 'Igor'}, + {name: 'James'}, + {name: 'Brad'} + ]; + this.filteredArray = filterFilter(this.array, 'a'); + }]); + + ## Creating custom filters @@ -89,37 +89,37 @@ function. The following sample filter reverses a text string. In addition, it conditionally makes the text upper-case. - - - - -
-
- No filter: {{greeting}}
- Reverse: {{greeting|reverse}}
- Reverse + uppercase: {{greeting|reverse:true}}
-
- - + + +
+
+ No filter: {{greeting}}
+ Reverse: {{greeting|reverse}}
+ Reverse + uppercase: {{greeting|reverse:true}}
+
+ + + + angular.module('MyReverseModule', []). + filter('reverse', function() { + return function(input, uppercase) { + var out = ""; + for (var i = 0; i < input.length; i++) { + out = input.charAt(i) + out; + } + // conditional based on optional argument + if (uppercase) { + out = out.toUpperCase(); + } + return out; + }; + }); + + function Ctrl($scope) { + $scope.greeting = 'hello'; + } + + ## Testing custom filters diff --git a/docs/content/guide/forms.ngdoc b/docs/content/guide/forms.ngdoc index 2ef5e218..8a23c8c8 100644 --- a/docs/content/guide/forms.ngdoc +++ b/docs/content/guide/forms.ngdoc @@ -16,38 +16,38 @@ The key directive in understanding two-way data-binding is {@link ng.directive:n The `ngModel` directive provides the two-way data-binding by synchronizing the model to the view, as well as view to the model. In addition it provides an {@link ngModel.NgModelController API} for other directives to augment its behavior. - - -
-
- Name:
- E-mail:
- Gender: male - female
- - -
- 
form = {{user | json}}
- 
master = {{master | json}}
-
- - - - + + +
+
+ Name:
+ E-mail:
+ Gender: male + female
+ + +
+ 
form = {{user | json}}
+ 
master = {{master | json}}
+
+ + + + Note that `novalidate` is used to disable browser's native form validation. @@ -67,47 +67,47 @@ The following example uses the CSS to display validity of each form control. In the example both `user.name` and `user.email` are required, but are rendered with red background only when they are dirty. This ensures that the user is not distracted with an error until after interacting with the control, and failing to satisfy its validity. - - -
-
- Name: -
- E-mail:
- Gender: male - female
- - -
-
- - - - - - + + +
+
+ Name: +
+ E-mail:
+ Gender: male + female
+ + +
+
+ + + + + + @@ -130,54 +130,54 @@ This allows us to extend the above example with these features: - SAVE button is enabled only if form has some changes and is valid - custom error messages for `user.email` and `user.agree` - - -
-
- Name: -
- E-mail: -
-
Invalid: - Tell us your email. - This is not a valid email. + + +
+ + Name: +
+ E-mail: +
+
Invalid: + Tell us your email. + This is not a valid email. +
+ + Gender: male + female
+ + + I agree:
+
Please agree and sign.
+ + + +
+ - Gender: male - female
- - - I agree:
-
Please agree and sign.
- - - - -
+ + function Controller($scope) { + $scope.master = {}; - - - + $scope.reset(); + } + + @@ -209,72 +209,72 @@ In the following example we create two directives. Note that we can't use input type `number` here as HTML5 browsers would not allow the user to type what it would consider an invalid number such as `1,2`. - - -
-
-
- Size (integer 0 - 10): - {{size}}
- This is not valid integer! - - The value must be in range 0 to 10! -
- -
- Length (float): - - {{length}}
- - This is not a valid float number! + + +
+ +
+ Size (integer 0 - 10): + {{size}}
+ This is not valid integer! + + The value must be in range 0 to 10! +
+ +
+ Length (float): + + {{length}}
+ + This is not a valid float number! +
+
- -
- - - - + + + + var app = angular.module('form-example1', []); + + var INTEGER_REGEXP = /^\-?\d+$/; + app.directive('integer', function() { + return { + require: 'ngModel', + link: function(scope, elm, attrs, ctrl) { + ctrl.$parsers.unshift(function(viewValue) { + if (INTEGER_REGEXP.test(viewValue)) { + // it is valid + ctrl.$setValidity('integer', true); + return viewValue; + } else { + // it is invalid, return undefined (no model update) + ctrl.$setValidity('integer', false); + return undefined; + } + }); + } + }; + }); + + var FLOAT_REGEXP = /^\-?\d+((\.|\,)\d+)?$/; + app.directive('smartFloat', function() { + return { + require: 'ngModel', + link: function(scope, elm, attrs, ctrl) { + ctrl.$parsers.unshift(function(viewValue) { + if (FLOAT_REGEXP.test(viewValue)) { + ctrl.$setValidity('float', true); + return parseFloat(viewValue.replace(',', '.')); + } else { + ctrl.$setValidity('float', false); + return undefined; + } + }); + } + }; + }); + + # Implementing custom form controls (using `ngModel`) @@ -290,40 +290,40 @@ See {@link guide/directive $compileProvider.directive} for more info. The following example shows how to add two-way data-binding to contentEditable elements. - - - - -
Some
-
model = {{content}}
- - - - + + + + + angular.module('form-example2', []).directive('contenteditable', function() { + return { + require: 'ngModel', + link: function(scope, elm, attrs, ctrl) { + // view -> model + elm.on('blur', function() { + scope.$apply(function() { + ctrl.$setViewValue(elm.html()); + }); + }); + + // model -> view + ctrl.$render = function() { + elm.html(ctrl.$viewValue); + }; + + // load init value from DOM + ctrl.$setViewValue(elm.html()); + } + }; + }); + + diff --git a/docs/content/guide/ie.ngdoc b/docs/content/guide/ie.ngdoc index d66fd0b4..f4e442b7 100644 --- a/docs/content/guide/ie.ngdoc +++ b/docs/content/guide/ie.ngdoc @@ -27,7 +27,7 @@ To make your Angular application work on IE please make sure that: [JSON2](https://github.com/douglascrockford/JSON-js) or [JSON3](http://bestiejs.github.com/json3/) polyfills for this. - ```html + ```html @@ -43,7 +43,7 @@ To make your Angular application work on IE please make sure that: 2. add `id="ng-app"` to the root element in conjunction with `ng-app` attribute - ```html + ```html ... @@ -55,7 +55,7 @@ To make your Angular application work on IE please make sure that: 4. if you **do use** custom element tags, then you must take these steps to make IE 8 and below happy: - ```html + ```html diff --git a/docs/content/guide/module.ngdoc b/docs/content/guide/module.ngdoc index ad5fde13..747209c2 100644 --- a/docs/content/guide/module.ngdoc +++ b/docs/content/guide/module.ngdoc @@ -26,26 +26,26 @@ Important things to notice: * Notice the reference to the `myApp` module in the ``, it is what bootstraps the app using your module. - - - + +
{{ 'World' | greet }}
- - + + + + // declare a module + var myAppModule = angular.module('myApp', []); + + // configure the module. + // in this example we will create a greeting filter + myAppModule.filter('greet', function() { + return function(name) { + return 'Hello, ' + name + '!'; + }; + }); + + @@ -67,49 +67,50 @@ that are relevant to tests. The above is only a suggestion, so feel free to tailor it to your needs. - - - -
- {{ greeting }}! -
- - + // A Controller for your app + var XmplController = function($scope, greeter, user) { + $scope.greeting = greeter.greet(user.name); + }; + + -- cgit v1.2.3