Is it possible to use a single route across two different HTML pages in AngularJS?

There is a strange issue occurring in my code where I have two main HTML pages

index.html && adHome.html

Both these pages use different routes. However, on trying to configure Angular, the following code snippets were used:

angular
  .module('App', [
    'ngRoute',
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngTouch',
    'ngSanitize'

  ])
  .config(function ($routeProvider) {
    $routeProvider

   .when('/test', {
    templateUrl: 'views/user/main.html', //included in index.html
    controller: 'MainCtrl'
  })

  .when('/Reports', {
    templateUrl: 'pages/Reports.html', //included in adHome.html
    controller: 'reportController'
  })

 .otherwise({

    redirectTo: '/404' //used by both

  });

}

Running the pages on index.html works perfectly fine. However, when attempting to run something on adHome.html, an error occurs:

Failed to instantiate module flowersApp due to: Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=n...)...

The issue seems to be that adHome.html does not include the following modules:

"'ngAnimate', 'ngCookies', 'ngResource', 'ngTouch', 'ngSanitize"

This causes errors to occur. Removing them resolves the issue on adHome.html but results in errors on index.html due to missing injections.

If anyone could provide assistance in resolving this matter, it would be greatly appreciated.

Answer №1

If you encounter issues, consider implementing the following solutions:

app.js:

var myApp = 
           angular
           .module('App', ['ngRoute']);

route.provider.js:

myApp.config(function ($routeProvider) {
    $routeProvider
   .when('/test', {
    templateUrl: 'views/user/main.html', //included in index.html
    controller: 'MainCtrl'
  })
  .when('/Reports', {
    templateUrl: 'pages/Reports.html', //included in adHome.html
    controller: 'reportController'
  })
 .otherwise({
    redirectTo: '/404' //used universally
  });
});

You may also opt for stateProvider over routeProvider.

myRoute.route.js:

(function () {
    'use strict';
    angular.module('myApp')
        .config(myRoute);

    function myRoute($stateProvider) {
        $stateProvider
            .state('myRoute', {
                url: '/myUrl',
                parent: 'index',
                templateUrl: 'mySomething.html',
                controller: 'MyController',
                controllerAs: 'myCtrl'
            })
    }
})();

Utilize $state.go('myRoute'); to navigate your app while integrating $state in components such as Controllers or Factories.

I trust this advice will prove beneficial.

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

What is the best way to access a video stored in a local file on the initial page and then watch it on the subsequent

I recently encountered a scenario where I needed to select a video on one page and have it automatically play on another page without any redirection. The initial page displays a list of videos for selection, like this: FirstPage Once a video is chosen on ...

Removing a file extension in AngularJS using ng-Repeat

<tr ng-repeat="item in uploader.queue"> <td> <input type="text" ng-bind="item.file.name" value="{{item.file.name}}"> </td> If the file name is Abc.pdf, how can I remove the extension .pdf from it? ...

Transform object into an array by flattening it

I'm currently working on a task where I have an object that needs to be transformed into an array with the property as the key. The structure of the object is as follows: { Cat: { value: 50 }, Dog: { value: 80 } } The desired output should ...

Resolving negative margin issues in Material UI components through detailed textual guidance

Having an issue with the paragraphs in material-ui components. The problem arises when the text exceeds the dimensions of the component, causing it to spill over as shown in the image below. <Grid container wrap="nowrap" css={[borde,{ ...

What is the inheritance of one-time binding in ng-repeat?

If I am using an ng-repeat directive to loop through a list of lists with a one-time binding, do I need to also use a one-time binding for the nested ng-repeat on each inner list, or is that unnecessary? <div ng-repeat="list in ::$ctrl.lists"> < ...

How to beautifully display the hierarchy of nested SASS Maps?

In the realm of SASS programming, particularly within an Angular Theme framework, when dealing with nested maps it is possible to use @debug to log their contents. However, this method currently outputs the information on a single line. Is there a feature ...

Using NodeJS and Express together with Ajax techniques

I am currently developing a web application that utilizes Ajax to submit a file along with some form fields. One unique aspect of my form is that it allows for dynamic input, meaning users can add multiple rows with the same value. Additionally, the form i ...

Exploring different paths using React Links

<Router> <Homepage /> </Router> Given that the Homepage component displays a menu of links and routes, will clicking on a link cause the entire component to refresh? ...

JavaScript function not functioning properly with variable input

I'm currently working on implementing two functions that will allow me to navigate through an array of image sources and display them in my image view: nextImage() and previousImage(). Everything seems to work fine when I hardcode the num variable, bu ...

What is the best way to consistently include a query string such as lang=en in Angular requests?

We have recently implemented I18N and added a language switcher in our menu to allow users to switch between en, jp, and fr languages. Once the language is switched, the URL changes with a query string appended at the end: http://localhost:3030/loadTests? ...

Is there a way to make a text area move along with the mouse cursor?

I have been working on my first website and everything is running smoothly so far. However, I have a new idea that I am struggling to implement. Some of the pages on my site feature a video player with buttons to select different videos. When a viewer hove ...

Troubleshooting Test Failures: The importance of passing $controller in the callback of 'it' function in Angular

As a newcomer to testing, I am attempting to write Jasmine/Karma tests for a controller. Given a sample test to use as a starting point, the issue arises when passing the $controller in the argument of the it block. The test passes successfully with this s ...

Utilizing CGI Python JavaScript to fetch a JSON data structure

Struggling to figure out how to use javascript to fetch a json object from a python script. Despite trying various ajax and post methods, nothing seems to be working. So far, my setup looks like this: In the JavaScript portion: $.post('./cgi-bin/ ...

What is the best way to set up multiple routes for a single component in React

I am currently using Vue 2 in my project and have set up the following routes: const routes = [ { path: "/suites", component: Home, }, { path: "*", component: LandingPage, }, ]; Now, I need to include an additi ...

If someone rapidly clicks on an AngularJS app, the page fails to load

Just a heads up - I am pretty new to Angular. Most of the code is from a tutorial on Lynda that I'm experimenting with. I've noticed an issue when I try to implement a type of "pagination" feature to display various elements from a data.json file ...

implementing a new class for event handling that includes the toggleClass function

I'm not a full-time jQuery or JavaScript developer, so please forgive me if this is a silly question. I believe I require something similar to the live function for swapping classes in order to handle the values associated with a selector. This is th ...

What is the best way to retrieve a value from a database and display it in a radio

Can you help me figure out how to implement this functionality? I have a database with a "boolean" field that stores 0 or 1 values. On an HTML page, there is a radioButton with options for OK or NO. I need to dynamically load the boolean value from the dat ...

axios does not distinguish between response and error in its return value

I have created a React component that contains a function called onFormSubmit. This function calls another function from a separate component, which in turn makes a POST request using axios. I want the ability to return a response if the POST request is su ...

What are the steps to globalize the ng-bootstrap datepicker?

For my current project, I am utilizing the ng-bootstrap datePicker component. The demo for my simple datePicker widget can be found here. However, I am now seeking to internationalize it by setting it to use the Russian language. Any assistance with this ...

Issue with NPM's manual review process following recent package updates

Upon downloading node-sass, I encountered the following warning message: "found 9 vulnerabilities (4 moderate, 5 high) in 1869 scanned packages. 9 vulnerabilities require manual review. See the full report for details." Despite attempting to manually insta ...