Skip to content

Commit f7d28cd

Browse files
caitppetebacondarwin
caitp
authored and
petebacondarwin
committed
docs(all): convert <pre>/</pre> snippets to GFM snippets
1 parent 2e641ac commit f7d28cd

54 files changed

Lines changed: 594 additions & 516 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/content/guide/animations.ngdoc‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,11 @@ You may also want to setup a separate CSS file for defining CSS-based animations
6464
Animations in AngularJS are completely based on CSS classes. As long as you have a CSS class attached to a HTML element within
6565
your website, you can apply animations to it. Lets say for example that we have an HTML template with a repeater in it like so:
6666

67-
<pre>
67+
```html
6868
<div ng-repeat="item in items" class="repeated-item">
6969
{{ item.id }}
7070
</div>
71-
</pre>
71+
```
7272

7373
As you can see, the `.repeated-item` class is present on the element that will be repeated and this class will be
7474
used as a reference within our application's CSS and/or JavaScript animation code to tell AngularJS to perform an animation.
@@ -80,13 +80,13 @@ it will apply a `ng-move` class name.
8080
Taking a look at the following CSS code, we can see some transition and keyframe animation code set for each of those events that
8181
occur when ngRepeat triggers them:
8282

83-
<pre>
84-
&#47;&#42;
83+
```css
84+
/*
8585
We're using CSS transitions for when
8686
the enter and move events are triggered
8787
for the element that has the .repeated-item
8888
class
89-
&#42;&#47;
89+
*/
9090
.repeated-item.ng-enter, .repeated-item.ng-move {
9191
-webkit-transition:0.5s linear all;
9292
-moz-transition:0.5s linear all;
@@ -95,57 +95,57 @@ occur when ngRepeat triggers them:
9595
opacity:0;
9696
}
9797

98-
&#47;&#42;
98+
/*
9999
The ng-enter-active and ng-move-active
100100
are where the transition destination properties
101101
are set so that the animation knows what to
102102
animate.
103-
&#42;&#47;
103+
*/
104104
.repeated-item.ng-enter.ng-enter-active,
105105
.repeated-item.ng-move.ng-move-active {
106106
opacity:1;
107107
}
108108

109-
&#47;&#42;
109+
/*
110110
We're using CSS keyframe animations for when
111111
the leave event is triggered for the element
112112
that has the .repeated-item class
113-
&#42;&#47;
113+
*/
114114
.repeated-item.ng-leave {
115115
-webkit-animation:0.5s my_animation;
116116
-moz-animation:0.5s my_animation;
117117
-o-animation:0.5s my_animation;
118118
animation:0.5s my_animation;
119119
}
120120

121-
&#64;keyframes my_animation {
121+
@keyframes my_animation {
122122
from { opacity:1; }
123123
to { opacity:0; }
124124
}
125125

126-
&#47;&#42;
126+
/*
127127
Unfortunately each browser vendor requires
128128
its own definition of keyframe animation code...
129-
&#42;&#47;
130-
&#64;-webkit-keyframes my_animation {
129+
*/
130+
@-webkit-keyframes my_animation {
131131
from { opacity:1; }
132132
to { opacity:0; }
133133
}
134134

135-
&#64;-moz-keyframes my_animation {
135+
@-moz-keyframes my_animation {
136136
from { opacity:1; }
137137
to { opacity:0; }
138138
}
139139

140-
&#64;-o-keyframes my_animation {
140+
@-o-keyframes my_animation {
141141
from { opacity:1; }
142142
to { opacity:0; }
143143
}
144-
</pre>
144+
```
145145

146146
The same approach to animation can be used using JavaScript code (**jQuery is used within to perform animations**):
147147

148-
<pre>
148+
```js
149149
myModule.animation('.repeated-item', function() {
150150
return {
151151
enter : function(element, done) {
@@ -199,7 +199,7 @@ myModule.animation('.repeated-item', function() {
199199
removeClass : function(element, className, done) {}
200200
}
201201
});
202-
</pre>
202+
```
203203

204204
With these generated CSS class names present on the element at the time, AngularJS automatically
205205
figures out whether to perform a CSS and/or JavaScript animation. If both CSS and JavaScript animation
@@ -268,7 +268,7 @@ For a full breakdown of the steps involved during each animation event, refer to
268268
Animations within custom directives can also be established by injecting `$animate` directly into your directive and
269269
making calls to it when needed.
270270

271-
<pre>
271+
```js
272272
myModule.directive('my-directive', ['$animate', function($animate) {
273273
return function(element, scope, attrs) {
274274
element.bind('click', function() {
@@ -280,7 +280,7 @@ myModule.directive('my-directive', ['$animate', function($animate) {
280280
});
281281
};
282282
}]);
283-
</pre>
283+
```
284284

285285
## More about animations
286286

‎docs/content/guide/bootstrap.ngdoc‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@ This example shows the recommended path for integrating Angular with what we cal
1313
initialization.
1414

1515

16-
<pre>
16+
```html
1717
<!doctype html>
1818
<html xmlns:ng="http://angularjs.org" ng-app>
1919
<body>
2020
...
2121
<script src="angular.js">
2222
</body>
2323
</html>
24-
</pre>
24+
```
2525

2626
* Place the `script` tag at the bottom of the page. Placing script tags at the end of the page
2727
improves app load time because the HTML loading is not blocked by loading of the `angular.js`
@@ -65,15 +65,15 @@ If the {@link api/ng.directive:ngApp `ng-app`} directive is found then Angular w
6565
portion of the DOM as an Angular application.
6666

6767

68-
<pre>
68+
```html
6969
<!doctype html>
7070
<html ng-app="optionalModuleName">
7171
<body>
7272
I can add: {{ 1+2 }}.
7373
<script src="angular.js"></script>
7474
</body>
7575
</html>
76-
</pre>
76+
```
7777

7878

7979

@@ -86,7 +86,7 @@ or the need to perform an operation before Angular compiles a page.
8686

8787
Here is an example of manually initializing Angular:
8888

89-
<pre>
89+
```html
9090
<!doctype html>
9191
<html xmlns:ng="http://angularjs.org">
9292
<body>
@@ -100,7 +100,7 @@ Here is an example of manually initializing Angular:
100100
</script>
101101
</body>
102102
</html>
103-
</pre>
103+
```
104104

105105
Note that we have provided the name of our application module to be loaded into the injector as the second
106106
parameter of the {@link api/angular.bootstrap} function. Notice that `angular.bootstrap` will not create modules

‎docs/content/guide/compiler.ngdoc‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -60,12 +60,12 @@ during the compilation process. The directives can be placed in element names, a
6060
names, as well as comments. Here are some equivalent examples of invoking the {@link
6161
api/ng.directive:ngBind `ng-bind`} directive.
6262

63-
<pre>
63+
```html
6464
<span ng-bind="exp"></span>
6565
<span class="ng-bind: exp;"></span>
6666
<ng-bind></ng-bind>
6767
<!-- directive: ng-bind exp -->
68-
</pre>
68+
```
6969

7070
A directive is just a function which executes when the compiler encounters it in the DOM. See {@link
7171
api/ng.$compileProvider#methods_directive directive API} for in-depth documentation on how
@@ -187,7 +187,7 @@ a model on the compiled scope will be reflected in the DOM.
187187
Below is the corresponding code using the `$compile` service.
188188
This should help give you an idea of what Angular does internally.
189189

190-
<pre>
190+
```js
191191
var $compile = ...; // injected into your code
192192
var scope = ...;
193193
var parent = ...; // DOM element where the compiled template can be appended
@@ -205,7 +205,7 @@ This should help give you an idea of what Angular does internally.
205205

206206
// Step 4: Append to DOM (optional)
207207
parent.appendChild(element);
208-
</pre>
208+
```
209209

210210
### The difference between Compile and Link
211211

@@ -229,14 +229,14 @@ moved to the compile function for performance reasons.
229229

230230
To understand, let's look at a real-world example with `ngRepeat`:
231231

232-
<pre>
232+
```html
233233
Hello {{user}}, you have these actions:
234234
<ul>
235235
<li ng-repeat="action in user.actions">
236236
{{action.description}}
237237
</li>
238238
</ul>
239-
</pre>
239+
```
240240

241241
When the above example is compiled, the compiler visits every node and looks for directives.
242242

@@ -295,7 +295,7 @@ One of the most common use cases for directives is to create reusable components
295295

296296
Below is a pseudo code showing how a simplified dialog component may work.
297297

298-
<pre>
298+
```html
299299
<div>
300300
<button ng-click="show=true">show</button>
301301

@@ -306,15 +306,15 @@ Below is a pseudo code showing how a simplified dialog component may work.
306306
Body goes here: {{username}} is {{title}}.
307307
</dialog>
308308
</div>
309-
</pre>
309+
```
310310

311311
Clicking on the "show" button will open the dialog. The dialog will have a title, which is
312312
data bound to `username`, and it will also have a body which we would like to transclude
313313
into the dialog.
314314

315315
Here is an example of what the template definition for the `dialog` widget may look like.
316316

317-
<pre>
317+
```html
318318
<div ng-show="visible">
319319
<h3>{{title}}</h3>
320320
<div class="body" ng-transclude></div>
@@ -323,7 +323,7 @@ Here is an example of what the template definition for the `dialog` widget may l
323323
<button ng-click="onCancel()">Close</button>
324324
</div>
325325
</div>
326-
</pre>
326+
```
327327

328328
This will not render properly, unless we do some scope magic.
329329

@@ -334,14 +334,14 @@ the `onOk` and `onCancel` functions to be present in the scope. This limits the
334334
widget. To solve the mapping issue we use the `locals` to create local variables which the template
335335
expects as follows:
336336

337-
<pre>
337+
```js
338338
scope: {
339339
title: '@', // the title uses the data-binding from the parent scope
340340
onOk: '&', // create a delegate onOk function
341341
onCancel: '&', // create a delegate onCancel function
342342
visible: '=' // set up visible to accept data-binding
343343
}
344-
</pre>
344+
```
345345

346346
Creating local properties on widget scope creates two problems:
347347

@@ -367,7 +367,7 @@ surprise.
367367

368368
Therefore the final directive definition looks something like this:
369369

370-
<pre>
370+
```js
371371
transclude: true,
372372
scope: {
373373
title: '@', // the title uses the data-binding from the parent scope
@@ -377,5 +377,5 @@ scope: {
377377
},
378378
restrict: 'E',
379379
replace: true
380-
</pre>
380+
```
381381

‎docs/content/guide/controller.ngdoc‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ is registered.
2828
The following example shows a very simple constructor function for a Controller, `GreetingCtrl`,
2929
which attaches a `greeting` property containing the string `'Hola!'` to the `$scope`:
3030

31-
```
31+
```js
3232
function GreetingCtrl($scope) {
3333
$scope.greeting = 'Hola!';
3434
}
@@ -37,22 +37,22 @@ which attaches a `greeting` property containing the string `'Hola!'` to the `$sc
3737
Once the Controller has been attached to the DOM, the `greeting` property can be data-bound to the
3838
template:
3939

40-
```
41-
<div ng-controller="GreetingCtrl">
42-
{{ greeting }}
43-
</div>
40+
```js
41+
<div ng-controller="GreetingCtrl">
42+
{{ greeting }}
43+
</div>
4444
```
4545

4646
**NOTE**: Although Angular allows you to create Controller functions in the global scope, this is
4747
not recommended. In a real application you should use the `.controller` method of your
4848
{@link module Angular Module} for your application as follows:
4949

50-
```
51-
var myApp = angular.module('myApp',[]);
50+
```js
51+
var myApp = angular.module('myApp',[]);
5252

53-
myApp.controller('GreetingCtrl', ['$scope', function($scope) {
54-
$scope.greeting = 'Hola!';
55-
}]);
53+
myApp.controller('GreetingCtrl', ['$scope', function($scope) {
54+
$scope.greeting = 'Hola!';
55+
}]);
5656
```
5757

5858
We have used an **inline injection annotation** to explicitly specify the dependency
@@ -68,21 +68,21 @@ then available to be called from the template/view.
6868

6969
The following example uses a Controller to add a method to the scope, which doubles a number:
7070

71-
```
72-
var myApp = angular.module('myApp',[]);
71+
```js
72+
var myApp = angular.module('myApp',[]);
7373

74-
myApp.controller('DoubleCtrl', ['$scope', function($scope) {
75-
$scope.double = function(value) { return value * 2; };
76-
}]);
74+
myApp.controller('DoubleCtrl', ['$scope', function($scope) {
75+
$scope.double = function(value) { return value * 2; };
76+
}]);
7777
```
7878

7979
Once the Controller has been attached to the DOM, the `double` method can be invoked in an Angular
8080
expression in the template:
8181

82-
```
83-
<div ng-controller="DoubleCtrl">
84-
Two times <input ng-model="num"> equals {{ double(num) }}
85-
</div>
82+
```js
83+
<div ng-controller="DoubleCtrl">
84+
Two times <input ng-model="num"> equals {{ double(num) }}
85+
</div>
8686
```
8787

8888
As discussed in the {@link concepts Concepts} section of this guide, any
@@ -270,7 +270,7 @@ Although there are many ways to test a Controller, one of the best conventions,
270270
involves injecting the {@link api/ng.$rootScope $rootScope} and {@link api/ng.$controller $controller}:
271271

272272
**Controller Definition:**
273-
```
273+
```js
274274
var myApp = angular.module('myApp',[]);
275275

276276
myApp.controller('MyController', function($scope) {
@@ -282,7 +282,7 @@ involves injecting the {@link api/ng.$rootScope $rootScope} and {@link api/ng.$c
282282
```
283283

284284
**Controller Test:**
285-
```
285+
```js
286286
describe('myController function', function() {
287287

288288
describe('myController', function() {
@@ -310,7 +310,7 @@ describe('myController function', function() {
310310
If you need to test a nested Controller you need to create the same scope hierarchy
311311
in your test that exists in the DOM:
312312

313-
```
313+
```js
314314
describe('state', function() {
315315
var mainScope, childScope, grandChildScope;
316316

0 commit comments

Comments
 (0)