26083

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 ?

<pre class="lang-html prettyprint-override"><!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>

Answer1:

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.

<pre class="lang-dart prettyprint-override"><!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>

Answer2:

An alternative way is to use ng-bind as demonstrated in this youtube video: <a href="http://www.youtube.com/watch?v=ZhfUv0spHCY" rel="nofollow">AngularJS MTV Meetup: Best Practices (2012/12/11)</a> (after about 12 minutes)

Quoted from the API doc of <a href="http://ci.angularjs.org/view/Dart/job/angular.dart-master/javadoc/angular.directive/NgBindDirective.html" rel="nofollow">NgBindDirective class</a>

<blockquote>

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.

</blockquote>

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.

Recommend

  • what makes a request a new request in asp.net C#
  • Uncaught TypeError: $(…).select2 is not a function
  • pillow imaging ImportError
  • Problems installing Yesod for Haskell
  • How to view images from protected folder with php?
  • System.InvalidCastException: Specified cast is not valid
  • error importing numpy
  • Display images in Django
  • Read a local file using javascript
  • The plugin 'org.apache.maven.plugins:maven-jboss-as-plugin' does not exist or no valid ver
  • req.body is undefined - nodejs
  • C# - Serializing and deserializing static member
  • HTML download movie download link
  • Apache 2.4 and php-fpm does not trigger apache http basic auth for php pages
  • Resize panoramic image to fixed size
  • output of program is not same as passed argument
  • Updating server-side rendering client-side
  • Cross-Platform Protobuf Serialization
  • Modifying destination and filename of gulp-svg-sprite
  • Sending data from AppleScript to FileMaker records
  • MySQL WHERE-condition in procedure ignored
  • Importing jscolor library in angular 2
  • Web-crawler for facebook in python
  • Akka Routing: Reply's send to router ends up as dead letters
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • How to include full .NET prerequisite for Wix Burn installer
  • trying to dynamically update Highchart column chart but series undefined
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • How to set the response of a form post action to a iframe source?
  • How do I configure my settings file to work with unit tests?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Is it possible to post an object from jquery to bottle.py?
  • unknown Exception android
  • MATLAB: Piecewise function in curve fitting toolbox using fittype
  • Checking variable from a different class in C#
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Binding checkboxes to object values in AngularJs
  • How can I use `wmic` in a Windows PE script?
  • java string with new operator and a literal