[AngularJS] New in Angular 1.3 - Performance Boost with debugInfoEnabled

By default, Angular provides a lot of debug information on the DOM that‘s only necessary for tools like Protractor and Batarang. Angular 1.3 allows you to turn off the debug information to give your app a simple performance boost.

 

See: https://docs.angularjs.org/api/ng/provider/$compileProvider

More: https://docs.angularjs.org/guide/production#disabling-debug-data

 

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title></title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js"></script>
    <script src="app.js"></script>
</head>
<body>
  <script type="text/ng-template" id="templates/home.html">
    <note message="Hello"></note>
  </script>
  
  
<ui-view></ui-view>

</body>
</html>
angular.module("app", ["ui.router"])

    .config(function config($stateProvider, $compileProvider) {
        $stateProvider.state("home", {
            url: "",
            templateUrl: "templates/home.html"
        })

        $compileProvider.debugInfoEnabled(false);
    })

    .directive("note", function note() {
        return {
            template: "<div>{{ note.message }} {{ note.person }}</div>",
            controller: "NoteController as note",
            bindToController: true,
            scope: {
                message: "@"
            }
        }
    })

    .controller("NoteController", function NoteController() {
        var note = this;

        note.person = "John";
    })

 

Without debug info

技术分享

 

If you want open the debug info again:

in console:

angular.reloadWithDebugInfo();

技术分享

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。