This repository was archived by the owner on Apr 12, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 27.4k
/
Copy pathproduction.ngdoc
74 lines (54 loc) · 2.45 KB
/
production.ngdoc
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
@ngdoc overview
@name Running in Production
@sortOrder 540
@description
# Running an AngularJS App in Production
There are a few things you might consider when running your AngularJS application in production.
## Disabling Debug Data
By default AngularJS attaches information about scopes to DOM nodes, and adds CSS classes
to data-bound elements. The information that is not included is:
As a result of `ngBind`, `ngBindHtml` or `{{...}}` interpolations, binding data and CSS class
`ng-class` is attached to the corresponding element.
Where the compiler has created a new scope, the scope and either `ng-scope` or `ng-isolated-scope`
CSS class are attached to the corresponding element. These scope references can then be accessed via
`element.scope()` and `element.isolateScope()`.
Tools like [Protractor](https://github.com/angular/protractor) and
[Batarang](https://github.com/angular/angularjs-batarang) need this information to run,
but you can disable this in production for a significant performance boost with:
```js
myApp.config(['$compileProvider', function ($compileProvider) {
$compileProvider.debugInfoEnabled(false);
}]);
```
If you wish to debug an application with this information then you should open up a debug
console in the browser then call this method directly in this console:
```js
angular.reloadWithDebugInfo();
```
The page should reload and the debug information should now be available.
For more see the docs pages on {@link ng.$compileProvider#debugInfoEnabled `$compileProvider`}
and {@link angular.reloadWithDebugInfo `angular.reloadWithDebugInfo`}.
## Strict DI Mode
Using strict di mode in your production application will throw errors when a injectable
function is not
{@link di#implicit-annotation annotated implicitly}.
This will force you to make sure that your injectable functions are implicitly annotated
which will improve angular's performance when injecting dependencies in your injectable
functions because it doesn't have to dynamically discover a function's dependencies.
It is recommended to automate the implicit annotation via a tool like
[ng-annotate](https://github.com/olov/ng-annotate) when you deploy to production (and enable
strict di mode)
To enable strict di mode, you have two options:
```html
<div ng-app="myApp" ng-strict-di>
<!-- your app here -->
</div>
```
or
```js
angular.bootstrap(document, ['myApp'], {
strictDi: true
});
```
For more information, see the
{@link di#using-strict-dependency-injection DI Guide}.