AngularJS - Use two different controllers?

Question

I am starting to play around with AngularJS and I'm not sure about how to update the navigation bar selection. I have 2 things in index.html, the navbar (with the tabs that I need to update) and the div with the ngView.

For the different views, I use ngRoute for changing the templates and attaching a controller to those templates. For the navbar, though, I'm not sure if I should just add "ng-controller="tabController" in the HTML. This doesn't seem correct, as I am already checking the route for the view, and I would be checking it twice.

Here is my code for the navbar and the div with the view, where the li that has the class "active" should be aligned with the view shown in the div:

<nav class="navbar navbar-default" ng-controller="tabController">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#/">Recetas Helper</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="#/">Home</a></li>
            <li class="active"><a href="#/helper">Helper</a></li>
            <li><a href="#/insert">Insertar</a></li>
            <li><a href="#/randomizer">Randomizer</a></li>
        </ul>
    </div>
</nav>
<div class="main-view" ng-view></div>

And here is my app.js code, where the controllers are and the route is checked:

var app = angular.module('confApp', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "partials/home.html",
            controller: "homeController"
        })
        .when("/helper", {
            templateUrl: "partials/helper.html",
            controller: "helperController"
        })
        .when("/insert", {
            templateUrl: "partials/insert.html"
        })
        .when("/randomizer", {
            templateUrl: "partials/randomizer.html"
        })
        .otherwise({
            templateUrl: "partials/ups.html"
        });
});


app.controller('tabController', function($scope) {...});

app.controller('homeController', function($scope) {...});

app.controller('helperController', function($scope) {...});

Its the first time I ask a question in SO, so please tell me if there is any important info missing, or the oppossite. Thanks!!

Hi and welcome to SO! It's not very clear what you want to achieve here, what do you mean exactly by "update the tab selection"? I don't understand this either "I would still need to check the route to change the active tab". Can you edit your question to add precisions? Remember we know nothing about your project, don't hesitate to illustrate what you say with examples of code — Kaddath, Apr 17 '18 at 08:04

score 0 · Accepted Answer · answered Apr 17 '18 at 08:08

0

From my understanding, you are basically using nav-bar and changing routes accordingly. Calling it Tab would make it more confusing as TAB is something different from Navigation Bar. My suggestion:

Rename it to Navigation Controller
If you are using 1.5 and above, create a components as they are better approach for new versions of AngularJS 1.X
For the above code you have shared, you can check $location and accordingly apply active class to the selected div using ng-class. This will be the only solution as you need to apply active class to div which will be rendered as per the routing

Rest everything looks fine

answered Apr 17 '18 at 08:08

Shashank Vivek

16,888
8
62
104

Thanks @Shasank Vivek, it worked by using $location, but only the first time I access the page, it doesn't update when the url changes, any idea why? – tonyjojo Apr 17 '18 at 09:23
in navigationController I have: $scope.url = $location.$$url; // and in each li I have ng-class="{active: url == '/helper'}" for each case – tonyjojo Apr 17 '18 at 09:24
@tonyjojo: yes, it happens because the contoller is already loaded and so it holds the `$location` data of it's first load. For your situation, you can refer https://stackoverflow.com/questions/14765719/how-to-watch-for-a-route-change-in-angularjs . You need to capture the event when route is changed – Shashank Vivek Apr 17 '18 at 10:43
1

Thanks again @Shashank Vivek! – tonyjojo Apr 18 '18 at 08:36

AngularJS - Use two different controllers?

1 Answers1