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.

Anil Kumar Ram · Accepted Answer · 2015-09-10 07:26:13Z

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

answered Sep 10, 2015 at 7:26

Anil Kumar Ram

1,22111 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

macrog · Accepted Answer · 2015-09-10 07:23:51Z

0

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.

answered Sep 10, 2015 at 7:23

macrog

2,0951 gold badge23 silver badges30 bronze badges

1 Comment

Seonixx Over a year ago

That link is for folder structure, not application architecture.

kamil-mrzyglod · Accepted Answer · 2015-09-10 07:24:45Z

0

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.

answered Sep 10, 2015 at 7:24

kamil-mrzyglod

5,0081 gold badge22 silver badges30 bronze badges

Collectives™ on Stack Overflow

AngularJS/Bootstrap Application Architecture

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related