Utilizing AngularJS with dual controllers within a single view

Question

Utilizing AngularJS with dual controllers within a single view

I recently started working on an angularJS web app using a purchased template that has all its controllers, routes, and directives in a single file called app.js.

This is my first dive into angularJS and front-end development. Hoping to become a Full Stack geek now.. :D

However, I've hit a roadblock. The app functions perfectly fine until I try to add a new controller AuthCtrl from another file named auth.js. It throws an error saying AppCtrl not found. Below HTML snippet highlights the exact issue:

<!doctype html>
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

<!-- rest of the provided HTML content stays same -->

<span class="highlight">/*Code ommitted for brevity*/</span>

    <script src="scripts/controllers/auth.js"></script>

<span class="beginning">(function() {</span>
<span class="content-indent">"use strict";</span>
angular.module("app.chart.ctrls",[])
    .controller("chartCtrl",[
        "$scope",
        function($scope){ ....

javascript angularjs

Answer 1

Answer №1

The issue here lies in the implementation within the auth.js file:

var app = angular.module('app',.......

This code snippet is creating a new instance of the 'app' module or potentially overwriting an existing one declared in the app.js file.

Instead of this, you should aim to utilize the same 'app' variable that has been defined in the app.js file.

To achieve this, it is recommended to declare the app and store a reference to it in a separate variable:

var yourApp = angular.module("app.controllers",[.........]);

You can then link controllers by assigning them to the variable containing the app definition. As an example, let's explore how the 'chartCtrl' controller should be associated with the 'yourApp' application:

yourApp.controller("chartCtrl",[
        "$scope",
        function($scope){ ....

In your auth.js file, update the controller implementation as follows:

yourApp.controller('AuthCtrl', function ($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];
});

Answer 2

The issue here lies in the implementation within the auth.js file:

var app = angular.module('app',.......

This code snippet is creating a new instance of the 'app' module or potentially overwriting an existing one declared in the app.js file.

Instead of this, you should aim to utilize the same 'app' variable that has been defined in the app.js file.

To achieve this, it is recommended to declare the app and store a reference to it in a separate variable:

var yourApp = angular.module("app.controllers",[.........]);

You can then link controllers by assigning them to the variable containing the app definition. As an example, let's explore how the 'chartCtrl' controller should be associated with the 'yourApp' application:

yourApp.controller("chartCtrl",[
        "$scope",
        function($scope){ ....

In your auth.js file, update the controller implementation as follows:

yourApp.controller('AuthCtrl', function ($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];
});

Utilizing AngularJS with dual controllers within a single view

Answer №1

Similar questions

Displaying a dynamic menu using Angular's ngFor loop

Obtaining the file size on the client side using JSF RichFaces file upload

Angular directives with templateUrl pointing to 'from my own server'

Utilizing JQuery AJAX to Submit a JSONP Form with File Attachments

Can we combine JQuery includes with Angular Includes?

Methods for initializing state before each test in AngularJS

The issue with AngularJS Routing is that it fails to refresh the menu items when the URL and views are being

Undo a CSS transition when clicked

Problem with full-page navigation sliding in and fading in and out

Attempting to transfer a property from one page to another using the Link component in NextJS

Passing PHP information into a JavaScript array

Ways of retrieving Sveltekit session data in an endpoint

Error: Element type is invalid: a string was anticipated, but not found

tips for adjusting font size of toolbar in ionic framework

Issue with passing boolean parameter in Javascript not functioning properly

the ultimate guide to leveraging a single slot to edit various columns within data tables

Determining the total number of combinations possible from a collection of five arrays containing items

Vue.js: Optimize Webpack bundle by excluding core-js

Fixing 404 Errors in Angular 2 Due to Component Relative Paths in SystemJS-Builder

Experiencing difficulties with JWT implementation and seeking to transmit the JWT token to additional APIs