Home AngularJS - Use two different controllers?
Reply: 0

AngularJS - Use two different controllers?

user2513
1#
user2513 Published in April 26, 2018, 1:43 pm

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

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.422162 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO