AngularJS/Bootstrap Application Architecture

Question

Just looking for some advice on how to best structure a small application from an AngularJS point of view (I'm a long time developer but very new to AngularJS).

App Description

• Simple stock charts app.
• Left hand "nav" type bar for adding and subsequently selecting a stock code.
• Right hand side viewing area for displaying the chart of the selected code.
• Each time a new code is selected on the left, there is a call made to an API to retrieve data and then the right hand viewing area displays the chart with the retrieved data.

Initial Concept

• Wrap the left hand nav/select bar in a separate controller.
• Use ng-view with ngRoute provider to update the chart window based on URL (e.g. #/stockcode (similar technique suggested here: How to set bootstrap navbar active class with Angular JS?)

Is this a valid "angular way" of putting this app together? If not, can anyone provide a better way of doing this?

Also - I tried putting this together with bootstrap CSS and am having a lot of formatting issues with the ng-view directive being inside a bootstrap column.

Any advice greatly appreciated.

Answer 1

i also tried some code for bootstrap tab structure,

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

app code

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

Answer 2

you can read about it here but of course there is many other possible options, important is that will be easy for you to manage.

Answer 3

If you are a beginner with Angular, the best you can do is to find some nice guidelines how to build apps with this framework. I strongly encourage you to read great John Papa's styleguide for AngularJS.