AngularJS/引导应用程序架构

Posted 2023-02-22

【中文标题】AngularJS/引导应用程序架构

【英文标题】：AngularJS/Bootstrap Application Architecture

【发布时间】：2015-12-06 08:45:14

【问题描述】：

只是从 AngularJS 的角度寻找一些关于如何最好地构建小型应用程序的建议（我是一名长期开发人员，但对 AngularJS 非常陌生）。

应用说明

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

初步概念

将左侧导航/选择栏包装在单独的控制器中。 使用 ng-view 和 ngRoute 提供程序根据 URL 更新图表窗口（例如 #/stockcode（此处建议类似技术：How to set bootstrap navbar active class with Angular JS?）

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

另外 - 我尝试将它与 bootstrap CSS 放在一起，但由于 ng-view 指令位于 bootstrap 列中，因此我遇到了很多格式问题。

非常感谢任何建议。

【参考方案1】：

我还尝试了一些引导选项卡结构的代码，

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

【参考方案2】：

如果你是 Angular 的初学者，你能做的最好的事情就是找到一些很好的指南，如何使用这个框架构建应用程序。我强烈建议您阅读伟大的 John Papa 为 AngularJS 撰写的 styleguide。

【参考方案3】：

您可以在here 阅读有关它的信息，但当然还有许多其他可能的选择，重要的是您可以轻松管理。

【讨论】：

该链接用于文件夹结构，而不是应用程序架构。