X Tutup
Skip to content

Commit f7fad29

Browse files
caitppetebacondarwin
caitp
authored and
petebacondarwin
committed
docs(bike-shed-migration): convert guide <doc:...> examples to <example>...
This CL also contains style fixes as the converted scripts caused jshint to complain.
1 parent 896e346 commit f7fad29

File tree

7 files changed

+591
-587
lines changed

7 files changed

+591
-587
lines changed

‎docs/content/guide/dev_guide.services.$location.ngdoc‎

Lines changed: 104 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -387,120 +387,116 @@ redirect to regular / hashbang url, as this conversion happens only during parsi
387387
= on page reload.
388388

389389
In this examples we use `<base href="/base/index.html" />`
390-
<doc:example>
391-
<doc:source source="false">
392-
393-
<div ng-non-bindable class="html5-hashbang-example">
394-
<div id="html5-mode" ng-controller="Html5Cntl">
395-
<h3>Browser with History API</h3>
396-
<div ng-address-bar browser="html5"></div><br><br>
397-
$location.protocol() = {{$location.protocol()}}<br>
398-
$location.host() = {{$location.host()}}<br>
399-
$location.port() = {{$location.port()}}<br>
400-
$location.path() = {{$location.path()}}<br>
401-
$location.search() = {{$location.search()}}<br>
402-
$location.hash() = {{$location.hash()}}<br>
403-
<a href="http://www.example.com/base/first?a=b">/base/first?a=b</a> |
404-
<a href="http://www.example.com/base/sec/ond?flag#hash">sec/ond?flag#hash</a> |
405-
<a href="/other-base/another?search">external</a>
406-
</div>
407-
408-
<div id="hashbang-mode" ng-controller="HashbangCntl">
409-
<h3>Browser without History API</h3>
410-
<div ng-address-bar browser="hashbang"></div><br><br>
411-
$location.protocol() = {{$location.protocol()}}<br>
412-
$location.host() = {{$location.host()}}<br>
413-
$location.port() = {{$location.port()}}<br>
414-
$location.path() = {{$location.path()}}<br>
415-
$location.search() = {{$location.search()}}<br>
416-
$location.hash() = {{$location.hash()}}<br>
417-
<a href="http://www.example.com/base/first?a=b">/base/first?a=b</a> |
418-
<a href="http://www.example.com/base/sec/ond?flag#hash">sec/ond?flag#hash</a> |
419-
<a href="/other-base/another?search">external</a>
420-
</div>
421-
</div>
422-
423-
<script>
424-
function FakeBrowser(initUrl, baseHref) {
425-
this.onUrlChange = function(fn) {
426-
this.urlChange = fn;
427-
};
428-
429-
this.url = function() {
430-
return initUrl;
431-
};
432-
433-
this.defer = function(fn, delay) {
434-
setTimeout(function() { fn(); }, delay || 0);
435-
};
436-
437-
this.baseHref = function() {
438-
return baseHref;
390+
<example>
391+
<file name="index.html">
392+
<div id="html5-mode" ng-controller="Html5Cntl">
393+
<h3>Browser with History API</h3>
394+
<div ng-address-bar browser="html5"></div><br><br>
395+
$location.protocol() = {{$location.protocol()}}<br>
396+
$location.host() = {{$location.host()}}<br>
397+
$location.port() = {{$location.port()}}<br>
398+
$location.path() = {{$location.path()}}<br>
399+
$location.search() = {{$location.search()}}<br>
400+
$location.hash() = {{$location.hash()}}<br>
401+
<a href="http://www.example.com/base/first?a=b">/base/first?a=b</a> |
402+
<a href="http://www.example.com/base/sec/ond?flag#hash">sec/ond?flag#hash</a> |
403+
<a href="/other-base/another?search">external</a>
404+
</div>
405+
406+
<div id="hashbang-mode" ng-controller="HashbangCntl">
407+
<h3>Browser without History API</h3>
408+
<div ng-address-bar browser="hashbang"></div><br><br>
409+
$location.protocol() = {{$location.protocol()}}<br>
410+
$location.host() = {{$location.host()}}<br>
411+
$location.port() = {{$location.port()}}<br>
412+
$location.path() = {{$location.path()}}<br>
413+
$location.search() = {{$location.search()}}<br>
414+
$location.hash() = {{$location.hash()}}<br>
415+
<a href="http://www.example.com/base/first?a=b">/base/first?a=b</a> |
416+
<a href="http://www.example.com/base/sec/ond?flag#hash">sec/ond?flag#hash</a> |
417+
<a href="/other-base/another?search">external</a>
418+
</div>
419+
</file>
420+
421+
<file name="script.js">
422+
function FakeBrowser(initUrl, baseHref) {
423+
this.onUrlChange = function(fn) {
424+
this.urlChange = fn;
425+
};
426+
427+
this.url = function() {
428+
return initUrl;
429+
};
430+
431+
this.defer = function(fn, delay) {
432+
setTimeout(function() { fn(); }, delay || 0);
433+
};
434+
435+
this.baseHref = function() {
436+
return baseHref;
437+
};
438+
439+
this.notifyWhenOutstandingRequests = angular.noop;
440+
}
441+
442+
var browsers = {
443+
html5: new FakeBrowser('http://www.example.com/base/path?a=b#h', '/base/index.html'),
444+
hashbang: new FakeBrowser('http://www.example.com/base/index.html#!/path?a=b#h', '/base/index.html')
439445
};
440446

441-
this.notifyWhenOutstandingRequests = angular.noop;
442-
}
443-
444-
var browsers = {
445-
html5: new FakeBrowser('http://www.example.com/base/path?a=b#h', '/base/index.html'),
446-
hashbang: new FakeBrowser('http://www.example.com/base/index.html#!/path?a=b#h', '/base/index.html')
447-
};
448-
449-
function Html5Cntl($scope, $location) {
450-
$scope.$location = $location;
451-
}
452-
453-
function HashbangCntl($scope, $location) {
454-
$scope.$location = $location;
455-
}
456-
457-
function initEnv(name) {
458-
var root = angular.element(document.getElementById(name + '-mode'));
459-
// We must kill a link to the injector for this element otherwise angular will
460-
// complain that it has been bootstrapped already.
461-
root.data('$injector', null);
462-
angular.bootstrap(root, [function($compileProvider, $locationProvider, $provide){
463-
$locationProvider.html5Mode(true).hashPrefix('!');
464-
465-
$provide.value('$browser', browsers[name]);
466-
$provide.value('$sniffer', {history: name == 'html5'});
467-
468-
$compileProvider.directive('ngAddressBar', function() {
469-
return function(scope, elm, attrs) {
470-
var browser = browsers[attrs.browser],
471-
input = angular.element('<input type="text" style="width: 400px">').val(browser.url()),
472-
delay;
473-
474-
input.on('keypress keyup keydown', function() {
475-
if (!delay) {
476-
delay = setTimeout(fireUrlChange, 250);
447+
function Html5Cntl($scope, $location) {
448+
$scope.$location = $location;
449+
}
450+
451+
function HashbangCntl($scope, $location) {
452+
$scope.$location = $location;
453+
}
454+
455+
function initEnv(name) {
456+
var root = angular.element(document.getElementById(name + '-mode'));
457+
// We must kill a link to the injector for this element otherwise angular will
458+
// complain that it has been bootstrapped already.
459+
root.data('$injector', null);
460+
angular.bootstrap(root, [function($compileProvider, $locationProvider, $provide){
461+
$locationProvider.html5Mode(true).hashPrefix('!');
462+
463+
$provide.value('$browser', browsers[name]);
464+
$provide.value('$sniffer', {history: name == 'html5'});
465+
466+
$compileProvider.directive('ngAddressBar', function() {
467+
return function(scope, elm, attrs) {
468+
var browser = browsers[attrs.browser],
469+
input = angular.element('<input type="text" style="width: 400px">').val(browser.url()),
470+
delay;
471+
472+
input.on('keypress keyup keydown', function() {
473+
if (!delay) {
474+
delay = setTimeout(fireUrlChange, 250);
475+
}
476+
});
477+
478+
browser.url = function(url) {
479+
return input.val(url);
480+
};
481+
482+
elm.append('Address: ').append(input);
483+
484+
function fireUrlChange() {
485+
delay = null;
486+
browser.urlChange(input.val());
477487
}
478-
});
479-
480-
browser.url = function(url) {
481-
return input.val(url);
482488
};
483-
484-
elm.append('Address: ').append(input);
485-
486-
function fireUrlChange() {
487-
delay = null;
488-
browser.urlChange(input.val());
489-
}
490-
};
489+
});
490+
}]);
491+
root.on('click', function(e) {
492+
e.stopPropagation();
491493
});
492-
}]);
493-
root.on('click', function(e) {
494-
e.stopPropagation();
495-
});
496-
}
494+
}
497495

498-
initEnv('html5');
499-
initEnv('hashbang');
500-
</script>
501-
502-
</doc:source>
503-
</doc:example>
496+
initEnv('html5');
497+
initEnv('hashbang');
498+
</file>
499+
</example>
504500

505501

506502
# Caveats

‎docs/content/guide/dev_guide.services.injecting_controllers.ngdoc‎

Lines changed: 71 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -28,82 +28,84 @@ function myController($loc, $log) {
2828
myController.$inject = ['$location', '$log'];
2929
```
3030

31-
<doc:example module="MyServiceModule">
32-
<doc:source>
33-
<script>
34-
angular.
35-
module('MyServiceModule', []).
36-
factory('notify', ['$window', function(win) {
37-
var msgs = [];
38-
return function(msg) {
39-
msgs.push(msg);
40-
if (msgs.length == 3) {
41-
win.alert(msgs.join("\n"));
42-
msgs = [];
43-
}
44-
};
45-
}]);
46-
47-
function myController(scope, notifyService) {
48-
scope.callNotify = function(msg) {
49-
notifyService(msg);
50-
};
51-
}
52-
53-
myController.$inject = ['$scope','notify'];
54-
</script>
55-
56-
<div id="simple" ng-controller="myController">
57-
<p>Let's try this simple notify service, injected into the controller...</p>
58-
<input ng-init="message='test'" ng-model="message" >
59-
<button ng-click="callNotify(message);">NOTIFY</button>
60-
<p>(you have to click 3 times to see an alert)</p>
61-
</div>
62-
</doc:source>
63-
<doc:protractor>
64-
it('should test service', function() {
65-
expect(element(by.id('simple')).element(by.model('message')).getAttribute('value'))
66-
.toEqual('test');
67-
});
68-
</doc:protractor>
69-
</doc:example>
31+
<example module="MyServiceModule">
32+
<file name="index.html">
33+
<div id="simple" ng-controller="myController">
34+
<p>Let's try this simple notify service, injected into the controller...</p>
35+
<input ng-init="message='test'" ng-model="message" >
36+
<button ng-click="callNotify(message);">NOTIFY</button>
37+
<p>(you have to click 3 times to see an alert)</p>
38+
</div>
39+
</file>
40+
41+
<file name="script.js">
42+
angular.
43+
module('MyServiceModule', []).
44+
factory('notify', ['$window', function(win) {
45+
var msgs = [];
46+
return function(msg) {
47+
msgs.push(msg);
48+
if (msgs.length == 3) {
49+
win.alert(msgs.join("\n"));
50+
msgs = [];
51+
}
52+
};
53+
}]);
54+
55+
function myController(scope, notifyService) {
56+
scope.callNotify = function(msg) {
57+
notifyService(msg);
58+
};
59+
}
60+
61+
myController.$inject = ['$scope','notify'];
62+
</file>
63+
64+
<file name="protractor.js" type="protractor">
65+
it('should test service', function() {
66+
expect(element(by.id('simple')).element(by.model('message')).getAttribute('value'))
67+
.toEqual('test');
68+
});
69+
</file>
70+
</example>
7071

7172
## Implicit Dependency Injection
7273

7374
A new feature of Angular DI allows it to determine the dependency from the name of the parameter.
7475
Let's rewrite the above example to show the use of this implicit dependency injection of
7576
`$window`, `$scope`, and our `notify` service:
7677

77-
<doc:example module="MyServiceModuleDI">
78-
<doc:source>
79-
<script>
80-
angular.
81-
module('MyServiceModuleDI', []).
82-
factory('notify', function($window) {
83-
var msgs = [];
84-
return function(msg) {
85-
msgs.push(msg);
86-
if (msgs.length == 3) {
87-
$window.alert(msgs.join("\n"));
88-
msgs = [];
89-
}
90-
};
91-
});
92-
93-
function myController($scope, notify) {
94-
$scope.callNotify = function(msg) {
95-
notify(msg);
96-
};
97-
}
98-
</script>
99-
<div id="implicit" ng-controller="myController">
100-
<p>Let's try the notify service, that is implicitly injected into the controller...</p>
101-
<input ng-init="message='test'" ng-model="message">
102-
<button ng-click="callNotify(message);">NOTIFY</button>
103-
<p>(you have to click 3 times to see an alert)</p>
104-
</div>
105-
</doc:source>
106-
</doc:example>
78+
<example module="MyServiceModuleDI">
79+
<file name="index.html">
80+
<div id="implicit" ng-controller="myController">
81+
<p>Let's try the notify service, that is implicitly injected into the controller...</p>
82+
<input ng-init="message='test'" ng-model="message">
83+
<button ng-click="callNotify(message);">NOTIFY</button>
84+
<p>(you have to click 3 times to see an alert)</p>
85+
</div>
86+
</file>
87+
88+
<file name="script.js">
89+
angular.
90+
module('MyServiceModuleDI', []).
91+
factory('notify', function($window) {
92+
var msgs = [];
93+
return function(msg) {
94+
msgs.push(msg);
95+
if (msgs.length == 3) {
96+
$window.alert(msgs.join("\n"));
97+
msgs = [];
98+
}
99+
};
100+
});
101+
102+
function myController($scope, notify) {
103+
$scope.callNotify = function(msg) {
104+
notify(msg);
105+
};
106+
}
107+
</file>
108+
</example>
107109

108110
However, if you plan to [minify](http://en.wikipedia.org/wiki/Minification_(programming)) your
109111
code, your variable names will get renamed in which case you will still need to explicitly specify

0 commit comments

Comments
 (0)
X Tutup