Can two controllers be used for the main-app and sub-app with the same URL using angular ui-route?

I have implemented two controllers, 'BaseController' and 'SubController', for my main application and sub-application. Both controllers are configured to point to an empty URL.

Below is the configuration for the main application:-

angular.module("main-app").config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('base', {
      url: "",
      views: {
        "base": {
          controller: 'BaseController' 
        }
      }
    });
}]);

And here is the configuration for the sub-application:-

 angular.module("sub-app").config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
  //$locationProvider.html5Mode(true); 
  $stateProvider
  .state('sub', {
      url: "",
      views: {
        "patients": {
          templateUrl:"templates/scope/patients/patients_search.html",
          controller: 'PatientsController' 
        }
      },
    });
}]);

The main application includes the sub-application.

How can I ensure that both controllers are loaded with the same empty URL?

Answer №1

Having two controllers for the same root view may not be the most logical approach. A controller typically requires a specific view context to operate effectively within the scope hierarchy of $scope.

An alternative solution could involve abstracting your controllers into services that can be injected into any controller. Consider creating services such as mainsrv and subsrv, then utilizing a single root controller with url: ''. Here is an example of how you can define your root controller:

angular.module('myapp', [])
    .controller('AppCtrl', ['mainsrv', 'subsrv', function(mainsrv, subsrv){
        // use mainsrv and subsrv services here
    }]);

If you do have a genuine need for multiple controllers to load on the root view, you can still create a single root view but utilize ng-controller in each individual view to specify the context for each controller. For instance:

<div ng-controller="BaseController"></div>
<div ng-controller="PatientsController"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Directive cannot be refreshed as a result of the ongoing "$digest already in progress" error

Within my controller, I have set a default value for a variable called "data". In my original project, I am using CouchCorner to retrieve data from a CouchDB and update the value of this variable. Inside a directive, I am watching the variable data and up ...

Customize form input using Javascript prior to inserting into database

On my Rails form, I have a basic setup like the following: <%= form_for @song do |f| %> <p> <%= f.label :url %><br> <%= f.text_field :url %> </p> <p> <%= f.submit %> </p> <% en ...

Learning how to dynamically update a value in Angular based on user input

My goal is to dynamically change the output value based on user input using Angular. I have successfully implemented the functionality to increment the value, but unfortunately, when the input changes, the outputed value remains static. Below is my curren ...

Use jQuery to permit only numeric characters and the symbol "-" to be entered into a textbox

I have been working on a JQuery script that only allows users to input numbers in a text field. However, I am now trying to modify the code to also allow users to enter "-" (hyphen), but so far it's not working as expected. If anyone can provide assis ...

Bootstrap UI Tab presents an obstacle for Google Map functionality

When utilizing the Bootstrap Tabset to include a Bootstrap slider, Google Map, and other pages, I encountered an issue where the slider functions perfectly but the Google Map does not work as expected. Interestingly, the map works perfectly in street view ...

Maintain the aspect ratio of an image when placing it in a square container

Looking for a way to create a CSS grid with non-square random sized images? I need help filling all the space inside a fixed size div. Any suggestions? Check out my example: (blue represents the fixed size div and red shows the image inside it) ...

Having difficulty using replaceWith to replace text in jQuery

My favorite script successfully adds data to SQL and replaces HTML tags. I have included a text like Add Favorite and used replaceWith to display Remove Favorite. However, the output is not as expected, as shown in the image below. https://i.sstatic.net/x ...

I am experiencing issues with the functionality of front-page.php on my WordPress website

Seeking guidance in addressing a web development issue: I have encountered a problem with a website that I am currently working on locally using WordPress. I added the following code to the header.php file: <link rel="stylesheet" type="text/css" href= ...

what strategies can be implemented to prioritize addressing validation errors in return forms

I'm currently working on a web application in asp.net mvc-5, and I have a contact form displayed in the middle of the Contact Us view. Here's the code snippet: <div class="col-sm-8 col-sm-push-4"> <h2>Contact Us1 ...

Managing JavaScript events in the console

Running a server for a video game in node.js where the console communicates with clients via websockets. I have a function to spawn enemies from a MySQL database, but I am encountering an error that seems to be related to a jQuery script... I want the scr ...

What steps should I take to verify the validity of an Angular form?

I am struggling with validating an inscription form in HTML. Despite trying to implement validations, the inputs are still being saved in the database even when they are empty. Here are the validations I want to include: All inputs are required Email addr ...

An unexpected error occurred during page generation. Any relevant console logs will be shown in the browser's terminal window

Encountered a RangeError: Maximum call stack size exceeded while compiling this web app in the browser. The error occurred on my header tag and sometimes on the return tag. What should I do? export default function Header() { return ( <> ...

What causes an error when trying to access with the member access operator?

When dealing with object properties in the code snippet below, an error is thrown when trying to access the object using the Member Access. Why does this happen? var d = {a: 10, b: 20, c:30}; var keys = Object.getOwnPropertyNames(d); ...

Tips for Isolating and Manipulating a Single Element in Array.map() with REACT.JS

Is there a way to change the style of a specific element in an array without affecting others when a button is clicked? I've been struggling with this because every time I try, it ends up changing all elements instead of just the one that was clicked. ...

Error encountered while attempting to invoke endpoint function

Recently, I was handed a Node.js API documented with swagger for debugging purposes. My task also involves implementing some new features, however, I've encountered some difficulty when it comes to calling the functions that are executed upon hitting ...

Navigate to a fresh webpage and find the scrollbar sitting at the bottom

When launching a new website using my forum system, I want the scrollbar to automatically be at the bottom so users don't have to scroll down. I'm not experienced in JavaScript and need help creating the code for this feature. ...

Getting the input tag id of an HTML form can be achieved by using the "id

<?php $i = 1; $query1 = mysql_query("SELECT * FROM `alert_history` ORDER BY `alert_history`.`id` DESC LIMIT ".$start.",".$per_page.""); while($result = mysql_fetch_array($query1)){ echo '<td colspan = "2">& ...

Automating the Process of File Downloads Using Ajax and PHP

I am currently working on a form that requires users to enter a secret key. Once the key is submitted, it is verified against a database. If the key is found, the relevant file associated with the key should be downloaded automatically. I have successfully ...

CombineReducers takes all the reducer content and unpacks it into a single reducer

As I work on developing a small application, I am contemplating the best strategy for organizing reducers within it. My objective is to retrieve JSON data from the application state and structure it as shown below: { "fruits": [ {"appl ...

Using file types in Vue 3: a beginner's guide

In order to use file-type to determine not only the extension but also ensure the headers are correct I would need to use one of the methods listed on their GitHub page. In version 19.0.0 it says fileFromFileType doesn't have such an export and in 16. ...