Angularjs应用程序没有';internet连接速度慢时无法正常渲染

Angularjs应用程序没有';internet连接速度慢时无法正常渲染,angularjs,Angularjs,我对AngularJS的前景感到兴奋。所以我马上就开始学习。然而,令我沮丧的是,AngularJS并没有像你从截图中看到的那样在缓慢的互联网连接上很好地呈现内容 我的Flask应用程序基本上显示了我的Linux机器的详细信息。我通过对服务器端代码运行ajax调用并返回json来实现这一点,然后使用Angular将json显示到浏览器中 这是框架的已知问题还是我编写代码的方式。我在页脚调用Angularjs,正如许多用户所呈现的那样 这是我的html页面的框架结构 <!DOCTYPE h

我对AngularJS的前景感到兴奋。所以我马上就开始学习。然而,令我沮丧的是,AngularJS并没有像你从截图中看到的那样在缓慢的互联网连接上很好地呈现内容

我的Flask应用程序基本上显示了我的Linux机器的详细信息。我通过对服务器端代码运行ajax调用并返回json来实现这一点,然后使用Angular将json显示到浏览器中

这是框架的已知问题还是我编写代码的方式。我在页脚调用Angularjs,正如许多用户所呈现的那样

这是我的html页面的框架结构

<!DOCTYPE html>
<html >
  <head>
    <title>My flask app</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-glyphicons.css') }}">

    <!-- font awesome -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome.min.css') }}">

    <!-- custom-->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

  </head>
  <body ng-app="flaskApp">

    <header>
      <div class="container">
        <h1 class="logo">Flask App</h1>
        <strong><nav>
          <ul class="menu">
            <li><a href="{{ url_for('home') }}">Home</a></li>
            <li><a href="{{ url_for('about') }}">About</a></li>
          </ul>
        </nav></strong>
      </div>
    </header>

    <div class="container">
      {% block content %}
      {% endblock %}
    </div>

  <!-- Jquery JS-->
  <script src="{{ url_for('static', filename='js/jquery-1.11.3.min.js')}}"></script>

   <!-- Angular JS-->
  <script src="{{ url_for('static', filename='js/angular.js')}}"></script>

  <!-- Bootstrap JS -->
  <script src="{{ url_for('static', filename='js/bootstrap.min.js')}}"></script>

  <!-- Custom JS -->
  <!--  <script src="{{ url_for('static', filename='js/admin.js')}}"></script> -->
  <script src="{{ url_for('static', filename='js/cmd.js')}}"></script>


  </body>
</html>

我的烧瓶应用程序
烧瓶应用程序

{%block content%} {%endblock%}
看看指令。它用于防止Angular显示未编译的模板

将此添加到CSS文件:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

并在需要的地方包含de
ng-clope
指令。我通常把它放在
主体
标签中。

效果很好,谢谢。我希望这是框架在未来版本中应该注意的事情。欢迎您,如果它有帮助,请将其标记为答案!