AngularJS небольшой тест приложение делает очень медленно

Question

Я учусь Угловое, используя его в проекте шахты, которая выглядит следующим образом:

• Node.js/выразить на внутреннем интерфейсе
• Джейд для взглядов и частичными
• Угловой на фронте.

Я легко установил маршрутизацию и смог правильно отобразить все мои (но статические) частичные.

Проблема возникла, когда я добавил свой первый контроллер: я добавил $ http, чтобы получить информацию о пользователе с сервера, а затем отобразить его в полях ввода формы. Он работает полностью, но страница стала Чрезвычайно медленной, до такой степени, что открытие выпадающего списка занимает около 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}}') 

EDIT: Я удалил все контроллеры, и в какой-то степени я вижу ту же проблему медленности ... Поэтому кажется, что простой факт, что я добавляю углы на мою страницу, делает ее очень медленной. Теперь я использую шаблон администрирования bootstrap3 с множеством других зависимостей JS/css, может ли это объяснить это поведение?

EDIT 2:

Это может быть стоит отметить, что сосательный процессор начинает только тогда, когда я загрузить частично. Я протестировал это, заменив частицу, содержащую контроллер с индексом один, таким образом, он отображается при загрузке страницы, и скорость совершенно нормальная. В тот момент, когда я загружаю еще одну частицу, она начинается снова.

Answer 1

Update на проблеме, и вид раствора:

AngularJS является удивительным. Но он не очень хорошо сочетается с сильно jQuerized шаблонами, доступными повсюду в Интернете. Моя проблема возникла из шаблона начальной загрузки, который загружал много плагинов jquery и выполнял множество функций init во всех этих плагинах. Когда я перешел к частичной части, менялось много элементов, множество событий, связанных с этими элементами, больше не существовало бы, и браузер не мог понять, что происходит.

Я решил проблему в 2 различными способами:

Использование директивы для инициализации мои плагины, когда это удобно.

Когда код был слишком чертовски долго, я добавил функцию инициализации в мой контроллер `

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

Для новичков, как я, это событие вызывается, когда AngularJS вид загружен.

Я знаю, что это плохая практика, но сейчас уже поздно в этом деве попросить всех изменить тему. Маленькая цена, чтобы заплатить, чтобы научиться этой захватывающей структуре. Следующий проект, я постараюсь избежать jQuery с самого начала.

Урок хорошо изученный!