angular.dart seems to be slow

Question

I am trying angular.dart and saw that its slow. When am html page is loaded containing angular, angular directive is seen first, which are then converted appropriately. Shouldn't it be converted instantaneously and the user should not see whether we are using angular ?

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Hello, World!</title>
</head>
<body>

  <h3>Hello {{name}}!</h3>
  name: <input type="text" ng-model="name">

  <script type="application/dart" src="main.dart"></script>
  <script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>

If you mean you see {{name}}, then Angular.js works the exact same way, but there should be a way for your to suppress that, just like in Angular.js. [It's called ngCloak](http://stackoverflow.com/questions/12866447/prevent-double-curly-brace-notation-from-displaying-momentarily-before-angular-j) in angularjs — CorayThan, Dec 13 '13 at 03:03
Maybe there will come a day when angular will be supported natively by browsers :-) But for now we have to control the display of the **first** page of the app manually — artur grzesiak, Dec 13 '13 at 09:52
@CorayThan, the ng-clock directive is part of AngularDart as well. — James deBoer, Dec 13 '13 at 10:15
@CorayThan ng-cloak doesn't seem to work, though its documentation say it should and logic also seem correct. — Amit Developer, Dec 13 '13 at 18:30
@CorayThan Thanks, it worked. I had to surround {{name}} with and specify a css rule .ng-cloak{ display:none; } — Amit Developer, Dec 14 '13 at 02:19

score 3 · Answer 1 · edited Mar 18 '14 at 18:32

Surround {{name}} with a tag having class="ng-cloak". I used span tag. Keep it hidden by specifying css rule .ng-cloak{ display:none; }. When angular is loaded, it will remove class="ng-cloak" from the span tag and everything will work as expected.

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Hello, World!</title>
    <style>
      .ng-cloak{ display:none;}
    </style>
</head>
<body>
  <h3>Hello <span class="ng-cloak">{{name}}</span>!</h3> 
  name: <input type="text" ng-model="name">  

  <script type="application/dart" src="main.dart"></script>
</body>
</html>

score 0 · Answer 2 · answered Dec 21 '13 at 17:36

An alternative way is to use ng-bind as demonstrated in this youtube video: AngularJS MTV Meetup: Best Practices (2012/12/11) (after about 12 minutes)

Quoted from the API doc of NgBindDirective class

Typically, you don't use ngBind directly, but instead you use the double curly markup like {{ expression }} which is similar but less verbose.

It is preferrable to use ngBind instead of {{ expression }} when a template is momentarily displayed by the browser in its raw state before Angular compiles it. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading.

This way you can display default content that get's replaced when Angular is ready instead of showing a blank page or a progress icon.

angular.dart seems to be slow

2 Answers2

Linked