AngularJS/Bootstrap Application Architecture

Question

Просто найдите рекомендации относительно того, как наилучшим образом структурировать небольшое приложение с точки зрения AngularJS (я давно разработчик, но очень новичок в AngularJS).

App Описание

• Простые биржевые диаграммы приложения.
• Левая панель типа «nav» для добавления и последующего выбора кода запаса.
• Область просмотра правой стороны для отображения диаграммы выбранного кода.
• Каждый раз, когда слева выбирается новый код, для получения данных выполняется вызов API, а затем область просмотра правой руки отображает диаграмму с извлеченными данными.

Первоначальная Концепция

• обруча левой рукой нав/выбрать бар в отдельном контроллере.
• Использование нг вида с поставщиком ngRoute, чтобы обновить окно графика, основанный на URL (например, #/stockcode (подобная техника предлагается здесь: How to set bootstrap navbar active class with Angular JS?)

Является ли это действительно «угловой путь» положить это приложение вместе ? Если нет, то может кто-нибудь обеспечить лучший способ сделать это

Кроме того - я попытался положить это вместе с начальной загрузки CSS и меня много вопросов форматирования с директивой нг ракурса, находясь внутри начальной загрузки колонны

.

Любые советы приветствуются.

Answer 1

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

Answer 2

Если вы новичок в Angular, лучше всего вы можете найти полезные рекомендации по созданию приложений с помощью этой структуры. Я настоятельно рекомендую вам ознакомиться с замечательным Джоном Папой styleguide для AngularJS.

Answer 3

я также попробовал некоторый код для начальной загрузки вкладок структуры,

<ul class="nav nav-tabs"> 
      <li data-ng-class="{active: isActiveTab(plan)}" data-ng-repeat="plan in planTypes"> 
      <a href="#" data-toggle="tab" data-ng-click="showSpecificPlans(plan)">{{plan}} </a> 
      </li> 
</ul> 

приложение код

$scope.showSpecificPlans = function (planName) { 
     $scope.selectedPlan = planName; 

     $.each($scope.plans, function (i, val) { 
      if (i === planName) { 
       $scope.individualPlans = val; 
      } 
     }); 
     $scope.individualPlans = individualPlan[0].plans; 
    }; 
    $scope.isActiveTab = function (currentPlan) { 
     return currentPlan === $scope.selectedPlan; 
    };