javascript - AngularJS/Bootstrap 应用架构

Question

只是寻找一些关于如何从 AngularJS 的 Angular 最好地构建小型应用程序的建议(我是一名资深开发人员，但对 AngularJS 还是个新手)。

应用说明

• 简单的股票图表应用。
• 用于添加和随后选择股票代码的左侧“导航”类型栏。
• 用于显示所选代码图表的右侧查看区域。
• 每次在左侧选择一个新代码时，都会调用 API 以检索数据，然后右侧查看区域会显示包含检索到的数据的图表。

初始概念

• 将左侧导航/选择栏包裹在一个单独的 Controller 中。
• 将 ng-view 与 ngRoute 提供程序结合使用以根据 URL(例如 #/stockcode(此处建议的类似技术:How to set bootstrap navbar active class with Angular JS?)更新图表窗口)

这是将此应用组合在一起的有效“Angular 方式”吗？如果没有，任何人都可以提供更好的方法吗？

此外 - 我尝试将其与 Bootstrap CSS 放在一起，但在 Bootstrap 列内的 ng-view 指令存在很多格式问题。

非常感谢任何建议。

Answer 1

我还尝试了一些用于 Bootstrap 选项卡结构的代码，

<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;
    };