Question

我正在通过在我的项目中使用它来学习角度，看起来如下：

后端的Node.js / express
Jade for views and partials
前端的角度。

我可以轻松设置路由，并且能够正确显示所有（静态）部分。

当我添加第一个控制器时出现了问题：我添加了一个$ http get来从服务器获取用户信息，然后将其显示在表单的输入字段中。它一直工作，但页面变得极其缓慢，在我的电脑上打开选择下拉列表大约需要2秒......我在做一些可怕的错误吗？

无论是否显示值，都会显示放缓，如果我从视图中删除所有{{user。}}，它仍然非常慢。

http请求几乎立即执行，所以我不知道它如何产生影响......我的想法已经不多了。

同样，这不是页面加载时间问题，这里的问题是这个应用程序中的某些东西正在消耗大量的CPU 持续，我不知道是什么/为什么

控制器代码（在/app/controlers.js中）：

function ProfileCtrl($scope, $http) {
  $http.get('/api/userinfo')
    .success(function(data, status, headers, config) {
      $scope.user = data;
    }); 
}

模块代码：

angular.module('DTTB', ['ngRoute']).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/index',
        controller: IndexCtrl
      }).
      when('/settings', {
        templateUrl: 'partials/settings',
        controller: SettingsCtrl
      }).
      when('/profile', {
        templateUrl: 'partials/profile',
        controller: ProfileCtrl
      }).
      when('/support', {
        templateUrl: 'partials/support',
        controller: SupportCtrl
      }).
      otherwise({
        redirectTo: '/'
      });
    $locationProvider.html5Mode(true);
  }]);

查看模板：

form#form.form-horizontal(ng-controller='ProfileCtrl')
  section.panel
    header.panel-heading
      h2.panel-title Profile
      p.panel-subtitle
        | Your basic information
    .panel-body
      .form-group
        label.col-sm-3.control-label
          span.required *
          | Full Name
        .col-sm-9
          input.form-control(type='text', name='fullname', placeholder='John Doe', required='required' , value='{{ user.full_name }}')
      .form-group
        label.col-sm-3.control-label
          span.required *
          | Street Address 1
        .col-sm-9
          input.form-control(type='text', name='address1', placeholder='123 W. Sesame Street', required='required' , value='{{user.address1}}')
      .form-group
        label.col-sm-3.control-label Street Address 2
        .col-sm-9
          input.form-control(type='text', name='address2', placeholder='Suite #, Unit #, Apt #' , value='{{user.address2}}')
      .form-group
        label.col-sm-3.control-label
          span.required *
          | City
        .col-sm-9
          input.form-control(type='text', name='city', placeholder='Los Angeles', required='required' , value='{{user.city}}')

编辑： 我已经删除了所有控制器，并且在某种程度上，我看到了同样的慢速问题...所以看起来我向页面添加角度的简单事实使得它非常慢。现在，我使用bootstrap3管理模板和许多其他JS / css依赖项，它能解释这种行为吗？

编辑2：

值得一提的是，只有当我加载部分时，CPU才会启动。我已经通过将包含控制器的部分与索引1进行交换来测试这一点，这样它在页面加载时显示，并且速度完全正常。当我加载另一部分时，它又重新开始。

Answer 1

更新问题，并提出解决方案：

AngularJS太棒了。但它并不能与网上各处可用的大量jQuerized模板很好地融合在一起。我的问题来自我的bootstrap模板，它加载了很多jquery插件，并在所有这些插件上执行了许多init函数。当我导航到部分时，许多元素都在发生变化，与这些元素绑定的大量事件将不再存在，浏览器无法弄清楚发生了什么。

我用两种不同的方式解决了这个问题：

方便时使用指令初始化插件。

当代码太长时，我已经将init函数添加到我的控制器中了

$scope.$on('$viewContentLoaded',function(){ 
    $(function(){
        /*jQuery init stuff goes here*/
    });
});

对于像我这样的新手，加载AngularJS视图时会触发此事件。

我知道这是一种不好的做法，但现在在这个开发中要求每个人都改变主题已经太晚了。要付出小的代价才能学习这个令人兴奋的框架。下一个项目，我将从一开始就尝试避免使用jQuery。

课程学得很好！

AngularJS小测试应用程序渲染速度极慢

1 个答案: