Question

我正在尝试angular.dart，看到它的速度很慢。当加载包含angular的html页面时，首先看到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>

Answer 1

使用class =“ng-cloak”标记的{{name}}。我用了span标签。通过指定css规则使其隐藏.ng-cloak {display：none; }。当加载角度时，它将从span标记中删除class =“ng-cloak”，一切都将按预期工作。

<!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>

Answer 2

另一种方法是使用此{you}视频中显示的ng-bind：AngularJS MTV Meetup: Best Practices (2012/12/11)（约12分钟后）

引自NgBindDirective class

的API文档

通常，您不直接使用ngBind，而是使用   双重卷曲标记，如{{expression}}，类似但更少   冗长。

当a时，最好使用ngBind而不是{{expression}}   浏览器在其原始状态下暂时显示模板   在Angular编译之前。由于ngBind是一个元素属性，它   在页面加载时使绑定对用户不可见。

通过这种方式，您可以显示在Angular准备就绪时替换的默认内容而不是显示空白页面或进度图标。

angular.dart似乎很慢

2 个答案: